The CSS3 of Tomorrow

Published on January 2017 | Categories: Documents | Downloads: 51 | Comments: 0 | Views: 345
of 64
Download PDF   Embed   Report

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

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close