Learn to love CSS3 | Joomla! Day Deutschland

  • Published on
    22-Apr-2015

  • View
    352

  • Download
    1

DESCRIPTION

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

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. Hkon 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.

    Lorem ipsum

    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.

    Lorem ipsum

    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.

    Lorem ipsum

    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.
    Lorem ipsum
    div.shadow1 { background: #FFF; text-align: center; -webkit-box-shadow: ...; -moz-box-shadow: ...; box-shadow: 5px 5px 0 rgba(0,0,0,.3);}
  • 26.
    Lorem ipsum
    div.shadow2 { background: #FFF; text-align: center; -webkit-box-shadow: ...; -moz-box-shadow: ...; box-shadow: 0 0 1px black, 0 0 15px white;}
  • 27.
    Lorem ipsum
    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.
    Lorem ipsum
    div.radius1 { background: #FFF; text-align: center; -webkit-border-radius: ...; -moz-border-radius: ...; border-radius: 20px;}
  • 29.
    Lorem ipsum
    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.
    Lorem ipsum
    div.radius3 { background: #FFF; text-align: center; -webkit-border-radius: ...; -moz-border-radius: ...; border-radius: 20px 60px;}
  • 31. 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.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.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;}
  • ...

Recommended

View more >