Your SlideShare is downloading. ×
The CSS3 of Tomorrow
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

The CSS3 of Tomorrow

2,331
views

Published on

A talk on the future of CSS I gave at the London Web meetup, 21st April 2011.

A talk on the future of CSS I gave at the London Web meetup, 21st April 2011.

Published in: Technology, Art & Photos

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,331
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
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

Transcript

  • 1. THECSS3 OFTOMORROW peter gasston broken-links.com @stopsatgreen
  • 2. “35 Awesome CSS3 Examples!”“50+ Best CSS3 Examples!”“Push Your Web Design IntoThe Future With CSS3!”“Amazing CSS3 TechniquesYou Can’t live Without!”“350+ Amazing CSS3 Resources- All Youll Ever Need toBecome a CSS3 Master!”
  • 3. BORDER-RADIUS border-radius: 5px; border-radius: 5px 5px 0 0; border-radius: 5px 0 / 2px 0;
  • 4. BORDER-RADIUS
  • 5. BOX & TEXT SHADOW box-shadow: 2px 2px 2px #000; text-shadow: 2px 2px 2px #000; text-shadow: inset 2px 2px #000;
  • 6. BOX & TEXT SHADOW
  • 7. BACKGROUNDS & BORDERSbackground-image: url(img1.png),url(img2.png), url(img3.png); border-image: url(img1.png) 20 25 20 25 stretch;
  • 8. BACKGROUNDS & BORDERS
  • 9. BACKGROUNDS & BORDERS
  • 10. SELECTORS :first-child | :last-child :first-of-type | :last-of-type :nth-child() | :nth-last-child():nth-of-type() | :nth-last-of-type()
  • 11. SELECTORS:nth-of-type(even):not(:last-of-type)
  • 12. OPACITY, ALPHA & COLOUR opacity: 0.5; color: rgba(255,0,0,0.5); color: hsl(0,100%,50%); color: hsla(0,100%,50%,0.5);
  • 13. OPACITY, ALPHA & COLOUR
  • 14. INTERMISSION<!--[if lt IE 9]>div { behavior: url(/path/to/PIE.htc); }<![endif]--> http://css3pie.com/
  • 15. WEB FONTS @font-face { font-family: My Font; src: url(/path/to/font.woff); } h1 { font-family: My Font; } http://fontsquirrel.com
  • 16. WEB FONTS http://lostworldsfairs.com
  • 17. MEDIA QUERIES@media all and (min-device-width:480px)@media all and (-webkit-pixel-ratio:2) @media screen not (monochrome) @media screen and (max-device-width: 640px) and (-moz-touch-enabled: 1)
  • 18. MEDIA QUERIES http://mediaqueri.es
  • 19. LINEAR GRADIENTS linear-gradient(#f00,#00f); linear-gradient(45deg,#f00,#0f0,#00f);repeating-linear-gradient(#f00,#00f 10%);
  • 20. LINEAR GRADIENTS
  • 21. RADIAL GRADIENTS radial-gradient(#f00,#00f);repeating-radial-gradient(#f00,#00f 10%);
  • 22. RADIAL GRADIENTS -moz-radial-gradient(100% 0,circle farthest-corner,#f00,#00f); -webkit-gradient(radial,100% 0,0,100% 0,[number],from(#f00),to(#00f));
  • 23. 2 2sqrt(x +y )
  • 24. worst.syntax.ever.
  • 25. GRADIENTShttp://leaverou.me/css3patterns/
  • 26. TRANSITIONS transition: all 1s linear; transition: border-width 2s 500ms ease-in-out;
  • 27. TRANSITIONShttp://broken-links.com/tests/upintheair
  • 28. 2D TRANSFORMATIONS transform: rotate(45deg); transform: skew(15deg,7.5deg);transform: scale(2) translate(1em,-25px);
  • 29. 2D TRANSFORMATIONShttp://media.24ways.org/2009/14/5/index.html
  • 30. 3D TRANSFORMATIONS transform: rotate3d(1,1,0,45deg);transform: translate3d(1em,-15px,10%); transform: scale3d(0.5,3,1.1);
  • 31. 3D TRANSFORMATIONShttp://broken-links.com/tests/nakamats
  • 32. 3D TRANSFORMATIONShttp://paulrhayes.com/experiments/sphere/
  • 33. COMBINING EFFECTS http://thefeed.orange.co.uk
  • 34. ANIMATIONS @keyframes name { from { border-width: 10px; } 50% { border-width: 1px; } to { border-width: 1px; height: 120px; } } div { animation: name 1s linear; }
  • 35. ANIMATIONShttp://animatable.com/demos/madmanimation/
  • 36. INTERMISSION <link href="basic.css" media="screen" rel="stylesheet"> <link href="desktop.css" media="screen and (min-width: 481px)" rel="stylesheet"> <!--[if lt IE 9]> <link href="desktop.css" media="screen" rel="stylesheet"> <![endif]-->
  • 37. INTERMISSION <!--[if lt IE 9]> <link href="ie8.css" media="screen" rel="stylesheet"> <![endif]--> <!--[if lt IE 8]> <link href="ie7.css" media="screen" rel="stylesheet"> <![endif]--> etc.
  • 38. INTERMISSION <html class="no-js"><script src="modernizr.js"></script><html class="svg no-cssgradients"> http://modernizr.com
  • 39. INTERMISSIONdiv {background: url(img.png);background: linear-gradient(#f00,#00f);transition: all 1s ease-in;}.multiplebgs div {background: url(img1.png),url(img2.png), url(img3.png);}
  • 40. GROUPING SELECTOR header h1, article h1, aside h1 {}; :any(header,article,aside) h1 {} ol ul li a, ul ul li a, ul ul ul li a, ol ul ul li a {}; :any(ol,ul,ul ul,ol ul) ul li a {}
  • 41. CALCULATIONS width: calc(20em + 10px); width: calc((85% / 4) – (1em + 2px)); border-width: calc(110px mod 4);
  • 42. MULTIPLE COLUMNS column-count: 3; column-width: 25em; column-gap: 1.5em; column-rule: 3px double #f00; column-span: all;
  • 43. FLEXIBLE BOX LAYOUT div { display: box; } .a,.b { box-flex: 1; } .a { box-flex: 3; } .b { box-flex: 2; }
  • 44. FLEXIBLE BOX LAYOUT c a a b.a { div { box-orient:box-flex: 0; vertical; }box-align: center; .a,.b { box-box-pack: center; ordinal-group: 2; }} .c { box-ordinal- group: 1; }
  • 45. GRID POSITIONING div { display: grid; grid-columns: 1fr 1fr 2fr; grid-rows: 100px 5em 1fr; }
  • 46. GRID POSITIONING .a { grid-column: 2; grid-row: 3; grid-column-span: 2; }
  • 47. TEMPLATE LAYOUT a b a b c c.a { position: a; } div {.b { position: b; } display: abc;.c { position: c; } }
  • 48. TEMPLATE LAYOUT a c a b c bdiv { div { display:display: aa bc; acc a.b;}}
  • 49. REGIONS a .x { flow-thread: a; } .y { flow-thread: b; } b .a,.c { region-thread: a; c } .b { region-thread: b; }
  • 50. REGIONS 1 .a,.b,.c,.d { display: region; 4 } 2 .a { region-index: 1; } 3 .b { region-index: 2; } .c { region-index: 3; } .d { region-index: 4; }
  • 51. IMAGES background: url( img.png#xywh=0,20,25,30 ); background: -moz-image- rect(url(img.png),20, 20,0,0);background-image:url(img.svg),url(img.png) or #f00;
  • 52. VARIABLES & MIXINS @var $myColor #f00; h1 { color: $myColor; } @mixin myStuff { color: #f00; font-size: 1.5em; } h1 { font-weight: bold; @mix myStuff; }
  • 53. VARIABLES & MIXINS @mixin myStuff($myColor #f00) { color: $myColor; font-size: 1.5em; } h1 { font-weight: bold; @mix myStuff(#00f); }
  • 54. FEATURE QUERIES @supports (display: grid) {} @supports (display: box) and (background: linear-gradient) {}@supports not (transform: rotate3d) {}
  • 55. CSS4
  • 56. THANK YOU & GOOD NIGHTSuperman copyright is a contentious issue, but the images I use here belong to DC Comics and no permission was given. I hope they fall under fair use doctrines. You should buy a copy of All Star Superman – its really good!
  • 57. BUY MY BOOKhttp://nostarch.com/css3.htm