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

Safari

IE6 - 8

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

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!

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

Safari

IE6 - 8

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

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

BE SUBTLE

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

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

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

Safari

IE6 - 8

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.

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

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

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

Safari

IE6 - 8

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

The question of browser support

Chrome Firefox Opera Safari IE

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

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]-->

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

Safari

IE6 - 8

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 + @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

Safari

IE6 - 8

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

Safari

IE6 - 8

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

Safari

IE6 - 8

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

Safari

IE6 - 8

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.

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

Transcript of Creating Lifelike Designs with CSS3

CSS3 Transitions

Chapter 8: CSS3 and HTML5 - Computer sciencecomputingattallis.weebly.com/uploads/2/6/4/3/26435494/quiz_-_chapter_8.pdf · Chapter 8: CSS3 and HTML5 8.1 Theory: CSS3 Today CSS3 is

Chapter 8: CSS3 and HTML5 - computingattallis.weebly.comcomputingattallis.weebly.com/uploads/2/6/4/3/... · Chapter 8: CSS3 and HTML5 8.1 Theory: CSS3 Today CSS3 is the latest standard

Lifelike aNSWERS

Always Around! · Lifelike Farm animals 5 Lifelike Bunnies 7 Lifelike Dogs 11 Lifelike Cats 19 Huggels 23 Babies Favourites 27 Guusje and friends 29 Daddy’s Princess 33 Mighty Pirates

Fundamental CSS3

Towards Lifelike Interfaces That Learn

Css3 Introduction

CSS3 Fundamentals. CSS3 Introduction CSS3 is the latest standard for CSS. CSS3 is completely backwards-compatible with earlier versions of CSS.

Css3 shubelal

Formation HTML5/CSS3

Lifelike computer characters

Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs

CSS3 notes

css3, html5

1 Introduction to CSS3 - Denise Jacobsdenisejacobs.com/training/css3/2011-09/notes_CSS3intro_day2_09232011.pdfMore CSS3 Properties • Advanced Visual Effects – border-image –

CSS3 secrets: 10 things you might not know about CSS3

Drawing Made Easy Lifelike Heads

CSS3 Refresher

1 Introduction to CSS3 - denisejacobs.comdenisejacobs.com/training/css3/2010-12/notes_CSS3intro_day2_121020… · CSS3 Properties (cont’d) • 2D Transformations –rotate –scale