creating lifelike designs with css3
TRANSCRIPT
Thursday, October 21, 2010
Introduction✴ My name is Meagan Fisher.
✴ I’m a user interface designer.
✴ I’m also a front-end developer.
✴ I’ve worked with clients big (MTV, Twitter) and small.
✴ I’ve partnered with lots of awesome designers, like SimpleBits and Happy Cog.
✴ I’m hugely obsessed with owls.
Thursday, October 21, 2010
My plan for the morning✴ Part One: Create a
mockup in markup. Discuss texture, tone, type, shape, and light in CSS3.
✴ 9:30 - 10:45, last 15 for questions
✴ Break time!
✴ Part Two: Build a secondary page. Add details with selectors, bring it to life with CSS3 experience level attributes.
✴ 11:30 - 12:45, last 15 for questions
✴ Lunch time!
Thursday, October 21, 2010
the time to use CSS3 is
RIGHT NOW
Thursday, October 21, 2010
why use CSS3? ✴ Make your mockups in
markup.
✴ Create sites that are more flexible.
✴ Avoid the use of non-semantic markup.
✴ Use selectors to avoid excess markup.
✴ Fewer images = faster load times.
✴ Users on “the good” browsers will enjoy a richer experience.
✴ The IE-ers of the future (who will one day use IE9) will thank you.
Thursday, October 21, 2010
Lifelike designs aretangible, natural,
& organic.
Thursday, October 21, 2010
There is no better designer than nature.
— ALEXANDER MCQUEEN
Thursday, October 21, 2010
Some of McQueen’s nature inspired work.
Thursday, October 21, 2010
how can weUSE NATUREto inspire our
WEB DESIGNS?
Thursday, October 21, 2010
The five elements to consider when creating a lifelike design are texture, tone, type, shape, & light.
Thursday, October 21, 2010
In part one, we’re going to create an awesome mockup using CSS3 and markup.
Thursday, October 21, 2010
GETTING
STARTEDThursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
TEXTURE
Thursday, October 21, 2010
Nothing in nature is smooth; it is full of texture.
Thursday, October 21, 2010
Incorporate Texture
.body {background: url(img/bg-texture.jpg);}
Thursday, October 21, 2010
Thursday, October 21, 2010
Use multiple background
images to give your design
flair & added texture.
Thursday, October 21, 2010
Multiple background image syntax
body {background: url(img/bg-cornucopia.jpg) 60% 20% no-repeat, url(img/bg-texture.jpg);}
Thursday, October 21, 2010
Thursday, October 21, 2010
The key to using it right is
BE SUBTLE
* You’re going to get sick of hearing this.
*
Thursday, October 21, 2010
Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
YES
YES
NOPE
YES
Browser support for multiple background imagesFor IE, you can create one fallback image that goes first.
.body {background: url(img/
bg-flat.jpg);background: url(img/
bg-texture1.jpg);url(img/bg-texture2.jpg);
}
Thursday, October 21, 2010
Texture resources✴ http://www.squidfingers.com/
patterns/
✴ http://www.textureking.com/
✴ http://bgpatterns.com/
✴ http://snook.ca/archives/html_and_css/multiple-bg-css-gradients
Thursday, October 21, 2010
TONE
Thursday, October 21, 2010
Any two colors will be harmonious when one or both contain some of the other. - ANDREW LOOMIS
Thursday, October 21, 2010
Use CSS3 to blend colors into textures, highlighting & darkening
certain regions.
There are two methods for using transparent colors in CSS3:
hsla & rgba.
Thursday, October 21, 2010
hsla syntax.darken {
background: hsla(240%,50%,50%,.8);}
Hue is a degree on a color wheel (0-360), saturation is a percentage, and lightness is a percentage. The last value, alpha, determines the opacity of the color.
Thursday, October 21, 2010
rgba syntax
.darken {background: rgba(0,0,0,.8);}
Use the rgb color code. The “a” stands for alpha. This is the level of opacity the color should have.
Thursday, October 21, 2010
choose highlight & lowlight colors
.highlight {background: rgba(255,253,219,.25);}
.darken {background: rgba(0,0,0,.4);}
Thursday, October 21, 2010
Thursday, October 21, 2010
CSS3 colors aren’t just for backgrounds. You can use them on everything!
Thursday, October 21, 2010
Thursday, October 21, 2010
RGBA!
RGBA!
RGBA!
RGBA!
RGBA!
RGBA!
RGBA!RGBA!
RGBA!
RGBA!
Thursday, October 21, 2010
The beauty of RGBA is that it is flexible. Set
the foreground elements to be transparent, and they’ll blend with any
background color.
Thursday, October 21, 2010
Thursday, October 21, 2010
#season-inner {background: rgba(244,107,43,.42);}
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
YES
YES
NOPE
YES
Browser support for RGBA
For IE, you can include a solid color backup, or use transparent .png’s for backgrounds (in a separate stylesheet).
h2 {color: #ccc; color: rgba(255,255,255,.7);}
Thursday, October 21, 2010
CSS3 color resources✴ http://24ways.org/2009/
working-with-rgba-colour
✴ http://css-tricks.com/yay-for-hsla/
✴ http://css-tricks.com/examples/HSLaExplorer/
✴ http://mezzoblue.com/archives/2010/07/27/a_css3_tip/
Thursday, October 21, 2010
Lastly, add pops of color that complement the color scheme. If the color only works with that theme, group it accordingly.
#fall a { color: rgba(81,27,0,.7); }
#fall #featured h2,#fall #featured-list h3 { color: #e8e8af; }
#fall #featured-list li a { color: #f79d6c; }
Thursday, October 21, 2010
Thursday, October 21, 2010
TYPE
Thursday, October 21, 2010
Thanks to @font-face,designs can now have richer character through typography.
Thursday, October 21, 2010
Jason Santa Maria did a great writeup about using the many fonts now available to web designers.
http://alistapart.com/articles/on-web-typography/
“The best text faces generally have some personality, but not so much that it distracts us from the content or experience of reading. Typefaces that have a lot of personality are better reserved for display sizes, as they can become cumbersome to read in longer passages.”
Thursday, October 21, 2010
The key to using it right is
BE SUBTLE
Thursday, October 21, 2010
Thursday, October 21, 2010
Chunk!Chunk!
Chunk!
Chunk!
Chunk! Chunk! Chunk!
Thursday, October 21, 2010
BlackJack: Using an embellished, fancy-looking handwritten font adds to the handmade feel. The key is to be subtle, and use it at a larger size.
Thursday, October 21, 2010
@font-face syntaxSet up a font file to be tied to a font name. Then, reference it in font-family declarations throughout the design.
@font-face { font-family: ‘chunkfiveRegular’; src: url(‘chunkfiveRegular.ttf’) format(‘truetype’);}
h2 { font-family: ‘chunkfiveRegular’, serif;}
Thursday, October 21, 2010
Ah, if only it were that simple.
✴ It’s got to be legal.
✴ IE requires EOT, other browsers only like SVG, it’d be great to use WOFF.
✴ There’s issues with FOUT, or a flash of un-styled text.
Thursday, October 21, 2010
Solutions!Quantity? Quality? Easy? Multiple
Browsers? Legal? Cost?
Typekit
FontSquirrel
500+ Best Easiest YES 100% $24.99 / year +
600+ Varies Pretty Easy YES Mostly Free
20+ Good Easy YES 100% Free
Thursday, October 21, 2010
SHAPE
Thursday, October 21, 2010
Nature is organic, curved,
& flowing.
Thursday, October 21, 2010
The Eames Rocking Chair
Frank Lloyd Wright’s Guggenheim
Jonathan Ive’s Apple iPad
The Volkswagen Beetle Naoto Fukasawa’s Plus Minus Zero Humidifier
Vincent Van Gogh’sThe Starry Night
Thursday, October 21, 2010
In web design, we can use flowing curved lines with rounded edges. Border radius
makes this easy.
Thursday, October 21, 2010
Border-radius syntax
.rounded {-webkit-border-radius: 15px;-moz-border-radius: 15px; border-radius: 15px;}
Thursday, October 21, 2010
The story with vendor prefixes✴ Pro: Gives us flexibility! ✴ Con: Repetitive, doesn’t
validate.✴ Pro: Means “in progress,”
eventually they’ll go away.✴ For more, read: http://
www.alistapart.com/articles/prefix-or-posthack/
Thursday, October 21, 2010
Thursday, October 21, 2010
rounded
rounded
rounded rounded rounded
Thursday, October 21, 2010
Border-radius is super handy
for creating cool buttons &
detail elements.
Thursday, October 21, 2010
.button {-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;}
.numbered {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
Thursday, October 21, 2010
Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
YES
YES
NOPE
YES
Browser support for border-radius
For IE you can use background-image fallbacks, or just say “eff it.” Because not having rounded corners won’t ruin anyone’s day.
Thursday, October 21, 2010
LIGHT
Thursday, October 21, 2010
The first way to incorporate light into your designs is with
gradients.
There are two ways to do this: CSS3 gradients & .png’s.
Thursday, October 21, 2010
CSS3 gradient syntaxbackground: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
http://colorzilla.com/gradient-editor/
Thursday, October 21, 2010
Create a library of gradients to add light to the design
Create a highlight gradient by making a .png with solid white to transparent gradient.
Create a shadow gradient by making a .png with solid black to transparent gradient.
Thursday, October 21, 2010
#featured-image {background: rgba(0,0,0,.18) url(../img/bg-shadow.png) repeat-x;}
Adjust the opacity of the gradients and save them as .png files. You can also combine these with RGBA so the colors blend well.
Thursday, October 21, 2010
Don’t forget about radial gradientsRadial gradients create the illusion of a light source hitting the page.
Add to highlighted areas to create a soft glow.
#highlighted {background: rgba(255,253,219,.25) url(../img/bg-radial.png) top 50% no-repeat; }
Thursday, October 21, 2010
The key to using it right is
BE SUBTLE
Thursday, October 21, 2010
Thursday, October 21, 2010
Gradient
Gradient
Gradient
Gradient Gradient Gradient
GradientGradient
Thursday, October 21, 2010
Using borders and box-shadow together can create a lighted edge effect, or an
indented effect.
Thursday, October 21, 2010
Box-shadow syntax#highlighted {
-moz-box-shadow: 0px 0px 1px rgba(0,0,0,8);
-webkit-box-shadow: 0px 0px 1px rgba(0,0,0,8);
box-shadow: 0px 0px 1px rgba(0,0,0,8);}
✴ The first value is the horizontal offset. This can be positive (right) or negative (left).
✴ The second value is the vertical offset. This can be positive (bottom) or negative (top).
✴ The third value is the blur radius.
✴ The fourth is the color.
Thursday, October 21, 2010
Combine box-shadow & borders
#featured-image {
-moz-box-shadow: 0px 1px 0 rgba(255,255,255,.2);
-webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.2);
box-shadow: 0px 1px 0 rgba(255,255,255,.2);
border: 1px solid rgba(0,0,0,.1);}
Thursday, October 21, 2010
Thursday, October 21, 2010
double border
double border
double border double border double border
double border
double border
Thursday, October 21, 2010
Box-shadow can also be use to create awesome inner
shadows.
Thursday, October 21, 2010
The inset box-shadow syntax
#featured-image {
-moz-box-shadow: inset 0px 0 10px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0px 0 10px rgba(0,0,0,.2);
box-shadow: inset 0px 0 10px rgba(0,0,0,.2);
}
Thursday, October 21, 2010
Use text-shadow to give text a printed feel.#plant-gallery li {
text-shadow: 0 1px 1px rgba(0,0,0,.8);}
Text-shadow uses a simpler syntax than box-shadow, as there’s no need for browser prefixes. Otherwise, the syntax is the same as box-shadow.
Use a negative vertical offset and a dark shadow to imprint lighter text.
Use a positive vertical offset and a light shadow to imprint darker text.
Thursday, October 21, 2010
Thursday, October 21, 2010
Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
YES
YES
NOPE
YES
Browser support for box-shadow & text-shadowIE9 actually isn’t supporting text-shadow yet, but we’re hopeful.
For some box-shadow elements like inner glows you could use .png’s, again not really necessary.
Thursday, October 21, 2010
THAT’S A
MOCKUP!Thursday, October 21, 2010
CSS3 Generator✴ http://css3please.com/
✴ Border-radius
✴ Box-shadow
✴ Gradient
✴ RGBA
✴ Text-shadow
✴ @font-face
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
The question of browser support
Chrome Firefox Opera Safari IE
RGBA
Multiple Backgrounds
Border Radius
Box Shadow
Text Shadow
Font face
YES YES YES YES NO <9
YES YES YES YES NO <9
YES YES YES YES NO <9
YES YES YES YES NO <9
YES YES YES YES NO
YES YES YES YES YES
http://findmebyip.com/litmus/#target-selector
Thursday, October 21, 2010
Dealing with IE Use conditional comments to create browser specific stylesheets:
<!--[if lte IE 8]> <link rel="stylesheet" media="screen, projection" href="css/ie.css”>
<![endif]-->
Thursday, October 21, 2010
Websites don’t have to look the same in every browser.
- Dan Cederholm (and a ton of other influential
designers who agree)
Thursday, October 21, 2010
Thursday, October 21, 2010
BREAK TIME
Thursday, October 21, 2010
Summary of what we learned so far:✴ Multiple background images✴ Colors with CSS3✴ Border-radius✴ Font-face✴ Box-shadow✴ Text-shadow
Thursday, October 21, 2010
Things we’ll learn next✴ CSS3 Selectors:
what are they, how can we use them?
✴ Child selectors
✴ Selectors for forms
✴ Psuedo-elements
✴ Attribute selectors
✴ CSS3 and the experience level: why it’s awesome.
✴ Transitions for links
✴ Opacity on hover
✴ Transforms for images
✴ Multiple columns
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
SELECTORS
Thursday, October 21, 2010
CSS3 selectors allow us to insert new elements
& style existing elements without
added markup.
Thursday, October 21, 2010
pseudo-classSELECTORS
Thursday, October 21, 2010
pseudo-class selectors✴Some are
familiar:a:linka:visiteda:hover
✴A few new ones to try::first-child:last-child:nth-child
Thursday, October 21, 2010
:first-child syntax✴ Targets an element
that is the first child of its parent
#menus li:first-child {background: url(../img/bg-star.png) left 50% no-repeat;}
Thursday, October 21, 2010
:last-child syntax
Targets an element that is the last child of its parent.#recent-entries li:last-child {
border-bottom: none; }
Thursday, October 21, 2010
:nth-child selector
✴ :nth-child - an element which is the n-th child of its parent.
✴ :nth-last-child - an element which is the n-th child of its parent, going backwards.
✴ :nth-of-type - an element which is the n-th sibiling of its type.
Lets you target an element based onits location in the document tree.
Thursday, October 21, 2010
alternating row styles
#recent-entries ul li:nth-child(odd) {background: rgba(255,255,255,.12); }
Thursday, October 21, 2010
first few rows selected
#ratings li:nth-child(-n+3) { background: rgba(255,255,255,.12); }
Thursday, October 21, 2010
last rows selected
#ratings li:nth-last-child(-n+2) a { color: rgba(0,0,0,.5); opacity: .7; }
Thursday, October 21, 2010
:nth-of-type selector
.article p:first-of-type { font-size: 16px; color: rgba(0,0,0,.75); }
Thursday, October 21, 2010
:checked syntax✴ For styling a
checked checkbox or radio button.
#subscribe input:checked + label { color: rgba(255,255,255,.3);}
Thursday, October 21, 2010
Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
YES
YES
NOPE
YES
Browser support for pseudo-class selectors
Supported in every browser except the hateful IE.
Include it anyway, to enrich the design for non-IE users.
Apply it in ways that are “nice, but not vital.”
You’re going to get sick of this slide. I’m sorry.
Thursday, October 21, 2010
pseudo-elementSELECTORS
Thursday, October 21, 2010
:first-letter syntax✴ Allows you to style the first
letter on a line. (Hey, dropcaps!)
.article p.intro:first-letter { font-size: 40px; font-family: "chunkfive"; float: left; margin: 14px 5px 0 0; }
Thursday, October 21, 2010
Thursday, October 21, 2010
:first-letter
:first-letter
Thursday, October 21, 2010
:first-letter + @font-face = badass drop caps
Thursday, October 21, 2010
:before & :after syntax✴ Renders content before or
after the element, which can be styled.
#marquee a:after {content: "Go";background: #c4c381;padding: 5px 4px 2px 4px;margin: 0 10px 10px 0;}
Thursday, October 21, 2010
:before & :after syntax✴ Insert unicode
characters before or after links.
#menus a:before { content:" \00BB"; margin-right: 5px; }
Thursday, October 21, 2010
use ::selection to add a little
SURPRISE & FUN
Thursday, October 21, 2010
#fall ::selection { background: rgba(244,107,43,.42); }
Thursday, October 21, 2010
Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
YES
YES
NOPE
YES
Browser support for pseudo-element selectors
Supported in every browser except the hateful IE.
Include it anyway, to enrich the design for non-IE users.
Apply it in ways that are “nice, but not vital.”
I told you you’d get sick of it. Should I just skip it next time?
Thursday, October 21, 2010
attributeSELECTORS
Thursday, October 21, 2010
Attribute selectors allows us to select elements based on their attributes.
(Duh.)
Thursday, October 21, 2010
attribute selectors & form elements
✴ The old way:
input.button {border: none;}
input.text-input {color: #ddd;}
✴ The CSS3 way:
form input [type="text"] {
border: none;}
form input[type="submit"] {
color: #ddd;}
Thursday, October 21, 2010
attribute selectors & links
.article a[href^="mailto:"] { background: url(../img/bg-mail.png) left 50% no-repeat; }
.article a[href$=".pdf"] { background: url(../img/bg-pdf.png) left 50% no-repeat; }
Thursday, October 21, 2010
Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
YES
YES
NOPE
YES
Browser support for attribute selectors
Supported in every browser except the hateful IE.
Include it anyway, to enrich the design for non-IE users.
Apply it in ways that are “nice, but not vital.”
You’re going to get sick of this slide. I’m sorry.
Thursday, October 21, 2010
EXPERIENCE
Thursday, October 21, 2010
CSS3 allows us to create a more interesting,
engaging, & lifelike experience for users.
Thursday, October 21, 2010
createSLICKER
NAVIGATION
Thursday, October 21, 2010
Use CSS3 to style links to look awesome
#header li a {text-align: center;padding: 10px 15px 6px 15px;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px; background: rgba(255,255,255,.2)
url(../img/bg-gradient.png) repeat-x;}
Thursday, October 21, 2010
Thursday, October 21, 2010
Apply the background + gradient only to the :hover#header li a:hover {
background: rgba(255,255,255,.2) url(../img/bg-gradient.png) repeat-x;}
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
smooth things out with
TRANSITIONS
Thursday, October 21, 2010
Transition syntax#header li a {
-webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
✴ the property to be transitioned✴ the duration of the transition✴ the type of transition
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
Cool sidebar effects#recent-entries li a:hover {
width: 383px;background-color: rgba(255,255,255,.22);-webkit-border-top-right-radius: 6px;-webkit-border-bottom-right-radius: 6px;-moz-border-radius-topright: 6px;-moz-border-radius-bottomright: 6px;border-top-right-radius: 6px;border-bottom-right-radius: 6px;}
✴ Adjust the width, background, and border-radius
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
Add combined transitions to make it even more awesome
#recent entries li a:hover {-webkit-transition: width 0.4s linear, background 0.2s ease;-moz-transition: width 0.4s linear, background 0.2s ease;-o-transition: width 0.4s linear, background 0.2s ease;transition: width 0.4s linear, background 0.2s ease;}
✴ the width transition happens in .4 seconds ✴ the background transition happens in .2
seconds, eases in
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
light tricks withOPACITY
Thursday, October 21, 2010
Opacity on elementsSet elements to be slightly opaque, then fade them in on :hover. Use a transition to fade them in gradually.
.marquee-feature img { opacity: .75; }
.marquee-feature img:hover { opacity: 1; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
getting fancy withTRANSFORMS
Thursday, October 21, 2010
Rotate transformRotate an element a certain number of degrees.
.marquee-feature img:hover {-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
How about more playful, less psychotic?.marquee-feature img:hover {
-webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); }
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
Scale transformScale an element a certain percentage.
.marquee-feature img:hover {-webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25);transform: scale(1.25);}
Thursday, October 21, 2010
Thursday, October 21, 2010
Thursday, October 21, 2010
Browser support for transforms & transitions
Supported in every browser except the hateful IE.
Include it anyway, to enrich the design for non-IE users.
Apply it in ways that are “nice, but not vital.”
One of the last times you’ll have to hear about IE today from me!
Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
YES
YES
NOPE
NOPE
Thursday, October 21, 2010
LAYOUT
Thursday, October 21, 2010
CSS3 has support for multiple columns, which is a royal pain to
do the old way.
Thursday, October 21, 2010
Multiple Column SyntaxCreating three columns with a 30 pixel gap and a 1 pixel dotted border.
.article p.secondary { -webkit-column-count: 3; -webkit-column-gap: 30px; -webkit-column-rule: 1px dotted rgba(0,0,0,.8); -moz-column-count: 3; -moz-column-gap: 20px; -moz-column-rule: 1px dotted rgba(0,0,0,.8); column-count: 3; column-gap: 20px; column-rule: 1px dotted rgba(0,0,0,.8); }
Thursday, October 21, 2010
Thursday, October 21, 2010
Browser support for multiple columns
Supported in every browser except IE & Opera.
Include it anyway, to enrich the design for everyone else.
Apply it in ways that are “nice, but not vital.”
Hey, IE’s not alone for once!
Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
NOPE
YES
NOPE
NOPE
Thursday, October 21, 2010
Holy crap,WE DID IT!
Thursday, October 21, 2010
Q&AThursday, October 21, 2010
For more information:✴ W3.org/TR/css3-
roadmap/: The W3C’s working draft of CSS3.
✴ CSS3.info: Tutorials & news related to CSS3.
✴ CSS3please.com: Handy generator for many CSS3 elements.
✴ SmashingMagazine.com: (search CSS3) Several great articles and roundups of tutorials, tools, and cheat sheets.
✴ HandcraftedCSS.com: Awesome book about using CSS3 to create bulletproof websites.
Thursday, October 21, 2010
Thank you for listening!Now become my online friend.
✴ Owltastic.com: My website and sometimes blog
✴ Twitter.com/owltastic: My rambling tweets
✴ Dribbble.com/players/owltastic: What I’m working on right now.
✴ Owltastic.tumblr.com: Images that are inspiring me.
Thursday, October 21, 2010