The CSS3 of Tomorrow
•
8 likes•937 views
This document provides an overview of CSS3 features such as border-radius, box-shadow, gradients, animations, flexbox, grid layout, and more. It includes code examples and links to external resources for each topic. The document promotes the author's book on CSS3 and encourages readers to purchase a copy to learn more about these new capabilities in Cascading Style Sheets.
More Related Content
Viewers also liked
Similar to The CSS3 of Tomorrow
Similar to The CSS3 of Tomorrow (20)
Recently uploaded
Recently uploaded (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!