Getting Started with CSS3

getting started with CSS 3 Minnebar Spring ‘10!

…CSS3 is amazingly superly cool, & now I plan to be a web designer when i grow up. @katieatkinson!

At the risk of sounding infatuated, I'm just going to say that I love CSS3! @utkJamie! Falling in just a little love with CSS3 @zakmorris! CSS3, I love you!!! @helenucha! I've said it before and I'll say it again... I love CSS3. @gizmo4223!

Ich wollte gerade noch ein paar CSS3- Neuerungen retweeten. Ist nämlich genial, was sich da abspielt. Aber das interessiert euch wohl nicht. @dominikpeters !

history

1 1996 CSS

2 1997 CSS

2.1! CSS

3 CSS modules!

color /! opacity Adjust see-through-ness. div { color: #00c; opacity: 1.0; }! div { color: #00c; opacity: 0.5; }!

color /! rgba Specify colors in RGB format + alpha. div { color: rgb(255, 0, 0); }! div { color: rgba(255, 0, 0, 0.5); }!

color /! hsla Specify colors in HSL format + alpha. div { color: hsl(240, 50%, 50%); }! div { color: hsla(240, 50%, 50%, 0.5); }!

bg & borders

backgrounds & borders /! background-image As many as you want. background: url(bg-top.png) top left no-repeat, ! !url(bg-bottom.png) bottom left no-repeat, ! ! !url(bg-middle.png) left repeat-y;!

backgrounds & borders /! background-image The OLD way: <div class=“callout”>! !<div class=“inside-a”>! ! !<div class=“inside-b”>! ! ! !...! ! !</div>! !</div>! </div>!

backgrounds & borders /! background-image The NEW way: <div class=“callout”>! !...! </div>!

backgrounds & borders /! background-image The NEW way: .callout { ! background: ! url(gradient.png) 0 0 repeat-x, ! url(angle1.png) 100% 0 no-repeat,! url(angle2.png) 0 100% no-repeat;! }!

backgrounds & borders /! background-size Specify the size of background to display. div { background-size: 100px 100px; }! div { background-size: 300px 100px; }!

backgrounds & borders /! border-color Multiple border colors, 1 pixel at a time. border-color: #333 transparent transparent #333;!

backgrounds & borders /! border-image Borders can be represented by an image. border-image: url(border.png) 10 10 10 10 ! ! !round round;!

backgrounds & borders /! border-radius Curve all corners, or be speciﬁc. border-radius: 5px;! border-top-right-radius: 5px;! watch out!

backgrounds & borders /! box-shadow Drop shadows made easy. Too easy. Be afraid. box-shadow: 5px 5px 5px #333;! horizontal offset,! vertical offset,! blur radius,! color!

multi-column

multi-column/! column-width & -gap Break text into columns. column-width: 200px; ! column-gap: 20px;! (you can also use column-count instead of column-width) ! Lorem ipsum dolor sit amet, consectetur turpis non bibendum. Curabitur fermentum adipiscing elit. Proin varius ligula ac enim posuere faucibus. Mauris blandit ante sit amet congue et sagittis justo scelerisque. Quisque sema tempor vestibulum. Suspendisse porttitor semper magna et vehicula. In hac pellentesque elementum nulla a venenatis. habitasse platea dictumst. Donec odio turpis, Nullam venenatis luctus ultricies. Vestibulum tempor non elementum sed, pulvinar at elit. ante ipsum primis in faucibus orci luctus et Nunc felis urna, ornare in posuere eleifend, ultrices posuere cubilia Curae; Ut non sem ornare non augue. Phasellus ac euismod dolor. augue, non vehicula nibh. In ornare venenatis Etiam urna felis, convallis in volutpat ut, felis, at malesuada ipsum eleifend eu. bibendum id lectus. Quisque egestas egestas

transformation

transformation /! rotate Rotate an object, in degrees. transform: rotate(45deg);!

http://www.zurb.com/playground/css3-polaroids!

transformation /! scale Scale an object, by ratio. transform: scale(2.0, 0.5);!

transformation /! skew Skew around X and Y axes, in degrees. transform: skew(-30deg);!

transformation /! translate Move along X and Y axes, in anything (px, ems, etc). transform: translate(50px, 0);!

selectors super sexy stuff!

selectors /! e: only-of-type An element that is the only sibling of its type. img:only-of-type { border: 5px solid red; }! <div> <div> <div> <img> <img> <img> <img> <img>

selectors /! e: not(s) An element that does not match simple selectors. img:not(:only-of-type) { border: 5px solid red; }! <div> <div> <div> <img> <img> <img> <img> <img>

selectors /! e~f An F element preceded by an E element. div ~ p { color: red; }! section ~ p { color: red; }!

selectors /! e: nth-child(n) An element that is the nth child of its parent. tr:nth-child(odd) td { background: #fff; }! Top Taserings Phillies Fan Gets Tasered 2010 Don't Tase Him, Bro 2007 Baptism Gone Wrong 2009 'Snotty' Man Gets Tasered 2006 Mother Tasered in Front of Her Kids 2009 Celebs Sign Up to Be Tasered 2007 Taser Smackdown 2009

selectors /! e: nth-child(n) An element that is the nth child of its parent. tr:nth-child(-n+3) td { background: #fff; }! Top Taserings Phillies Fan Gets Tasered 2010 Don't Tase Him, Bro 2007 Baptism Gone Wrong 2009 'Snotty' Man Gets Tasered 2006 Mother Tasered in Front of Her Kids 2009 Celebs Sign Up to Be Tasered 2007 Taser Smackdown 2009

selectors /! e: nth-last-child(n) An element which is the nth child of its parent, counting from the last one. tr:nth-last-child(-n+2) td { opacity: 0.5; }! Phillies Fan Gets Tasered 2010 Don't Tase Him, Bro 2007 Baptism Gone Wrong 2009 'Snotty' Man Gets Tasered 2006 Mother Tasered in Front of Her Kids 2009 Celebs Sign Up to Be Tasered 2007 Taser Smackdown 2009

selectors /! e: nth-of-type(n) An element that is the nth sibling of its type. p:first-of-type { font-size: 1.2em; }!

template layout (formerly advanced layout)!

template layout /! display & position Fully separates visual layout order from content. Content is placed in “slots” in a grid. body { display: "aaa"! "bcd"; }! #head { position: a; } ! #nav { position: b; } ! #adv { position: c; } ! #body { position: d; } !

a a a b c d

a #header b c d #nav #adv #body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin varius ligula ac enim congue et sagittis justo scelerisque. Quisque porttitor semper magna et vehicula. In hac habitasse platea dictumst. Donec odio turpis, tempor non elementum sed, pulvinar at elit. Nunc felis urna, ornare in posuere eleifend, ornare non augue phasellus ac euismod dolor. Etiam urna felis, convallis in volutpat ut, bibendum id lectus. Quisque egestas egestas turpis non bibendum. Curabitur fermentum posuere faucibus. Mauris blandit ante sit amet sema tempor vestibulum. Suspendisse pellentesque elementum nulla a venenatis. Nullam venenatis luctus ultricies Option 1 Option 2 Option 3 Option 4 Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur > amet consectetur > amet consectetur > amet consectetur >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin varius ligula ac enim congue et sagittis justo @ scelerisque. Quisque porttitor semper magna et vehicula. In hac habitasse platea dictumst. Donec odio . turpis, tempor non elementum sed, pulvinar at elit. Nunc felis urna, ornare in posuere eleifend, ornare non augue phasellus ac euismod dolor. Etiam urna felis, convallis in volutpat ut, bibendum id lectus. Quisque egestas egestas turpis non bibendum. Curabitur fermentum posuere faucibus. Mauris blandit ante sit amet sema tempor vestibulum. Suspendisse a @ pellentesque elementum nulla a venenatis. Nullam b venenatis luctus ultricies Option 1 Option 2 Option 3 Option 4 Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur > amet consectetur > amet consectetur > amet consectetur > c d e f

@ . a @ b c d e f

@ @ . . a @ @ b c d e f

body ! { display: ”@@.." ! ! ! ! ! ! ”a@@b”! ! ! ! ! ! !“cdef” } !

media queries

media queries /! @media “by using Media Queries, presentations can be tailored to a speciﬁc range of output devices without changing the content itself.” – W3C @media screen and (min-width: 400px) and (max-width: 700px) { ... } !

combine 2 media queries + template layout!

@media all { ! body! { display: "aaa" ! ! ! ! ! ! "bcd" } ! #head { position: a } ! #nav! { position: b } ! #adv! { position: c } ! #body { position: d } ! }! @media all and (max-width: 500px) { ! body! { display: "a" ! ! ! ! ! ! "b" ! ! ! ! ! ! "c" } ! #head { position: a } ! #nav! { position: b } ! #adv! { display: none } ! #body { position: c } ! }!

a #header b c d #nav #adv #body

a #header b #nav c #body

what now?

graceful degradation vs. progressive enhancement vs. progressful degrahancement* vs. ! get a different job * term originally coined by Jackson Wilkinson: http://jounce.net/!

IE 6 IE 7 IE 8 Little CSS3! Opera 10 Safari 3 Firefox 3.5 IE 9 Chrome 4 Safari 4 Opera 10.5 Firefox 3.7 Lots o’ CSS3!

IE9 Opera 10.5 Safari 4 Firefox 3.7 Chrome 4 opacity border-radius box-shadow ? :nth-child()

I love CSS3! When I grow up I want to be a web designer. @mikebollinger!

</presentation> mike@livefront.com! @mikebollinger!

http://blog.antoineneveux.fr	331
http://iroylabs.blogspot.com	264
http://macbook.home	197
http://www.slideshare.net	54
http://iwaysdeveloper.wordpress.com	42
http://pinterest.com	9
http://iroylabs.blogspot.in	4
http://localhost	3
http://macbook.local	2
http://iroylabs.blogspot.jp	2
http://ranksit.com	1
https://twimg0-a.akamaihd.net	1
http://iroylabs.blogspot.be	1
http://iroylabs.blogspot.com.au	1
http://iroylabs.blogspot.com.br	1
http://192.168.1.2	1
http://iroylabs.blogspot.co.uk	1

Getting Started with CSS3

by Livefront on May 23, 2010

Accessibility

Categories

Upload Details

Usage Rights

17 Embeds 915

Statistics

Getting Started with CSS3 Presentation Transcript