Learn to Love CSS3 [English]

  • 1,023 views
Uploaded on

Curious to know what this CSS3 hype is all about? Visit this presentation to learn that it isn't just a hype. CSS3 adds awesome new capabilities to a front-end developer's palette of tools to create a …

Curious to know what this CSS3 hype is all about? Visit this presentation to learn that it isn't just a hype. CSS3 adds awesome new capabilities to a front-end developer's palette of tools to create a beautiful (and functional) website.

Learn more about several of the best new options that CSS3 is giving us, the current level of browser support for CSS3, and lots of useful resources to keep yourself up-to-date and learn more.

If you want to learn how to style your website using CSS3, then this is a presentation you don't want to miss!

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,023
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
38
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Use when and where? Some examples. History first
  • Looks hard. I'm happy that in 1994 Hakon and Bert went to work together
  • Very similar as you can see
  • Took a long time. Some browsers found it harder to support/implement CSS2.1 then others
  • No CSS3 logo. Do not use clumns with gaps etc or box-sizing w/o fallback. Not to make things clear on forms. No box-shadow as border on input elements.
  • Think of gradients and RGBA or HSLA for example
  • Things like box-shadow, text-shadow & border-radius on big elements or to much of it
  • I'll start with RGBA because I will use it in following examples. I won't get into depth because there's no time and the sheets will be online.
  • Mozilla 3.x, all Chrome, Safari 3.x, Opera 10.x, IE9, mobile safari Use it on: color; background & border
  • Mozilla 3.x, all Chrome, Safari 3.x, Opera 10.x, IE9, mobile safari Use it on: color; background & border
  • Mozilla 3.x, all Chrome, Safari 3.x, Opera 10.x, IE9, mobile safari Use it on: color; background & border
  • Text-shadow was introduced in CSS2.0 but was removed in CSS2.1 because of compatibility This doesn't work on IE9! Seperate with a comma!
  • Vendor prefixes!
  • Inset + Smaller shadow + with spread
  • shorthand is ...
  • Most readable or middel color as a background color Webkit has two. I only use the latest one
  • NO background image for transparancy
  • Do give it a background-color and make use of it
  • It doesn't recognize text yet. It breaks words on width and not on words. Could be improved
  • I always use all because when only some parts "animate" it looks weird DOESN'T work on IE(, sucks
  • 4 different transforms + vendor prefixes Doesnt work with commas
  • Use it only for "animations" with more then one frame
  • Nooit te veel zelf onthouden, check altijd je sites

Transcript

  • 1. CSS3 Robin Poort (@rhcpoort)CEO & co-founder ThemePartner (@theme_partner) J and Beyond, Bad Nauheim, may 2012
  • 2. 1993
  • 3. Robert Raisch proposed "named Stylesheets"Source: http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/443.html
  • 4. 1994
  • 5. Håkon Wium Lie & Bert Bos create CSS1Source: http://upload.wikimedia.org/wikipedia/commons/5/54/H%C3%A5kon_Wium_Lie.jpgSource: http://www.w3c.de/Events/2006/images/PrintSymposium/slides/_DSC0209.JPG
  • 6. CSS1 in developmenth1.font.size = 24pt 100%40%font.family = timesh1.font.family = helvetica 100%60%AGE > 3d ? background.color = pale_yellow : background.color = whiteDISPLAY_HEIGHT > 30cm ? http://NYT.com/style : http://LeMonde.fr/style
  • 7. 1996
  • 8. CSS1 recommended by the W3C
  • 9. 1998
  • 10. CSS2 recommended by the W3C
  • 11. 1999
  • 12. CSS3 mentioned for the first time
  • 13. 1999?!
  • 14. Using CSS3Where & when?
  • 15. Not on the critical layersdont use it on branding, layout & usability
  • 16. Progressively enhance!Make sure the website works in older browsers
  • 17. Performance problems Make your website fast!
  • 18. Some examples!
  • 19. p.rgba1 { color: #000000; color: rgba(0,0,0,1);}p.rgba2 { color: #FF0000; color: rgba(255,0,0,.5);}p.rgba3 { color: #1ebdbe; color: rgba(30,189,190,.25);} Always put the non-rgba color for older browsers before the rgba color
  • 20. div.rgba1 { background: #000000; background: rgba(0,0,0,.8); color: #FFF;}div.rgba2 { background: #FFF; background: rgba(255,255,255,.25);}div.rgba3 { background: #1ebdbe; background: rgba(30,189,190,.5);}
  • 21. div.rgba1 { background: #555; border: 5px solid; border-color: #000; border-color: rgba(0,0,0,.3);}div.rgba2 { background: #3d3877; border: 5px solid; border-color: #9d9bba; border-color: rgba(255,255,255,.5);}div.rgba3 { background: url(seaguls.png); border: 10px solid; border-color: #black; border-color: rgba(0,0,0,.5);}
  • 22. <p class=”shadow1”>Lorem ipsum</p>p.shadow1 { font-weight: bold; font-size: 75px; line-height: 1em; color: #137576; text-shadow: 1px 1px 0 #42d5d6, -1px -1px 0 #084a4a, -2px -2px 1px rgba(0,0,0,.2), 2px 2px 1px rgba(255,255,255,.2);}
  • 23. <p class=”shadow2”>Lorem ipsum</p>p.shadow2 { font-weight: bold; font-size: 75px; line-height: 1em; color: #FFF; text-shadow: 0 1px 0 #96e0e0, 0 2px 0 #86e0e0, 0 3px 0 #76e0e0, 0 4px 0 #56e0e0, 0 5px 5px rgba(0,0,0,.3), 0 10px 10px rgba(0,0,0,.2);}
  • 24. <p class=”shadow3”>Lorem ipsum</p>p.shadow3 { font-weight: bold; font-size: 75px; line-height: 1em; color: #FFF; background: #222; text-shadow: 0 0 4px black, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;}
  • 25. <div class=”shadow1”>Lorem ipsum</div>div.shadow1 { background: #FFF; text-align: center; -webkit-box-shadow: ...; -moz-box-shadow: ...; box-shadow: 5px 5px 0 rgba(0,0,0,.3);}
  • 26. <div class=”shadow2”>Lorem ipsum</div>div.shadow2 { background: #FFF; text-align: center; -webkit-box-shadow: ...; -moz-box-shadow: ...; box-shadow: 0 0 1px black, 0 0 15px white;}
  • 27. <div class=”shadow3”>Lorem ipsum</div>div.shadow3 { background: #FFF; text-align: center; -webkit-box-shadow: ...; -moz-box-shadow: ...; box-shadow: 5px 5px 0 white inset, -5px -5px 0 white inset, 6px 6px 0 rgba(0,0,0,.15) inset, -6px -6px 0 rgba(0,0,0,.15) inset, 0 0 20px rgba(0,0,0,.5) inset, 0 0 7px rgba(0,0,0,.2), 0 10px 10px -10px black;}
  • 28. <div class=”radius1”>Lorem ipsum</div>div.radius1 { background: #FFF; text-align: center; -webkit-border-radius: ...; -moz-border-radius: ...; border-radius: 20px;}
  • 29. <div class=”radius2”>Lorem ipsum</div>div.radius2 { background: #FFF; text-align: center; width: 200px; height: 200px; font-size: 20px; line-height: 200px; -webkit-border-radius: ...; -moz-border-radius: ...; border-radius: 9999px;}
  • 30. <div class=”radius3”>Lorem ipsum</div>div.radius3 { background: #FFF; text-align: center; -webkit-border-radius: ...; -moz-border-radius: ...; border-radius: 20px 60px;}
  • 31. <div class=”gradient1”></div>div.gradient1 { /* Basic color */ background-color: #183c7a; /* Chrome, Safari4+ */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#183c7a), color-stop(100%,#84b6f4)); /* Chrome10+, Safari5.1+ & The rest */ background-image: -webkit-linear-gradient(top, #183c7a 0%,#84b6f4 100%); background-image: -moz-linear-gradient(top, #183c7a 0%, #84b6f4 100%); background-image: -o-linear-gradient(top, #183c7a 0%,#84b6f4 100%); background-image: -ms-linear-gradient(top, #183c7a 0%,#84b6f4 100%); background-image: linear-gradient(top, #183c7a 0%,#84b6f4 100%);} Always start with a solid color for older browsers
  • 32. <div class=”gradient2”></div>div.gradient2 { /* Basic color */ background-color: #183c7a; /* Chrome, Safari4+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(24,60,122,1)), color-stop(100%,rgba(132,182,244,0.5))); /* Chrome10+, Safari5.1+ & The rest */ background: -webkit-radial-gradient(center, ellipse cover, rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%); background: -moz-radial-gradient(Same as webkit) background: o-radial-gradient(Same as webkit) background: radial-gradient(center, ellipse cover, rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%);}
  • 33. <div class=”gradient3”></div>div.gradient3 { /* Basic color */ background-color: red; /* Chrome, Safari4+ */ background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(24,60,122,1)), color-stop(100%,rgba(132,182,244,0.5))); background-image: -webkit-radial-gradient(center, ellipse cover, rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%); background-image: -moz-radial-gradient(Same as webkit) background-image: o-radial-gradient(Same as webkit) background-image: radial-gradient(center, ellipse cover, rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%);}
  • 34. body { background: url(../images/pattern2.png) repeat-x top left, url(../images/pattern.png), linear-gradient(top, rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 100%); background-color: #1EBDBE;} By setting background-color last you can simply only change the color
  • 35. div.wordwrap1 { word-wrap: normal;}div.wordwrap2 { word-wrap: break-word;}div.textoverflow1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}div.textoverflow2 { white-space: nowrap; overflow: hidden; text-overflow: clip;} :hover {overflow:visible} makes the text visible again
  • 36. a.transition1 { background: #FFF; color: #000; -webkit-transition: background .5s ease-in-out,color .5s ease-in-out; -moz-transition: background .5s ease-in-out,color .5s ease-in-out; -ms-transition: background .5s ease-in-out,color .5s ease-in-out; -o-transition: background .5s ease-in-out,color .5s ease-in-out; transition: background .5s ease-in-out,color .5s ease-in-out;}a.transition1:hover { background: #000; color: #FFF;}transition: all .5s ease-in-out;
  • 37. img.transform1 { border: 5px solid white; box-shadow: 5px 5px 5px rgba(0,0,0,.2); transform: rotate(5deg);}img.transform2 { border: 5px solid white; box-shadow: 5px 5px 5px rgba(0,0,0,.2); transform: skew(10deg) scale(1.1,1.1) rotate(-5deg) translate(10px, 20px);}-webkit-transform:-moz-transform:-ms-transform:-o-transform:
  • 38. @keyframes animate { @-webkit-keyframes animate {...} 0% { @-moz-keyframes animate {...} width: 300px; @-ms-keyframes animate {...} height: 100px; @-o-keyframes animate {...} } 25% { width: 600px; background: black; color: #FFF; height: 200px; } 100% { width: 300px; height: 100px; }}
  • 39. div.animate1 { width: 300px; height: 100px; background: #FFF; padding: .5em;}div.animate1:hover { -webkit-animation: animate 3s infinite; -moz-animation: animate 3s infinite; -ms-animation: animate 3s infinite; -o-animation: animate 3s infinite; animation: animate 3s infinite;}
  • 40. table { border-collapse: collapse; width: 400px;}table th { background: #555; color: #FFF; padding: 5px; border: 1px solid #AAA; text-align: left; font-weight: bold;}table td { border: 1px solid #CCC; padding: 5px;}
  • 41. table tr:nth-child(odd) { background: #DDD;}
  • 42. table tr:nth-child(odd) { background: #DDD;}table tr:nth-child(5) { background: #fcf79f;}
  • 43. table tr:nth-child(odd) { background: #DDD;}table tr:nth-child(5) { background: #fcf79f;}table tr:first-of-type { background: #9fecf9;}
  • 44. table tr:nth-child(odd) { background: #DDD;}table tr:nth-child(5) { background: #fcf79f;}table tr:first-of-type { background: #9fecf9;}table tr:last-child { background: #9fecf9;}
  • 45. Useful websitesBecause were not encyclopedias
  • 46. CSS3.info HTML5please.com CSS3please.comcolorzilla.com/gradient-editor w3.org/TR/selectors
  • 47. Questions?
  • 48. Use it today, but be Progressively enhance!careful where to use it CSS3 Dont let it take Put users first! over
  • 49. Time up Robin Poort (@rhcpoort)ThemePartner (@theme_partner)