creating lifelike designs with css3

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.


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!


the time to use CSS3 is

RIGHT NOW


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.


Lifelike designs aretangible, natural,

& organic.


There is no better designer than nature.

— ALEXANDER MCQUEEN


Some of McQueen’s nature inspired work.


how can weUSE NATUREto inspire our

WEB DESIGNS?


The five elements to consider when creating a lifelike design are texture, tone, type, shape, & light.


In part one, we’re going to create an awesome mockup using CSS3 and markup.


GETTING

STARTEDThursday, October 21, 2010

TEXTURE


Nothing in nature is smooth; it is full of texture.


Incorporate Texture

.body {background: url(img/bg-texture.jpg);}


Use multiple background

images to give your design

flair & added texture.


Multiple background image syntax

body {background: url(img/bg-cornucopia.jpg) 60% 20% no-repeat, url(img/bg-texture.jpg);}


The key to using it right is

BE SUBTLE

* You’re going to get sick of hearing this.

*


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);

}


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


http://www.squidfingers.com/patterns/




http://www.textureking.com

http://www.textureking.com

http://bgpatterns.com

http://bgpatterns.com

http://snook.ca/archives/html_and_css/multiple-bg-css-gradients






TONE


Any two colors will be harmonious when one or both contain some of the other. - ANDREW LOOMIS


Use CSS3 to blend colors into textures, highlighting & darkening

certain regions.

There are two methods for using transparent colors in CSS3:

hsla & rgba.


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.


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.


choose highlight & lowlight colors

.highlight {background: rgba(255,253,219,.25);}

.darken {background: rgba(0,0,0,.4);}


CSS3 colors aren’t just for backgrounds. You can use them on everything!


RGBA!

RGBA!

RGBA!

RGBA!

RGBA!

RGBA!

RGBA!RGBA!

RGBA!

RGBA!


The beauty of RGBA is that it is flexible. Set

the foreground elements to be transparent, and they’ll blend with any

background color.


#season-inner {background: rgba(244,107,43,.42);}


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);}


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/




















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; }


TYPE


Thanks to @font-face,designs can now have richer character through typography.


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.”


http://www.alistapart.com/articles/on-web-typography/







BE SUBTLE


Chunk!Chunk!

Chunk!

Chunk!

Chunk! Chunk! Chunk!


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.


@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;}


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.


Solutions!Quantity? Quality? Easy? Multiple

Browsers? Legal? Cost?

Typekit

FontSquirrel

Google

500+ Best Easiest YES 100% $24.99 / year +

600+ Varies Pretty Easy YES Mostly Free

20+ Good Easy YES 100% Free


SHAPE


Nature is organic, curved,

& flowing.


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


In web design, we can use flowing curved lines with rounded edges. Border radius

makes this easy.


Border-radius syntax

.rounded {-webkit-border-radius: 15px;-moz-border-radius: 15px; border-radius: 15px;}


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/


rounded

rounded

rounded rounded rounded


Border-radius is super handy

for creating cool buttons &

detail elements.


.button {-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;}

.numbered {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}


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.


LIGHT


The first way to incorporate light into your designs is with

gradients.

There are two ways to do this: CSS3 gradients & .png’s.


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/




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.


#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.


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; }



BE SUBTLE


Gradient

Gradient

Gradient

Gradient Gradient Gradient

GradientGradient


Using borders and box-shadow together can create a lighted edge effect, or an

indented effect.


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.


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);}


double border

double border

double border double border double border

double border

double border


Box-shadow can also be use to create awesome inner

shadows.


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);

}


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.


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.


THAT’S A

MOCKUP!Thursday, October 21, 2010

CSS3 Generator✴ http://css3please.com/

✴ Border-radius

✴ Box-shadow

✴ Gradient

✴ RGBA

✴ Text-shadow

✴ @font-face


http://css3please.com


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

YES YES YES YES YES

http://findmebyip.com/litmus/#target-selector


http://findmebyip.com/litmus/#

http://findmebyip.com/litmus/#

Dealing with IE Use conditional comments to create browser specific stylesheets:

Websites don’t have to look the same in every browser.

- Dan Cederholm (and a ton of other influential

designers who agree)


BREAK TIME


Summary of what we learned so far:✴ Multiple background images✴ Colors with CSS3✴ Border-radius✴ Font-face✴ Box-shadow✴ Text-shadow


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


SELECTORS


CSS3 selectors allow us to insert new elements

& style existing elements without

added markup.


pseudo-classSELECTORS


pseudo-class selectors✴Some are

familiar:a:linka:visiteda:hover

✴A few new ones to try::first-child:last-child:nth-child


: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;}


:last-child syntax

Targets an element that is the last child of its parent.#recent-entries li:last-child {

border-bottom: none; }


: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.


alternating row styles

#recent-entries ul li:nth-child(odd) {background: rgba(255,255,255,.12); }


first few rows selected

#ratings li:nth-child(-n+3) { background: rgba(255,255,255,.12); }


last rows selected

#ratings li:nth-last-child(-n+2) a { color: rgba(0,0,0,.5); opacity: .7; }


:nth-of-type selector

.article p:first-of-type { font-size: 16px; color: rgba(0,0,0,.75); }


:checked syntax✴ For styling a

checked checkbox or radio button.

#subscribe input:checked + label { color: rgba(255,255,255,.3);}


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.


pseudo-elementSELECTORS


: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; }


:first-letter

:first-letter


:first-letter + @font-face = badass drop caps


: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;}


:before & :after syntax✴ Insert unicode

characters before or after links.

#menus a:before { content:" \00BB"; margin-right: 5px; }


use ::selection to add a little

SURPRISE & FUN


#fall ::selection { background: rgba(244,107,43,.42); }


Chrome

Firefox

Opera

Safari

IE6 - 8

IE9

YES

YES

YES

YES

NOPE

YES

Browser support for pseudo-element selectors




I told you you’d get sick of it. Should I just skip it next time?


attributeSELECTORS


Attribute selectors allows us to select elements based on their attributes.

(Duh.)


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;}


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; }


Chrome

Firefox

Opera

Safari

IE6 - 8

IE9

YES

YES

YES

YES

NOPE

YES

Browser support for attribute selectors




You’re going to get sick of this slide. I’m sorry.


EXPERIENCE


CSS3 allows us to create a more interesting,

engaging, & lifelike experience for users.


createSLICKER

NAVIGATION


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;}


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;}


smooth things out with

TRANSITIONS


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


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


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


light tricks withOPACITY


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; }


getting fancy withTRANSFORMS


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); }


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); }


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);}


Browser support for transforms & transitions




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


LAYOUT


CSS3 has support for multiple columns, which is a royal pain to

do the old way.


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); }


Browser support for multiple columns

Supported in every browser except IE & Opera.

Include it anyway, to enrich the design for everyone else.


Hey, IE’s not alone for once!

Chrome

Firefox

Opera

Safari

IE6 - 8

IE9

YES

YES

NOPE

YES

NOPE

NOPE


Holy crap,WE DID IT!


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.


http://css3.info

http://css3.info

http://css3.info

http://css3.info



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.


creating lifelike designs with css3

Design