Your SlideShare is downloading. ×
0
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Learn to love CSS3 | Joomla! Day Deutschland

258

Published 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!

Video of JandBeyond 2012:
http://www.youtube.com/watch?feature=player_embedded&v=EAKxs2ixsBY

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
258
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
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
  • CSS3 selectors
  • Nooit te veel zelf onthouden, check altijd je sites
  • Transcript

    • 1. Learn to love CSS3 Robin Poort (@rhcpoort) CEO & co-founder ThemePartner (@theme_partner) Joomla! day Deutschland, Berlin, oktober 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)

    ×