Creating Lifelike Designs with CSS3

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!

the time to
use CSS3 is
RIGHT NOW

why use CSS3?
✴ Make your mockups in
markup.
✴ Create sites that are
more ﬂexible.
✴ 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 are
tangible, natural,
& organic.

There is no
better designer
than nature.
— ALEXANDER MCQUEEN

Some of McQueen’s nature inspired work.

how can we
USE NATURE
to 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
STARTED

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 images
For IE, you can create one
fallback image that goes first.
.body {
background: url(img/
bg-ﬂat.jpg);
background: url(img/
bg-texture1.jpg);
url(img/bg-
texture2.jpg);
}

Texture resources
✴ http://www.squidﬁngers.com/
patterns/
✴ http://www.textureking.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.”

The key to
using it right is
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 syntax
Set 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 ﬂash 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 Humidiﬁer
Vincent Van Gogh’s
The 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 ﬂexibility!
✴ Con: Repetitive, doesn’t
validate.
✴ Pro: Means “in progress,”
eventually they’ll go away.
✴ For more, read: http://
www.alistapart.com/articles/
preﬁx-or-posthack/

rounded
rounded
rounded rounded rounded

Border-radius
is super handy
for creating
cool buttons &
detail elements.

.button {
}
.numbered {
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 syntax
background:
-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 ﬁles. You
can also combine
these with RGBA
so the colors
blend well.

Don’t forget about radial gradients
Radial 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;
}

Gradient
Gradient
Gradient
Gradient Gradient Gradient
Gradient
Gradient

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-shadow
IE9 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!

CSS3 Generator
✴ http://css3please.com/
✴ Border-radius
✴ Box-shadow
✴ Gradient
✴ RGBA
✴ Text-shadow
✴ @font-face

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://ﬁndmebyip.com/litmus/#target-selector

Dealing with IE
Use conditional comments to
create browser speciﬁc
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-class
SELECTORS

pseudo-class selectors
✴Some are
familiar:
a:link
a:visited
a:hover
✴A few new
ones to try:
:ﬁrst-child
:last-child
:nth-child

:first-child syntax
✴ Targets an element
that is the ﬁrst child
of its parent
#menus li:ﬁrst-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
n-th child of its parent,
going backwards.
✴ :nth-of-type - an
n-th sibiling of its type.
Lets you target an element based on
its location in the document tree.

alternating row styles
#recent-entries ul li:nth-child(odd) {
}

first few rows selected
#ratings li:nth-child(-n+3) {
}

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:ﬁrst-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-element
SELECTORS

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

:ﬁrst-letter
:ﬁrst-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 {
}

Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
YES
YES
NOPE
YES
Browser support for
pseudo-element selectors
but not vital.”
I told you you’d get sick of it.
Should I just skip it next time?

attribute
SELECTORS

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
but not vital.”
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.

create
SLICKER
NAVIGATION

Use CSS3 to style links to
look awesome
#header li a {
text-align: center;
padding: 10px 15px 6px 15px;
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 with
OPACITY

Opacity on elements
Set 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 with
TRANSFORMS

Rotate transform
Rotate an element a certain number of degrees.
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

How about
more playful,
less psychotic?
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}

Scale transform
Scale an element a certain percentage.
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);
}

Browser support for
transforms & transitions
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

LAYOUT

CSS3 has support for
multiple columns,
which is a royal pain to
do the old way.

Multiple Column Syntax
Creating 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
except IE & Opera.
design for everyone else.
but not vital.”
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&A

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.

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

More Related Content

Similar to Creating Lifelike Designs with CSS3 (20)

Recently uploaded (20)

Creating Lifelike Designs with CSS3