The CSS3 of Tomorrow
•
8 gostaram•936 visualizações
A talk on the future of CSS I gave at the London Web meetup, 21st April 2011.
Recomendados
Mais conteúdo relacionado
Destaque
Semelhante a The CSS3 of Tomorrow
Semelhante a The CSS3 of Tomorrow (20)
Último
Último (20)
The CSS3 of Tomorrow
- 1. THECSS3 OF TOMORROW peter gasston broken-links.com @stopsatgreen
- 5. “35 Awesome CSS3 Examples!” “50+ Best CSS3 Examples!” “Push Your Web Design Into The Future With CSS3!” “Amazing CSS3 Techniques You Can’t live Without!” “350+ Amazing CSS3 Resources - All You'll Ever Need to Become a CSS3 Master!”
- 6. BORDER-RADIUS border-radius: 5px; border-radius: 5px 5px 0 0; border-radius: 5px 0 / 2px 0;
- 8. BOX & TEXT SHADOW box-shadow: 2px 2px 2px #000; text-shadow: 2px 2px 2px #000; text-shadow: inset 2px 2px #000;
- 9. BOX & TEXT SHADOW
- 10. BACKGROUNDS & BORDERS background-image: url('img1.png'), url('img2.png'), url('img3.png'); border-image: url('img1.png') 20 25 20 25 stretch;
- 13. SELECTORS :first-child | :last-child :first-of-type | :last-of-type :nth-child() | :nth-last-child() :nth-of-type() | :nth-last-of-type()
- 15. 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);
- 16. OPACITY, ALPHA & COLOUR
- 17. INTERMISSION <!--[if lt IE 9]> div { behavior: url(/path/to/PIE.htc); } <![endif]--> http://css3pie.com/
- 18. WEB FONTS @font-face { font-family: 'My Font'; src: url('/path/to/font.woff'); } h1 { font-family: 'My Font'; } http://fontsquirrel.com
- 19. WEB FONTS http://lostworldsfairs.com
- 20. 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)
- 21. MEDIA QUERIES http://mediaqueri.es
- 23. LINEAR GRADIENTS linear-gradient(#f00,#00f); linear-gradient(45deg,#f00,#0f0,#00f); repeating-linear-gradient(#f00,#00f 10%);
- 24. LINEAR GRADIENTS
- 25. RADIAL GRADIENTS radial-gradient(#f00,#00f); repeating-radial-gradient(#f00,#00f 10%);
- 26. 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));
- 27. 2 2 sqrt(x +y )
- 30. TRANSITIONS transition: all 1s linear; transition: border-width 2s 500ms ease-in-out;
- 32. 2D TRANSFORMATIONS transform: rotate(45deg); transform: skew(15deg,7.5deg); transform: scale(2) translate(1em,-25px);
- 34. 3D TRANSFORMATIONS transform: rotate3d(1,1,0,45deg); transform: translate3d(1em,-15px,10%); transform: scale3d(0.5,3,1.1);
- 38. ANIMATIONS @keyframes 'name' { from { border-width: 10px; } 50% { border-width: 1px; } to { border-width: 1px; height: 120px; } } div { animation: name 1s linear; }
- 41. 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]-->
- 42. 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.
- 43. INTERMISSION <html class="no-js"> <script src="modernizr.js"></script> <html class="svg no-cssgradients"> http://modernizr.com
- 44. INTERMISSION div { 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'); }
- 45. 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 {}
- 46. CALCULATIONS width: calc(20em + 10px); width: calc((85% / 4) – (1em + 2px)); border-width: calc(110px mod 4);
- 47. MULTIPLE COLUMNS column-count: 3; column-width: 25em; column-gap: 1.5em; column-rule: 3px double #f00; column-span: all;
- 49. FLEXIBLE BOX LAYOUT div { display: box; } .a,.b { box-flex: 1; } .a { box-flex: 3; } .b { box-flex: 2; }
- 50. 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; }
- 51. GRID POSITIONING div { display: grid; grid-columns: 1fr 1fr 2fr; grid-rows: 100px 5em 1fr; }
- 52. GRID POSITIONING .a { grid-column: 2; grid-row: 3; grid-column-span: 2; }
- 53. TEMPLATE LAYOUT a b a b c c .a { position: a; } div { .b { position: b; } display: 'abc'; .c { position: c; } }
- 54. TEMPLATE LAYOUT a c a b c b div { div { display: display: 'aa' 'bc'; 'acc' 'a.b';} }
- 55. REGIONS a .x { flow-thread: a; } .y { flow-thread: b; } b .a,.c { region-thread: a; c } .b { region-thread: b; }
- 56. 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; }
- 57. 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;
- 58. VARIABLES & MIXINS @var $myColor #f00; h1 { color: $myColor; } @mixin myStuff { color: #f00; font-size: 1.5em; } h1 { font-weight: bold; @mix myStuff; }
- 59. VARIABLES & MIXINS @mixin myStuff($myColor #f00) { color: $myColor; font-size: 1.5em; } h1 { font-weight: bold; @mix myStuff(#00f); }
- 61. FEATURE QUERIES @supports (display: grid) {} @supports (display: box) and (background: linear-gradient) {} @supports not (transform: rotate3d) {}
- 62. CSS4
- 63. THANK YOU & GOOD NIGHT Superman 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 – it's really good!