The CSS3 of Tomorrow (Version 2)
Upcoming SlideShare
Loading in...5
×
 

The CSS3 of Tomorrow (Version 2)

on

  • 8,468 views

Revised and updated talk about the (possible) future of CSS3, as presented at London Web Standards on 27/06/11.

Revised and updated talk about the (possible) future of CSS3, as presented at London Web Standards on 27/06/11.

Statistics

Views

Total Views
8,468
Views on SlideShare
8,195
Embed Views
273

Actions

Likes
15
Downloads
160
Comments
2

16 Embeds 273

http://viiworksblog.com 139
http://chibilicious.com 90
http://paper.li 17
url_unknown 5
http://lanyrd.com 4
http://localhost 3
http://event.iknowski.com 2
http://interessocial.wordpress.com 2
http://documentarytelevision.com 2
http://localhost:8888 2
http://twitter.com 2
http://joe-ruff.com 1
http://csschops.com 1
http://us-w1.rockmelt.com 1
http://www.slideshare.net 1
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Méchant /// adieu flash et compagnie
    Are you sure you want to
    Your message goes here
    Processing…
  • The video of this talk is available on Vimeo: http://www.vimeo.com/25719654
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The CSS3 of Tomorrow (Version 2) The CSS3 of Tomorrow (Version 2) Presentation Transcript

  • THECSS3 OFTOMORROW peter gasston @stopsatgreen broken-links.com
  • “35 Awesome CSS3 Examples!” “50+ Best CSS3 Examples!” “350+ Amazing CSS3 Resources - All Youll EverNeed to Become a CSS3 Master!”
  • BORDER-RADIUS border-radius: 5px; border-radius: 5px 5px 0 0; border-radius: 5px 0 / 2px 0;
  • BOX SHADOWbox-shadow: 2px 2px 2px #000;box-shadow: inset 2px 2px 2px #000;
  • TEXT SHADOWtext-shadow: 2px 2px 2px #000;text-shadow: 0 -1px #000, 0 1px #fff;
  • BACKGROUNDS & BORDERSbackground-image: url(img1.png),url(img2.png), url(img3.png); border-image: url(img1.png) 20 25 20 25 stretch;
  • BACKGROUNDS & BORDERS
  • BACKGROUNDS & BORDERS
  • SELECTORS :first-child | :last-child :first-of-type | :last-of-type :nth-child() | :nth-last-child():nth-of-type() | :nth-last-of-type()
  • SELECTORS:nth-of-type(even):not(:last-of-type)
  • 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);
  • OPACITY, ALPHA & COLOUR
  • WEB FONTS @font-face { font-family: My Font; src: url(/path/to/font.woff); } h1 { font-family: My Font; }
  • WEB FONTS http://lostworldsfairs.com
  • 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)
  • MEDIA QUERIES http://mediaqueri.es
  • LINEAR GRADIENTS linear-gradient(red,blue);linear-gradient(45deg,red,yellow,blue);repeating-linear-gradient(red,blue 10%);
  • RADIAL GRADIENTS radial-gradient(red,blue); radial-gradient(0 100%,farthest-side, red,yellow,blue);repeating-radial-gradient(red,blue 10%);
  • RADIAL GRADIENTS -moz-radial-gradient(100% 0, circle,red,blue); -webkit-gradient(radial,100% 0,0,100% 0,number,from(red),to(blue));
  • 2 2sqrt(x +y )
  • GRADIENTShttp://leaverou.me/css3patterns/
  • 2D TRANSFORMATIONS transform: rotate(45deg); transform: skew(15deg,7.5deg);transform: scale(2) translate(1em,-25px);
  • 2D TRANSFORMATIONShttp://media.24ways.org/2009/14/5/index.html
  • 3D TRANSFORMATIONS transform: rotate3d(1,1,0,45deg);transform: translate3d(1em,-15px,10%); transform: scale3d(0.5,3,1.1);
  • 3D TRANSFORMATIONShttp://broken-links.com/tests/nakamats
  • TRANSITIONS transition: all 1s linear;transition: width 2s 500ms ease-in-out;
  • ANIMATIONS @keyframes name { from { border-width: 10px; } 50% { border-width: 1px; } to { border-width: 1px; height: 120px; } } div { animation: name 1s linear; }
  • MULTIPLE COLUMNS column-count: 3; column-width: 25em; column-gap: 1.5em; column-rule: 3px double #f00; column-span: all;
  • FLEXIBLE BOX LAYOUT div { display: box; A B width: 80em; } .a,.b { width: 25em; } A B .a,.b { box-flex: 1; } A B .a { box-flex: 3; } .b { box-flex: 2; }http://netmag.co.uk/tutorials/css3-flexible-box-model-explained
  • FLEXIBLE BOX LAYOUT c a a b.a { div { box-orient: vertical; }box-flex: 0; .a,.b {box-align: center; box-ordinal-group: 2; }box-pack: center; .c {} box-ordinal-group: 1; }
  • GRID POSITIONINGdiv { div {display: grid; display: grid;grid-columns: 1fr 1fr 2fr; grid-columns: 1fr 1fr 2fr;} grid-rows: 80px auto 10em; } http://j.mp/kul0H1
  • GRID POSITIONING .a { grid-column: 2; grid-row: 2; grid-column-span: 2; }
  • TEMPLATE LAYOUT a b a b c c.a { position: a; } div {.b { position: b; } display: abc;.c { position: c; } } http://www.w3.org/TR/css3-layout/ http://code.google.com/p/css-template-layout/
  • TEMPLATE LAYOUT a c a b c bdiv { div {display: aa bc; display: acc a.b;} }
  • GRID POSITIONING a a b b c c.a { grid-cell: a; } div {.b { grid-cell: b; } grid-template: aa bc;.c { grid-cell: c; } }
  • EXTENDED FLOATS div { float: positioned; position: absolute; left: 33.3%; top: 100px; width: 33.3%; } http://www.interoperabilitybridges.com/css3-floats/
  • REGIONS a .a { flow: foo; } .b { content: from(foo); } b b .b, .c, .d, .e { e content: from(foo); c } d http://labs.adobe.com/technologies/cssregions/ http://dev.w3.org/csswg/css3-regions/
  • EXCLUSIONS.b {wrap-shape: polygon(150px,0 0,300px 300px,300px);wrap-shape-mode: around;} http://dev.w3.org/csswg/css3-exclusions/
  • EXCLUSIONS.a { wrap-shape-mode: content; }.b {wrap-shape: polygon(150px,0 0,300px 300px,300px);wrap-shape-mode: around;}
  • 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 {}
  • CALCULATIONS width: calc(20em + 10px);height: calc((85% / 4) – (1em + 2px)); border-width: calc(110px mod 4);
  • 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;
  • CONDITIONAL RULES @supports (display: grid) {} @supports (display: box) and (background: linear-gradient) {} @supports (display: box) or (background: linear-gradient) {} @supports not (transform: rotate3d) {} http://dev.w3.org/csswg/css3-conditional/
  • CONDITIONAL RULES @document url(http://w3.org/index.html) {} @document url-prefix(http://w3.org/blog/) {} @document domain(w3.org) {}@document regexp(http://w3.org/[^/]*-d{8}/) {}
  • VARIABLES & MIXINS @var $myColor #f00; h1 { color: $myColor; } @mixin myStuff { color: #f00; font-size: 1.5em; } h1 { font-weight: bold; @mix myStuff; } http://www.xanthir.com/blog/b4Av0
  • VARIABLES & MIXINS @mixin myStuff($myColor #f00) { color: $myColor; font-size: 1.5em; } h1 { font-weight: bold; @mix myStuff(#00f); }
  • CSS4
  • THX. PLEASE BUY MY BOOKhttp://nostarch.com/css3.htm
  • LEGAL NOTE Superman copyright is a contentious issue, but the images Iuse 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!