The CSS3 of Tomorrow
Comments
Content
CSS3 OF TOMORROW
THE
peter gasston broken-links.com @stopsatgreen
“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!”
BORDER-RADIUS
border-radius: 5px; border-radius: 5px 5px 0 0; border-radius: 5px 0 / 2px 0;
BORDER-RADIUS
BOX & TEXT SHADOW
box-shadow: 2px 2px 2px #000; text-shadow: 2px 2px 2px #000; text-shadow: inset 2px 2px #000;
BOX & TEXT SHADOW
BACKGROUNDS & BORDERS
background-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
INTERMISSION
<!--[if lt IE 9]> div { behavior: url(/path/to/PIE.htc); } <![endif]-->
http://css3pie.com/
WEB FONTS
@font-face { font-family: 'My Font'; src: url('/path/to/font.woff'); } h1 { font-family: 'My Font'; }
http://fontsquirrel.com
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(#f00,#00f); linear-gradient(45deg,#f00,#0f0,#00f); repeating-linear-gradient(#f00,#00f 10%);
LINEAR GRADIENTS
RADIAL GRADIENTS
radial-gradient(#f00,#00f); repeating-radial-gradient(#f00,#00f 10%);
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));
sqrt(x +y )
2
2
worst. syntax. ever.
GRADIENTS
http://leaverou.me/css3patterns/
TRANSITIONS
transition: all 1s linear; transition: border-width 2s 500ms ease-in-out;
TRANSITIONS
http://broken-links.com/tests/upintheair
2D TRANSFORMATIONS
transform: rotate(45deg); transform: skew(15deg,7.5deg); transform: scale(2) translate(1em,-25px);
2D TRANSFORMATIONS
http://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 TRANSFORMATIONS
http://broken-links.com/tests/nakamats
3D TRANSFORMATIONS
http://paulrhayes.com/experiments/sphere/
COMBINING EFFECTS
http://thefeed.orange.co.uk
ANIMATIONS
@keyframes 'name' { from { border-width: 10px; } 50% { border-width: 1px; } to { border-width: 1px; height: 120px; } } div { animation: name 1s linear; }
ANIMATIONS
http://animatable.com/demos/madmanimation/
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]-->
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.
INTERMISSION
<html class="no-js"> <script src="modernizr.js"></script> <html class="svg no-cssgradients">
http://modernizr.com
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'); }
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); width: calc((85% / 4) – (1em + 2px)); border-width: calc(110px mod 4);
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 { box-flex: 1; } .a { box-flex: 3; } .b { box-flex: 2; }
FLEXIBLE BOX LAYOUT
c a a b
.a { box-flex: 0; box-align: center; box-pack: center; }
div { box-orient: vertical; } .a,.b { boxordinal-group: 2; } .c { box-ordinalgroup: 1; }
GRID POSITIONING
div { display: grid; grid-columns: 1fr 1fr 2fr; grid-rows: 100px 5em 1fr; }
GRID POSITIONING
.a { grid-column: 2; grid-row: 3; grid-column-span: 2; }
TEMPLATE LAYOUT
a b c
a
b
c
.a { position: a; } .b { position: b; } .c { position: c; }
div { display: 'abc'; }
TEMPLATE LAYOUT
a a b c b c
div { display: 'aa' 'bc'; }
div { display: 'acc' 'a.b';}
REGIONS
a b c
.x { flow-thread: a; } .y { flow-thread: b; } .a,.c { region-thread: a; } .b { region-thread: b; }
REGIONS
1 4 2 3
.a,.b,.c,.d { display: region; } .a { region-index: .b { region-index: .c { region-index: .d { region-index:
1; 2; 3; 4;
} } } }
IMAGES
background: url(' img.png#xywh=0,20,25,30 '); background: -moz-imagerect(url('img.png'),20, 20,0,0); background-image: url('img.svg'),url('img.png') or #f00;
VARIABLES & MIXINS
@var $myColor #f00; h1 { color: $myColor; } @mixin myStuff { color: #f00; font-size: 1.5em; } h1 { font-weight: bold; @mix myStuff; }
VARIABLES & MIXINS
@mixin myStuff($myColor #f00) { color: $myColor; font-size: 1.5em; } h1 { font-weight: bold; @mix myStuff(#00f); }
FEATURE QUERIES
@supports (display: grid) {} @supports (display: box) and (background: linear-gradient) {} @supports not (transform: rotate3d) {}
CSS4
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!
BUY MY BOOK http://nostarch.com/css3.htm
Sponsor Documents