Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

[Worskhop Summits] CSS3 Workshop

•
•
Christopher Schmitt
Christopher Schmitt

Recent implementation of CSS3 features in modern browsers allow for greater design control and creativity in our Web sites. In this three-hour workshop, attendees will learn about using colors through RGBa and opacity, multiple background and border images, text and box shadows, CSS-enabled gradients and transitions as well as laying out text in multiple columns. In addition to font embedding techniques and third-party font bureaus, we look into designing with older browsers in mind when coding with CSS3.

Related slideshows

CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
CSS Part I
CSS Part ICSS Part I
CSS Part I
 
Css3 Presetation
Css3 PresetationCss3 Presetation
Css3 Presetation
 
1 of 134
http://workshopsummits.com CSS3 WORKSHOP WORKSHOP SUMMITS 2010 Christopher Schmitt http://twitter.com/teleject 1
WHO AM I? • Web design specialist, trainer • Organize online & offline Web design conferences • Author of Designing CSS Web Pages • Author of CSS Cookbook, 3rd Edition (just published!) • http://ChristopherSchmitt.com 2
TODAY’S AGENDA • What is CSS3? • Explore new CSS3 selectors, properties • (and some other things, too) • How to make them cross-browser, when possible • Tinker with CSS3 examples on our own • Look at resources to help include CSS3 into your designs 3
WHAT IS CSS3? 4
5
Bridge between continents in Reykjanes peninsula, southwest Iceland across the Alfagja rift valley, the boundary of the Eurasian and North American continental tectonic plates 6
7
~50 CSS3 Modules http://www.w3.org/Style/CSS/current-work#CSS3 8
WHERE IS CSS3 COMING? • The specification is divided into different chunks, modules • http://www.w3.org/Style/CSS/current-work • Transformations • Animations • Media Queries • and so on, and so on... • at a glacial pace ever towards yesterday 9
WHERE IS CSS3 COMING? • The specification is divided into different chunks, modules • http://www.w3.org/Style/CSS/current-work • The specification is being written by W3C • http://www.w3.org/Style/CSS/ 10
WHERE IS CSS3 COMING? • The specification is divided into different chunks, modules • http://www.w3.org/Style/CSS/current-work • The specification is being written by W3C • http://www.w3.org/Style/CSS/ • Browservendors (like Firefox, Safari, and Opera) are implementing their own versions of these unfinished standards • IE9 is “bringing the power of PC hardware and Windows” 11
http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx 12
EXPLORING CSS3 (AND STUFF) 13
COLOR 14
OPACITY ON BACKGROUND COLORS (RGBA) 15
16
OPACITY #number4 { background-color: rgba(255, 255, 0, .4); } 17
OPACITY #number4 { background-color: rgb(255, 255, 0); background-color: rgba(255, 255, 0, .4); } 18
LESSONS LEARNED • Firefox 3+, Opera 10+, and Safari support RGBA • Requires another background-color property for cross-browser support. • IE Support? 19
OPACITY IN IE #number4 { background-color: transparent; filter:progid:DXImageTransform.Microsoft.gr adient( startColorstr=#66FFFF00, endColorstr=#66FFFF00 ); } 20
OPACITY IN IE • First step is to convert the RGB value of the color to hexadecimal. In this example, rgb(255,255,0) converts to #FFFF00. • Next, convert the alpha transparency value to hexadecimal string . In this example, the value is 66. • E.g., alpha value of .3 equals 4D in hexadecimal values • Then assemble the hexadecimal value for transparency and the color together in one string, starting with the transparency: #66FFFF00. 21
OPACITY ON ELEMENTS 22
23
OPACITY ON ELEMENTS #number4 { opacity: .4; /* .4 = 40% transparency */ filter: alpha(opacity=40); /* 40 = 40% transparency */ } 24
LESSONS LEARNED • Supported in Firefox 1.5+, Opera 9+, Safari 1.2+ and Chrome. • IE5.5+ requires the use of its own alpha filter in order for the effect to be cross-browser. •A drawback to using the opacity filter is that the value is inherited: • If a parent element is set to be 10% transparent, the child elements’ transparency is also going to be 10%. • Watch out for legibility issues within the Web page. 25
TEXT 26
TEXT-OVERFLOW 27
PNEUMONOULTRAMICROSCOPICSILICOVOLCANOCONIOSIS The longest word in the Oxford English dictionary is used to name a lung disease caused by the inhalation of very fine silica dust, causing inflammation in the lungs. 28
29
TEXT-OVERFLOW p{ text-overflow: ellipsis; -o-text-overflow: ellipsis; } 30
LESSONS LEARNED • Support: • Safari • Opera • and IE 31
TEXT-SELECTION 32
33
TEXT-SELECTION ::selection { color: #90c; background: #cf0; } ::-moz-selection { color: #90c; background: #cf0; } 34
LESSONS LEARNED • Support: • Safari • Firefox • Nice subtle effect, esp. if you deal with a lot of text on your site. 35
HTTP://TR.IM/KNR0 36
TEXT COLUMNS 37
38
TEXT COLUMNS <div id="column"> <p>…<p> <h2>…</h2> <p>…<p> <h2>…</h2> <p>…<p> </div> 39
TEXT COLUMNS #column { -moz-column-gap: 3em; -moz-column-width: 11em; -webkit-column-gap: 3em; -webkit-column-width: 11em; padding: 10px; } 40
TEXT COLUMNS #column { -moz-column-gap: 3em; -moz-column-width: 11em; -moz-column-rule: 1px solid #ccc; -webkit-column-gap: 3em; -webkit-column-width: 11em; -webkit-column-rule: 1px solid #ccc; padding: 10px; } 41
LESSONS LEARNED • Proprietary CSS extensions in Firefox and Safari. • JavaScriptsolution through a jQuery plugin: http://welcome.totheinter.net/2008/07/22/multi-column-layout- with-css-and-jquery/ 42
HTTP://TR.IM/KNRJ 43
@FONT-FACE 44
45
FONT FILE SUPPORT .ttf .otf .eot Safari 3.1+ Y Y Opera 10+ Y Y Firefox 3.5+ Y Y IE4+ Y 46
@FONT-FACE @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('Graublau Web Regular'), local('Graublau Web'), url('GraublauWeb.otf') format('opentype'), url("GraublauWeb.svg#graublau") format("svg"); } h1 { font-family: “Graublau Web”, Verdana, sans-serif; } http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ 47
LESSONS LEARNED • Getting @font-face to work is a little tough. • Use http://fontsquirrel.com for pre-made kits, @font-face generator • Chrome will have support in next build. (It’s in the betas.) Use SVG, • Don’t feel like bothering with all that hassle? • Use font services like typekit.com for 100s of licensed fonts. • Use commercially free fonts (see http://fontsquirrel.com) 48
LESSONS LEARNED • Font files are LARGE • gzip them, if you use them: http://articles.sitepoint.com/article/web-site-optimization-steps/2 • New font file format: WOFF: http://hacks.mozilla.org/2009/10/woff/ • Font files are already compressed and supports meta information telling where the font came from. (Vendors happy.) • It’s supported FF3.6 49
OH? YOU WANT “ITALICS”? @font-face { font-family: "Your italic typeface"; src: url("type/filename-ital.eot"); src: local("Alternate name"), local("Alternatename"), url("type/filename-ital.woff") format("woff"), url("type/filename-ital.otf") format("opentype"), url("type/filename-ital.svg#filename-ital") format("svg"); } http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ 50
TEXT-SHADOW 51
52
TEXT-SHADOW h1 { font-size: 2.5em; font-family: Myriad, Helvetica, Arial, sans-serif; width: 66.6%; text-shadow: yellow .15em .15em .15em; margin: 0 0 0.1em 0; } 53
54
BEVEL TEXT-SHADOW body { background-color: #999; } h1 { text-shadow: 0 1px 0 rgba(255,255,255,.6); } 55
56
TEXT-SHADOW FLAME h1 { color: red; text-shadow: rgba(0, 0, 0, .9) 0px 0px 1px, rgba(255, 255, 51, .9) 0px −5px 5px, rgba(255, 204, 51, .7) 2px −10px 7px, rgba(255, 153, 0, .6) −2px −15px 10px; } 57
58
SOLAR TEXT-SHADOW body { background-color: #dcaa96; /* not white */ background-image: url(tile.jpg); } h1 { color: white; text-shadow: black 0px 0px 6px; } 59
HTTP://TR.IM/KNSA 60
BORDERS 61
BOX-SHADOW 62
63
BOX-SHADOW #header { text-shadow: 0 −1px 0 rgba(0,0,0,.8); box-shadow: 3px 3px 19px rgba(0,0,0,.8); -webkit-box-shadow: 3px 3px 19px rgba(0,0,0,.8); -moz-box-shadow: 3px 3px 19px rgba(0,0,0,.8); } Works like text-shadow, but on boxes! 64
BORDER-IMAGE 65
66
BORDER-IMAGE <div id="section"> <h2>Images on Borders</h2> <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum..</p> </div><!-- /#section --> 67
BORDER-IMAGE #section { border-style: solid; border-color: #930; border-width: 26px 39px 37px 43px; border-image: url(frame.png) 26 39 37 43 stretch stretch; -webkit-border-image: url(frame.png) 26 39 37 43 stretch stretch; -moz-border-image: url(frame.png) 26 39 37 43 stretch round; } 68
LESSONS LEARNED • Works in FF 3.1+ and Safari 4+. • Image is scaled, if text is also scaled. 69
70
BORDER-IMAGE <form action="/" method="get"> <button>Submit</button> </form> 71
BORDER-IMAGE button { background: none; width: 250px; padding: 10px 0 10px 0; border-style: solid; border-color: #666; border-width: 0 17px 0 17px; } 72
BORDER-IMAGE button { background: none; width: 250px; padding: 10px 0 10px 0; border-style: solid; border-color: #666; border-width: 0 17px 0 17px; border-image: url(bkgd-button.png); } 73
BORDER-IMAGE button { background: none; width: 250px; padding: 10px 0 10px 0; border-style: solid; border-color: #666; border-width: 0 17px 0 17px; border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch; } 74
BORDER-IMAGE button { background: none; width: 250px; padding: 10px 0 10px 0; border-style: solid; border-color: #666; border-width: 0 17px 0 17px; border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch; -webkit-border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch; -moz-border-image: url(bkgd-button.png) 0 17 0 15 stretch stretch; } 75
BORDER-IMAGE button { background: none; width: 250px; padding: 10px 0 10px 0; border-style: solid; border-color: #666; border-width: 0 17px 0 17px; border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch; -webkit-border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch; -moz-border-image: url(bkgd-button.png) 0 17 0 15 stretch stretch; color: white; font-family: "Gill Sans", Trebuchet, Calibri, sans-serif; font-weight: bold; text-transform: uppercase; text-shadow: 0px 0px 5px rgba(0,0,0,.8); } 76
LESSONS LEARNED • Works in FF 3.1+ and Safari 4+. • Image is scaled, if text is also scaled. • Other values besides “stretch” are “repeat” (tiles the image); “round”, which tiles and filled it with whole images; and “space”, which is like “round” except it leaves empty space 77
BORDER-RADIUS 78
79
BORDER-RADIUS div { background-image: url(beach.jpg); width: 375px; height: 500px; border: 8px solid #666; border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; } 80
BORDER-RADIUS CSS3 Firefox WebKit border-radius -moz-border-radius -webkit-border-radius -moz-border-radius- -webkit-border-top-left- border-top-left-radius topleft radius -moz-border-radius- -webkit-border-top- border-top-right-radius topright right-radius border-bottom- -moz-border-radius- -webkit-border-bottom- right-radius bottomright right-radius border-bottom-left- -moz-border-radius- -webkit-border-bottom- radius bottomleft left-radius 81
LESSONS LEARNED • Radius is half the distance of the diameter. (Stay in school, kids!) • Radius border can be applied to one, two, three or all corners. • The higher the value for the radius, the more rounded the corner will be. • If borders on an inline image (IMG element) are rather large, borders are shown behind the image (see previous screenshot). • Workaround is to either keep border-radius value small or place image in background. 82
HTTP://TR.IM/KNST 83
EFFECTS 84
IMAGE MASKS 85
86
87
IMAGE MASKS img { display: block; float: left; margin-right:20px; border: 10px solid #ccc; padding: 2px; background-color: #666; -webkit-mask-box-image: url(mask.png); } 88
LESSONS LEARNED • When creating a mask, every part of the image that is transparent becomes the mask or the part that hides a portion of the background image. • Approach is somewhat hard to understand, since typically, alpha transparency is, well, transparent. • Themasks scale to the complete width of image, including borders. • The background shows through, including background images. • Might work best with areas of flat color behind the images 89
GRADIENTS 90
91
GRADIENTS div.building { border: 1px solid #666; float: left; width: 300px; height: 300px; margin: 20px; background-image: -webkit-gradient(radial,center center,900,center bottom,0,from(#0cf),to(white)); background-image: -moz-radial-gradient(center,900px,center bottom,0,from(#0cf),to(white)); background-repeat: no-repeat; } 92
SAFARI GRADIENTS background-image: -webkit-gradient(); Recommend using background-image over background shorthand. 93
SAFARI GRADIENTS background-image: -webkit-gradient(radial); Other value it accepts is linear. 94
SAFARI GRADIENTS background-image: -webkit-gradient(radial,center center,900); Set the starting position of gradient. 95
SAFARI GRADIENTS background-image: -webkit-gradient(radial,center center,900,center bottom,0); Set the end position of gradient. 96
SAFARI GRADIENTS background-image: -webkit-gradient(radial,center center,900,center bottom,0,from(#0cf),to(white)); Set the starting and stopping colors. 97
LESSONS LEARNED • Gradients in Safari can be applied to not just background images of block-level elements, but also: • list bullets, generated content, and border-images! • Unit values aren’t accepted (px, em, etc.) It’s assumed to be pixels. • Don’t use background-position shorthand values. • Use a background-image with a gradient for “older” browsers. 98
FIREFOX GRADIENTS • Whereas Safari sets the type of gradient within its own proprietary property, Firefox has properties for both types of gradients: -moz-radial-gradient() and -moz-radiallinear(). • Unlikethe Safari gradient, you can use background-position shorthand values and unit values when setting the starting and stopping points of gradients. • Firefox’s implementation of CSS gradients concerns transparency. 99
FIREFOX GRADIENTS background-image: -moz-linear-gradient(left top, left bottom, from(rgba(153,51,0,.3)), to(#6b3703), color-stop(0.5, #903000)); 100
HTTP://TR.IM/KNTL 101
GRADIENT MASKS 102
103
GRADIENT MASKS img { display: block; float: left; margin-right:20px; border: 10px solid #ccc; padding: 2px; background-color: #666; -webkit-mask-box-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); } Only works in Safari. 104
Example of transparent gradients, border image, PNG8, text-shadow, box-shadow 105
TRANSFORM & ANIMATE 106
TRANSFORM 107
108
TRANSFORM img+img { transform: rotate(270deg); -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } 109
TRANSFORM IE CONVERSION Degree BasicImage Rotation filter value 0 0 90 1 180 2 270 3 110
ANIMATING LINKS 111
112
ANIMATING LINKS #navsite a { -webkit-transition-timing-function: linear; -webkit-transition-duration: .66s; -webkit-transition-property: background-color; } Style rollover links normally. 113
LESSONS LEARNED • Thetransitioning-timing-function function states the type of animation the effect is going to take. • Inthis example, the value is set to linear, which means each frame of the animation length takes the same amount of time. • Other values for transitioning-timing-function include ease, ease- in, ease-out, and cubic-bezier(x1, y1, x2, y2). 114
CUBIC BEZIER CURVE http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag 115
CUBIC BEZIER CURVE cubic-bezier(x1, y1, x2, y2) • Thefirst two values of cubic-bezier represent the transition on a curve, as shown in the figure. • Values for y1 and y2 represent the start and end of the transition and are always equal to the values of 0.0 and 1.0, respectively. • The speed with which the transition takes hold is represented by the values x1 and x2. The greater the value for x1 and x2, the slower the transition occurs. 116
CUBIC BEZIER CURVE cubic-bezier(x1, y1, x2, y2) •A value of ease-in starts the transition at a slow speed and then speeds up. This value is equivalent to cubic-bezier(0.42, 0, 1.0, 1). • Theease-out value starts the transition at a fast speed and then slows down. This value is equivalent to cubic-bezier(0.42, 0, 1.0, 1). • The ease value is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0). 117
DURATION & DELAY • The transition-duration property’s default value is 0. • Any negative value is treated as though it’s zero. • Units the value may take include, but are not limited to, “s” for seconds and “ms” for milliseconds. • The transition-delay property sets the amount of time before a transition starts. 118
TRANSITION PROPERTY • The transition-property property defines which CSS visual property the transition is applied to. • In the animated link example, the transition is applied to the background color. 119
SHORTHAND PROPERTY • You can write the properties of the transition effect in one value for the transition property: #navsite a { -webkit-transition: background-color .66s linear; } 120
COMPLEX ANIMATING LINKS 121
122
COMPLEX ANIMATED LINKS • Web designer Faruk Ateş’s personal site (see http://farukat.es/) uses the transition property to change the color of the element. • As well as the color, width, box shadow, text shadow, and opacity. 123
COMPLEX ANIMATED LINKS #web20 li a { text-shadow: rgba(0,0,0, 0) 1px 1px 2px; -moz-box-shadow: rgba(0,0,0, 0) 2px 2px 2px; -webkit-box-shadow: rgba(0,0,0, 0) 2px 2px 2px; -moz-border-radius-topright: 31px; -moz-border-radius-bottomright: 31px; -webkit-border-top-right-radius: 31px; -webkit-border-bottom-right-radius: 31px; -webkit-transition: background-color .25s ease, color .5s ease, width .2s ease-out, -webkit-box-shadow .25s ease, text-shadow .2s ease, opacity .2s ease; } 124
ANIMATING ELEMENTS 125
126
ANIMATING ELEMENTS <body> <div id="clouds1"></div> [...] </body> 127
ANIMATING ELEMENTS #clouds1 { width: 627px; height: 410px; position: absolute; right: −300px; top: 0; background-image: url(clouds.png); } 128
ANIMATING ELEMENTS @-webkit-keyframes "clouds" { from { right: 0px; } to { right: 100px; } } 129
ANIMATING ELEMENTS #clouds1 { width: 627px; height: 410px; position: absolute; right: −300px; top: 0; background-image: url(clouds.png); -webkit-transform: translate(300px, 0px); -webkit-animation-name: "clouds"; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: 10; -webkit-animation-direction: alternate; } 130
ANIMATING ELEMENTS • Animations can take on more than one property (think offset properties and even opacity for some interesting effects). • The animation-transform property is used to associate which keyframe rule is used (“clouds). • The animation-duration is set for how long the effect should occur. (Negative values are treated as zero.) • The animation-iteration-count tells how many times it should happen. For constant looping, use value of “infinite”. • Use animation-direction property set to normal loops animation, while “alternate” creates a more seamless presentation (back and forth). 131
RESOURCES • “When Can I Use…” http://a.deveria.com/caniuse/ • Modernizr http://www.modernizr.com/ • CSS Cookbook, 3rd Edition http://oreilly.com/catalog/9780596155940 • CSS3 Sandbox http://westciv.com/tools/gradients/ • “10 Amazing Examples of Innovative CSS3 Animation” http://designshack.co.uk/articles/css/10-amazing-examples-of-innovative-css3-animation 132
THANK YOU! Christopher Schmitt schmitt@heatvision.com http://twitter.com/teleject 133
Creative Commons Citations: http://www.flickr.com/photos/camkage/3682824473/ http://www.flickr.com/photos/dabiri/2538913191/ http://en.wikipedia.org/wiki/ File:Bridge_across_continents_iceland.jpg http://en.wikipedia.org/wiki/File:Plates_tect2_en.svg 134

More Related Content

[Worskhop Summits] CSS3 Workshop

  • 1. http://workshopsummits.com CSS3 WORKSHOP WORKSHOP SUMMITS 2010 Christopher Schmitt http://twitter.com/teleject 1
  • 2. WHO AM I? • Web design specialist, trainer • Organize online & offline Web design conferences • Author of Designing CSS Web Pages • Author of CSS Cookbook, 3rd Edition (just published!) • http://ChristopherSchmitt.com 2
  • 3. TODAY’S AGENDA • What is CSS3? • Explore new CSS3 selectors, properties • (and some other things, too) • How to make them cross-browser, when possible • Tinker with CSS3 examples on our own • Look at resources to help include CSS3 into your designs 3
  • 5. 5
  • 6. Bridge between continents in Reykjanes peninsula, southwest Iceland across the Alfagja rift valley, the boundary of the Eurasian and North American continental tectonic plates 6
  • 7. 7
  • 9. WHERE IS CSS3 COMING? • The specification is divided into different chunks, modules • http://www.w3.org/Style/CSS/current-work • Transformations • Animations • Media Queries • and so on, and so on... • at a glacial pace ever towards yesterday 9
  • 10. WHERE IS CSS3 COMING? • The specification is divided into different chunks, modules • http://www.w3.org/Style/CSS/current-work • The specification is being written by W3C • http://www.w3.org/Style/CSS/ 10
  • 11. WHERE IS CSS3 COMING? • The specification is divided into different chunks, modules • http://www.w3.org/Style/CSS/current-work • The specification is being written by W3C • http://www.w3.org/Style/CSS/ • Browservendors (like Firefox, Safari, and Opera) are implementing their own versions of these unfinished standards • IE9 is “bringing the power of PC hardware and Windows” 11
  • 13. EXPLORING CSS3 (AND STUFF) 13
  • 16. 16
  • 17. OPACITY #number4 { background-color: rgba(255, 255, 0, .4); } 17
  • 18. OPACITY #number4 { background-color: rgb(255, 255, 0); background-color: rgba(255, 255, 0, .4); } 18
  • 19. LESSONS LEARNED • Firefox 3+, Opera 10+, and Safari support RGBA • Requires another background-color property for cross-browser support. • IE Support? 19
  • 20. OPACITY IN IE #number4 { background-color: transparent; filter:progid:DXImageTransform.Microsoft.gr adient( startColorstr=#66FFFF00, endColorstr=#66FFFF00 ); } 20
  • 21. OPACITY IN IE • First step is to convert the RGB value of the color to hexadecimal. In this example, rgb(255,255,0) converts to #FFFF00. • Next, convert the alpha transparency value to hexadecimal string . In this example, the value is 66. • E.g., alpha value of .3 equals 4D in hexadecimal values • Then assemble the hexadecimal value for transparency and the color together in one string, starting with the transparency: #66FFFF00. 21
  • 23. 23
  • 24. OPACITY ON ELEMENTS #number4 { opacity: .4; /* .4 = 40% transparency */ filter: alpha(opacity=40); /* 40 = 40% transparency */ } 24
  • 25. LESSONS LEARNED • Supported in Firefox 1.5+, Opera 9+, Safari 1.2+ and Chrome. • IE5.5+ requires the use of its own alpha filter in order for the effect to be cross-browser. •A drawback to using the opacity filter is that the value is inherited: • If a parent element is set to be 10% transparent, the child elements’ transparency is also going to be 10%. • Watch out for legibility issues within the Web page. 25
  • 28. PNEUMONOULTRAMICROSCOPICSILICOVOLCANOCONIOSIS The longest word in the Oxford English dictionary is used to name a lung disease caused by the inhalation of very fine silica dust, causing inflammation in the lungs. 28
  • 29. 29
  • 30. TEXT-OVERFLOW p{ text-overflow: ellipsis; -o-text-overflow: ellipsis; } 30
  • 31. LESSONS LEARNED • Support: • Safari • Opera • and IE 31
  • 33. 33
  • 34. TEXT-SELECTION ::selection { color: #90c; background: #cf0; } ::-moz-selection { color: #90c; background: #cf0; } 34
  • 35. LESSONS LEARNED • Support: • Safari • Firefox • Nice subtle effect, esp. if you deal with a lot of text on your site. 35
  • 38. 38
  • 40. TEXT COLUMNS #column { -moz-column-gap: 3em; -moz-column-width: 11em; -webkit-column-gap: 3em; -webkit-column-width: 11em; padding: 10px; } 40
  • 41. TEXT COLUMNS #column { -moz-column-gap: 3em; -moz-column-width: 11em; -moz-column-rule: 1px solid #ccc; -webkit-column-gap: 3em; -webkit-column-width: 11em; -webkit-column-rule: 1px solid #ccc; padding: 10px; } 41
  • 42. LESSONS LEARNED • Proprietary CSS extensions in Firefox and Safari. • JavaScriptsolution through a jQuery plugin: http://welcome.totheinter.net/2008/07/22/multi-column-layout- with-css-and-jquery/ 42
  • 45. 45
  • 46. FONT FILE SUPPORT .ttf .otf .eot Safari 3.1+ Y Y Opera 10+ Y Y Firefox 3.5+ Y Y IE4+ Y 46
  • 47. @FONT-FACE @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('Graublau Web Regular'), local('Graublau Web'), url('GraublauWeb.otf') format('opentype'), url("GraublauWeb.svg#graublau") format("svg"); } h1 { font-family: “Graublau Web”, Verdana, sans-serif; } http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ 47
  • 48. LESSONS LEARNED • Getting @font-face to work is a little tough. • Use http://fontsquirrel.com for pre-made kits, @font-face generator • Chrome will have support in next build. (It’s in the betas.) Use SVG, • Don’t feel like bothering with all that hassle? • Use font services like typekit.com for 100s of licensed fonts. • Use commercially free fonts (see http://fontsquirrel.com) 48
  • 49. LESSONS LEARNED • Font files are LARGE • gzip them, if you use them: http://articles.sitepoint.com/article/web-site-optimization-steps/2 • New font file format: WOFF: http://hacks.mozilla.org/2009/10/woff/ • Font files are already compressed and supports meta information telling where the font came from. (Vendors happy.) • It’s supported FF3.6 49
  • 50. OH? YOU WANT “ITALICS”? @font-face { font-family: "Your italic typeface"; src: url("type/filename-ital.eot"); src: local("Alternate name"), local("Alternatename"), url("type/filename-ital.woff") format("woff"), url("type/filename-ital.otf") format("opentype"), url("type/filename-ital.svg#filename-ital") format("svg"); } http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ 50
  • 52. 52
  • 53. TEXT-SHADOW h1 { font-size: 2.5em; font-family: Myriad, Helvetica, Arial, sans-serif; width: 66.6%; text-shadow: yellow .15em .15em .15em; margin: 0 0 0.1em 0; } 53
  • 54. 54
  • 55. BEVEL TEXT-SHADOW body { background-color: #999; } h1 { text-shadow: 0 1px 0 rgba(255,255,255,.6); } 55
  • 56. 56
  • 57. TEXT-SHADOW FLAME h1 { color: red; text-shadow: rgba(0, 0, 0, .9) 0px 0px 1px, rgba(255, 255, 51, .9) 0px −5px 5px, rgba(255, 204, 51, .7) 2px −10px 7px, rgba(255, 153, 0, .6) −2px −15px 10px; } 57
  • 58. 58
  • 59. SOLAR TEXT-SHADOW body { background-color: #dcaa96; /* not white */ background-image: url(tile.jpg); } h1 { color: white; text-shadow: black 0px 0px 6px; } 59
  • 61. BORDERS 61
  • 63. 63
  • 64. BOX-SHADOW #header { text-shadow: 0 −1px 0 rgba(0,0,0,.8); box-shadow: 3px 3px 19px rgba(0,0,0,.8); -webkit-box-shadow: 3px 3px 19px rgba(0,0,0,.8); -moz-box-shadow: 3px 3px 19px rgba(0,0,0,.8); } Works like text-shadow, but on boxes! 64
  • 66. 66
  • 67. BORDER-IMAGE <div id="section"> <h2>Images on Borders</h2> <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum..</p> </div><!-- /#section --> 67
  • 68. BORDER-IMAGE #section { border-style: solid; border-color: #930; border-width: 26px 39px 37px 43px; border-image: url(frame.png) 26 39 37 43 stretch stretch; -webkit-border-image: url(frame.png) 26 39 37 43 stretch stretch; -moz-border-image: url(frame.png) 26 39 37 43 stretch round; } 68
  • 69. LESSONS LEARNED • Works in FF 3.1+ and Safari 4+. • Image is scaled, if text is also scaled. 69
  • 70. 70
  • 72. BORDER-IMAGE button { background: none; width: 250px; padding: 10px 0 10px 0; border-style: solid; border-color: #666; border-width: 0 17px 0 17px; } 72
  • 73. BORDER-IMAGE button { background: none; width: 250px; padding: 10px 0 10px 0; border-style: solid; border-color: #666; border-width: 0 17px 0 17px; border-image: url(bkgd-button.png); } 73
  • 74. BORDER-IMAGE button { background: none; width: 250px; padding: 10px 0 10px 0; border-style: solid; border-color: #666; border-width: 0 17px 0 17px; border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch; } 74
  • 75. BORDER-IMAGE button { background: none; width: 250px; padding: 10px 0 10px 0; border-style: solid; border-color: #666; border-width: 0 17px 0 17px; border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch; -webkit-border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch; -moz-border-image: url(bkgd-button.png) 0 17 0 15 stretch stretch; } 75
  • 76. BORDER-IMAGE button { background: none; width: 250px; padding: 10px 0 10px 0; border-style: solid; border-color: #666; border-width: 0 17px 0 17px; border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch; -webkit-border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch; -moz-border-image: url(bkgd-button.png) 0 17 0 15 stretch stretch; color: white; font-family: "Gill Sans", Trebuchet, Calibri, sans-serif; font-weight: bold; text-transform: uppercase; text-shadow: 0px 0px 5px rgba(0,0,0,.8); } 76
  • 77. LESSONS LEARNED • Works in FF 3.1+ and Safari 4+. • Image is scaled, if text is also scaled. • Other values besides “stretch” are “repeat” (tiles the image); “round”, which tiles and filled it with whole images; and “space”, which is like “round” except it leaves empty space 77
  • 79. 79
  • 80. BORDER-RADIUS div { background-image: url(beach.jpg); width: 375px; height: 500px; border: 8px solid #666; border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; } 80
  • 81. BORDER-RADIUS CSS3 Firefox WebKit border-radius -moz-border-radius -webkit-border-radius -moz-border-radius- -webkit-border-top-left- border-top-left-radius topleft radius -moz-border-radius- -webkit-border-top- border-top-right-radius topright right-radius border-bottom- -moz-border-radius- -webkit-border-bottom- right-radius bottomright right-radius border-bottom-left- -moz-border-radius- -webkit-border-bottom- radius bottomleft left-radius 81
  • 82. LESSONS LEARNED • Radius is half the distance of the diameter. (Stay in school, kids!) • Radius border can be applied to one, two, three or all corners. • The higher the value for the radius, the more rounded the corner will be. • If borders on an inline image (IMG element) are rather large, borders are shown behind the image (see previous screenshot). • Workaround is to either keep border-radius value small or place image in background. 82
  • 84. EFFECTS 84
  • 86. 86
  • 87. 87
  • 88. IMAGE MASKS img { display: block; float: left; margin-right:20px; border: 10px solid #ccc; padding: 2px; background-color: #666; -webkit-mask-box-image: url(mask.png); } 88
  • 89. LESSONS LEARNED • When creating a mask, every part of the image that is transparent becomes the mask or the part that hides a portion of the background image. • Approach is somewhat hard to understand, since typically, alpha transparency is, well, transparent. • Themasks scale to the complete width of image, including borders. • The background shows through, including background images. • Might work best with areas of flat color behind the images 89
  • 90. GRADIENTS 90
  • 91. 91
  • 92. GRADIENTS div.building { border: 1px solid #666; float: left; width: 300px; height: 300px; margin: 20px; background-image: -webkit-gradient(radial,center center,900,center bottom,0,from(#0cf),to(white)); background-image: -moz-radial-gradient(center,900px,center bottom,0,from(#0cf),to(white)); background-repeat: no-repeat; } 92
  • 93. SAFARI GRADIENTS background-image: -webkit-gradient(); Recommend using background-image over background shorthand. 93
  • 94. SAFARI GRADIENTS background-image: -webkit-gradient(radial); Other value it accepts is linear. 94
  • 95. SAFARI GRADIENTS background-image: -webkit-gradient(radial,center center,900); Set the starting position of gradient. 95
  • 96. SAFARI GRADIENTS background-image: -webkit-gradient(radial,center center,900,center bottom,0); Set the end position of gradient. 96
  • 97. SAFARI GRADIENTS background-image: -webkit-gradient(radial,center center,900,center bottom,0,from(#0cf),to(white)); Set the starting and stopping colors. 97
  • 98. LESSONS LEARNED • Gradients in Safari can be applied to not just background images of block-level elements, but also: • list bullets, generated content, and border-images! • Unit values aren’t accepted (px, em, etc.) It’s assumed to be pixels. • Don’t use background-position shorthand values. • Use a background-image with a gradient for “older” browsers. 98
  • 99. FIREFOX GRADIENTS • Whereas Safari sets the type of gradient within its own proprietary property, Firefox has properties for both types of gradients: -moz-radial-gradient() and -moz-radiallinear(). • Unlikethe Safari gradient, you can use background-position shorthand values and unit values when setting the starting and stopping points of gradients. • Firefox’s implementation of CSS gradients concerns transparency. 99
  • 100. FIREFOX GRADIENTS background-image: -moz-linear-gradient(left top, left bottom, from(rgba(153,51,0,.3)), to(#6b3703), color-stop(0.5, #903000)); 100
  • 103. 103
  • 104. GRADIENT MASKS img { display: block; float: left; margin-right:20px; border: 10px solid #ccc; padding: 2px; background-color: #666; -webkit-mask-box-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); } Only works in Safari. 104
  • 105. Example of transparent gradients, border image, PNG8, text-shadow, box-shadow 105
  • 107. TRANSFORM 107
  • 108. 108
  • 109. TRANSFORM img+img { transform: rotate(270deg); -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } 109
  • 110. TRANSFORM IE CONVERSION Degree BasicImage Rotation filter value 0 0 90 1 180 2 270 3 110
  • 112. 112
  • 113. ANIMATING LINKS #navsite a { -webkit-transition-timing-function: linear; -webkit-transition-duration: .66s; -webkit-transition-property: background-color; } Style rollover links normally. 113
  • 114. LESSONS LEARNED • Thetransitioning-timing-function function states the type of animation the effect is going to take. • Inthis example, the value is set to linear, which means each frame of the animation length takes the same amount of time. • Other values for transitioning-timing-function include ease, ease- in, ease-out, and cubic-bezier(x1, y1, x2, y2). 114
  • 116. CUBIC BEZIER CURVE cubic-bezier(x1, y1, x2, y2) • Thefirst two values of cubic-bezier represent the transition on a curve, as shown in the figure. • Values for y1 and y2 represent the start and end of the transition and are always equal to the values of 0.0 and 1.0, respectively. • The speed with which the transition takes hold is represented by the values x1 and x2. The greater the value for x1 and x2, the slower the transition occurs. 116
  • 117. CUBIC BEZIER CURVE cubic-bezier(x1, y1, x2, y2) •A value of ease-in starts the transition at a slow speed and then speeds up. This value is equivalent to cubic-bezier(0.42, 0, 1.0, 1). • Theease-out value starts the transition at a fast speed and then slows down. This value is equivalent to cubic-bezier(0.42, 0, 1.0, 1). • The ease value is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0). 117
  • 118. DURATION & DELAY • The transition-duration property’s default value is 0. • Any negative value is treated as though it’s zero. • Units the value may take include, but are not limited to, “s” for seconds and “ms” for milliseconds. • The transition-delay property sets the amount of time before a transition starts. 118
  • 119. TRANSITION PROPERTY • The transition-property property defines which CSS visual property the transition is applied to. • In the animated link example, the transition is applied to the background color. 119
  • 120. SHORTHAND PROPERTY • You can write the properties of the transition effect in one value for the transition property: #navsite a { -webkit-transition: background-color .66s linear; } 120
  • 122. 122
  • 123. COMPLEX ANIMATED LINKS • Web designer Faruk Ateş’s personal site (see http://farukat.es/) uses the transition property to change the color of the element. • As well as the color, width, box shadow, text shadow, and opacity. 123
  • 124. COMPLEX ANIMATED LINKS #web20 li a { text-shadow: rgba(0,0,0, 0) 1px 1px 2px; -moz-box-shadow: rgba(0,0,0, 0) 2px 2px 2px; -webkit-box-shadow: rgba(0,0,0, 0) 2px 2px 2px; -moz-border-radius-topright: 31px; -moz-border-radius-bottomright: 31px; -webkit-border-top-right-radius: 31px; -webkit-border-bottom-right-radius: 31px; -webkit-transition: background-color .25s ease, color .5s ease, width .2s ease-out, -webkit-box-shadow .25s ease, text-shadow .2s ease, opacity .2s ease; } 124
  • 126. 126
  • 128. ANIMATING ELEMENTS #clouds1 { width: 627px; height: 410px; position: absolute; right: −300px; top: 0; background-image: url(clouds.png); } 128
  • 129. ANIMATING ELEMENTS @-webkit-keyframes "clouds" { from { right: 0px; } to { right: 100px; } } 129
  • 130. ANIMATING ELEMENTS #clouds1 { width: 627px; height: 410px; position: absolute; right: −300px; top: 0; background-image: url(clouds.png); -webkit-transform: translate(300px, 0px); -webkit-animation-name: "clouds"; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: 10; -webkit-animation-direction: alternate; } 130
  • 131. ANIMATING ELEMENTS • Animations can take on more than one property (think offset properties and even opacity for some interesting effects). • The animation-transform property is used to associate which keyframe rule is used (“clouds). • The animation-duration is set for how long the effect should occur. (Negative values are treated as zero.) • The animation-iteration-count tells how many times it should happen. For constant looping, use value of “infinite”. • Use animation-direction property set to normal loops animation, while “alternate” creates a more seamless presentation (back and forth). 131
  • 132. RESOURCES • “When Can I Use…” http://a.deveria.com/caniuse/ • Modernizr http://www.modernizr.com/ • CSS Cookbook, 3rd Edition http://oreilly.com/catalog/9780596155940 • CSS3 Sandbox http://westciv.com/tools/gradients/ • “10 Amazing Examples of Innovative CSS3 Animation” http://designshack.co.uk/articles/css/10-amazing-examples-of-innovative-css3-animation 132
  • 133. THANK YOU! Christopher Schmitt schmitt@heatvision.com http://twitter.com/teleject 133
  • 134. Creative Commons Citations: http://www.flickr.com/photos/camkage/3682824473/ http://www.flickr.com/photos/dabiri/2538913191/ http://en.wikipedia.org/wiki/ File:Bridge_across_continents_iceland.jpg http://en.wikipedia.org/wiki/File:Plates_tect2_en.svg 134