Meagan Fisher is a user interface designer and front-end developer who is giving a presentation on using CSS3 to create lifelike web designs inspired by nature. Her presentation includes two parts - in the morning part she will create a mockup using CSS3 techniques like textures, tones, types, shapes and light, and in the afternoon part she will build another page adding more details. She discusses various CSS3 properties that can be used to incorporate elements found in nature like textures, tones, colors, fonts, curved shapes, gradients and shadows to make designs more organic and natural looking.
2. 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
3. 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
5. 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
28. Any two
colors will be
harmonious
when one or
both contain
some of the
other.
- ANDREW LOOMIS
Thursday, October 21, 2010
29. 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
30. 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
31. 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
37. 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
46. 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
50. 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
51. The key to
using it right is
BE SUBTLE
Thursday, October 21, 2010
54. 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
55. @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;
}
Thursday, October 21, 2010
56. 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
60. 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’s
The Starry Night
Thursday, October 21, 2010
61. In web design, we can
use flowing curved
lines with rounded
edges. Border radius
makes this easy.
Thursday, October 21, 2010
63. 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
70. 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
72. 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
74. 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;
}
Thursday, October 21, 2010
75. The key to
using it right is
BE SUBTLE
Thursday, October 21, 2010
78. Using borders and box-shadow together
can create a lighted edge effect, or an
indented effect.
Thursday, October 21, 2010
79. 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
85. 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
87. 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.
Thursday, October 21, 2010
94. 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
95. 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
96. 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
99. 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
100. 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
107. :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
108. :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
109. :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 on
its location in the document tree.
Thursday, October 21, 2010
114. :checked syntax
✴ For styling a
checked checkbox
or radio button.
#subscribe input:checked + label {
color: rgba(255,255,255,.3);
}
Thursday, October 21, 2010
115. 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
117. :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
121. :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
122. :before & :after syntax
✴ Insert unicode
characters before
or after links.
#menus a:before {
content:" 00BB";
margin-right: 5px;
}
Thursday, October 21, 2010
125. 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
128. 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
129. 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
130. 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
136. 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
140. 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
150. 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; }
Thursday, October 21, 2010
154. Rotate transform
Rotate 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
157. 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
160. Scale transform
Scale 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
163. 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
168. 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
171. 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
172. 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