Creating Lifelike Designs with CSS3
-
Upload
meagan-fisher -
Category
Design
-
view
140 -
download
0
Transcript of Creating Lifelike Designs with CSS3
![Page 1: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/1.jpg)
Thursday, October 21, 2010
![Page 2: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/2.jpg)
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
![Page 3: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/3.jpg)
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
![Page 4: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/4.jpg)
the time to use CSS3 is
RIGHT NOW
Thursday, October 21, 2010
![Page 5: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/5.jpg)
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
![Page 6: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/6.jpg)
Lifelike designs aretangible, natural,
& organic.
Thursday, October 21, 2010
![Page 7: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/7.jpg)
There is no better designer than nature.
— ALEXANDER MCQUEEN
Thursday, October 21, 2010
![Page 8: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/8.jpg)
Some of McQueen’s nature inspired work.
Thursday, October 21, 2010
![Page 9: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/9.jpg)
how can weUSE NATUREto inspire our
WEB DESIGNS?
Thursday, October 21, 2010
![Page 10: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/10.jpg)
The five elements to consider when creating a lifelike design are texture, tone, type, shape, & light.
Thursday, October 21, 2010
![Page 11: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/11.jpg)
In part one, we’re going to create an awesome mockup using CSS3 and markup.
Thursday, October 21, 2010
![Page 12: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/12.jpg)
GETTING
STARTEDThursday, October 21, 2010
![Page 13: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/13.jpg)
Thursday, October 21, 2010
![Page 14: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/14.jpg)
Thursday, October 21, 2010
![Page 15: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/15.jpg)
Thursday, October 21, 2010
![Page 16: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/16.jpg)
Thursday, October 21, 2010
![Page 17: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/17.jpg)
TEXTURE
Thursday, October 21, 2010
![Page 18: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/18.jpg)
Nothing in nature is smooth; it is full of texture.
Thursday, October 21, 2010
![Page 19: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/19.jpg)
Incorporate Texture
.body {background: url(img/bg-texture.jpg);}
Thursday, October 21, 2010
![Page 20: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/20.jpg)
Thursday, October 21, 2010
![Page 21: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/21.jpg)
Use multiple background
images to give your design
flair & added texture.
Thursday, October 21, 2010
![Page 22: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/22.jpg)
Multiple background image syntax
body {background: url(img/bg-cornucopia.jpg) 60% 20% no-repeat, url(img/bg-texture.jpg);}
Thursday, October 21, 2010
![Page 23: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/23.jpg)
Thursday, October 21, 2010
![Page 24: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/24.jpg)
The key to using it right is
BE SUBTLE
* You’re going to get sick of hearing this.
*
Thursday, October 21, 2010
![Page 25: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/25.jpg)
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
![Page 26: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/26.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
Thursday, October 21, 2010
![Page 27: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/27.jpg)
TONE
Thursday, October 21, 2010
![Page 28: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/28.jpg)
Any two colors will be harmonious when one or both contain some of the other. - ANDREW LOOMIS
Thursday, October 21, 2010
![Page 29: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/29.jpg)
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
![Page 30: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/30.jpg)
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
![Page 31: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/31.jpg)
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
![Page 32: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/32.jpg)
choose highlight & lowlight colors
.highlight {background: rgba(255,253,219,.25);}
.darken {background: rgba(0,0,0,.4);}
Thursday, October 21, 2010
![Page 33: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/33.jpg)
Thursday, October 21, 2010
![Page 34: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/34.jpg)
CSS3 colors aren’t just for backgrounds. You can use them on everything!
Thursday, October 21, 2010
![Page 35: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/35.jpg)
Thursday, October 21, 2010
![Page 36: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/36.jpg)
RGBA!
RGBA!
RGBA!
RGBA!
RGBA!
RGBA!
RGBA!RGBA!
RGBA!
RGBA!
Thursday, October 21, 2010
![Page 37: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/37.jpg)
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
![Page 38: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/38.jpg)
Thursday, October 21, 2010
![Page 39: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/39.jpg)
#season-inner {background: rgba(244,107,43,.42);}
Thursday, October 21, 2010
![Page 40: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/40.jpg)
Thursday, October 21, 2010
![Page 41: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/41.jpg)
Thursday, October 21, 2010
![Page 42: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/42.jpg)
Thursday, October 21, 2010
![Page 43: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/43.jpg)
Thursday, October 21, 2010
![Page 44: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/44.jpg)
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
![Page 45: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/45.jpg)
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
![Page 46: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/46.jpg)
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
![Page 47: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/47.jpg)
Thursday, October 21, 2010
![Page 48: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/48.jpg)
TYPE
Thursday, October 21, 2010
![Page 49: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/49.jpg)
Thanks to @font-face,designs can now have richer character through typography.
Thursday, October 21, 2010
![Page 50: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/50.jpg)
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
![Page 51: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/51.jpg)
The key to using it right is
BE SUBTLE
Thursday, October 21, 2010
![Page 52: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/52.jpg)
Thursday, October 21, 2010
![Page 53: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/53.jpg)
Chunk!Chunk!
Chunk!
Chunk!
Chunk! Chunk! Chunk!
Thursday, October 21, 2010
![Page 54: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/54.jpg)
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
![Page 55: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/55.jpg)
@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
![Page 56: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/56.jpg)
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
![Page 57: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/57.jpg)
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
![Page 58: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/58.jpg)
SHAPE
Thursday, October 21, 2010
![Page 59: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/59.jpg)
Nature is organic, curved,
& flowing.
Thursday, October 21, 2010
![Page 60: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/60.jpg)
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
![Page 61: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/61.jpg)
In web design, we can use flowing curved lines with rounded edges. Border radius
makes this easy.
Thursday, October 21, 2010
![Page 62: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/62.jpg)
Border-radius syntax
.rounded {-webkit-border-radius: 15px;-moz-border-radius: 15px; border-radius: 15px;}
Thursday, October 21, 2010
![Page 63: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/63.jpg)
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
![Page 64: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/64.jpg)
Thursday, October 21, 2010
![Page 65: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/65.jpg)
rounded
rounded
rounded rounded rounded
Thursday, October 21, 2010
![Page 66: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/66.jpg)
Border-radius is super handy
for creating cool buttons &
detail elements.
Thursday, October 21, 2010
![Page 67: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/67.jpg)
.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
![Page 68: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/68.jpg)
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
![Page 69: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/69.jpg)
LIGHT
Thursday, October 21, 2010
![Page 70: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/70.jpg)
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
![Page 71: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/71.jpg)
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
![Page 72: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/72.jpg)
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
![Page 73: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/73.jpg)
#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
![Page 74: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/74.jpg)
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
![Page 75: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/75.jpg)
The key to using it right is
BE SUBTLE
Thursday, October 21, 2010
![Page 76: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/76.jpg)
Thursday, October 21, 2010
![Page 77: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/77.jpg)
Gradient
Gradient
Gradient
Gradient Gradient Gradient
GradientGradient
Thursday, October 21, 2010
![Page 78: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/78.jpg)
Using borders and box-shadow together can create a lighted edge effect, or an
indented effect.
Thursday, October 21, 2010
![Page 79: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/79.jpg)
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
![Page 80: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/80.jpg)
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
![Page 81: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/81.jpg)
Thursday, October 21, 2010
![Page 82: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/82.jpg)
double border
double border
double border double border double border
double border
double border
Thursday, October 21, 2010
![Page 83: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/83.jpg)
Box-shadow can also be use to create awesome inner
shadows.
Thursday, October 21, 2010
![Page 84: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/84.jpg)
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
![Page 85: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/85.jpg)
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
![Page 86: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/86.jpg)
Thursday, October 21, 2010
![Page 87: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/87.jpg)
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
![Page 88: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/88.jpg)
THAT’S A
MOCKUP!Thursday, October 21, 2010
![Page 89: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/89.jpg)
CSS3 Generator✴ http://css3please.com/
✴ Border-radius
✴ Box-shadow
✴ Gradient
✴ RGBA
✴ Text-shadow
✴ @font-face
Thursday, October 21, 2010
![Page 90: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/90.jpg)
Thursday, October 21, 2010
![Page 91: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/91.jpg)
Thursday, October 21, 2010
![Page 92: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/92.jpg)
Thursday, October 21, 2010
![Page 93: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/93.jpg)
Thursday, October 21, 2010
![Page 94: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/94.jpg)
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
![Page 95: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/95.jpg)
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
![Page 96: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/96.jpg)
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
![Page 97: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/97.jpg)
Thursday, October 21, 2010
![Page 98: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/98.jpg)
BREAK TIME
Thursday, October 21, 2010
![Page 99: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/99.jpg)
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
![Page 100: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/100.jpg)
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
![Page 101: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/101.jpg)
Thursday, October 21, 2010
![Page 102: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/102.jpg)
Thursday, October 21, 2010
![Page 103: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/103.jpg)
SELECTORS
Thursday, October 21, 2010
![Page 104: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/104.jpg)
CSS3 selectors allow us to insert new elements
& style existing elements without
added markup.
Thursday, October 21, 2010
![Page 105: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/105.jpg)
pseudo-classSELECTORS
Thursday, October 21, 2010
![Page 106: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/106.jpg)
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
![Page 107: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/107.jpg)
: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
![Page 108: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/108.jpg)
: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
![Page 109: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/109.jpg)
: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
![Page 110: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/110.jpg)
alternating row styles
#recent-entries ul li:nth-child(odd) {background: rgba(255,255,255,.12); }
Thursday, October 21, 2010
![Page 111: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/111.jpg)
first few rows selected
#ratings li:nth-child(-n+3) { background: rgba(255,255,255,.12); }
Thursday, October 21, 2010
![Page 112: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/112.jpg)
last rows selected
#ratings li:nth-last-child(-n+2) a { color: rgba(0,0,0,.5); opacity: .7; }
Thursday, October 21, 2010
![Page 113: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/113.jpg)
:nth-of-type selector
.article p:first-of-type { font-size: 16px; color: rgba(0,0,0,.75); }
Thursday, October 21, 2010
![Page 114: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/114.jpg)
:checked syntax✴ For styling a
checked checkbox or radio button.
#subscribe input:checked + label { color: rgba(255,255,255,.3);}
Thursday, October 21, 2010
![Page 115: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/115.jpg)
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
![Page 116: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/116.jpg)
pseudo-elementSELECTORS
Thursday, October 21, 2010
![Page 117: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/117.jpg)
: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
![Page 118: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/118.jpg)
Thursday, October 21, 2010
![Page 119: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/119.jpg)
:first-letter
:first-letter
Thursday, October 21, 2010
![Page 120: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/120.jpg)
:first-letter + @font-face = badass drop caps
Thursday, October 21, 2010
![Page 121: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/121.jpg)
: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
![Page 122: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/122.jpg)
:before & :after syntax✴ Insert unicode
characters before or after links.
#menus a:before { content:" \00BB"; margin-right: 5px; }
Thursday, October 21, 2010
![Page 123: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/123.jpg)
use ::selection to add a little
SURPRISE & FUN
Thursday, October 21, 2010
![Page 124: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/124.jpg)
#fall ::selection { background: rgba(244,107,43,.42); }
Thursday, October 21, 2010
![Page 125: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/125.jpg)
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
![Page 126: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/126.jpg)
attributeSELECTORS
Thursday, October 21, 2010
![Page 127: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/127.jpg)
Attribute selectors allows us to select elements based on their attributes.
(Duh.)
Thursday, October 21, 2010
![Page 128: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/128.jpg)
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
![Page 129: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/129.jpg)
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
![Page 130: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/130.jpg)
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
![Page 131: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/131.jpg)
EXPERIENCE
Thursday, October 21, 2010
![Page 132: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/132.jpg)
CSS3 allows us to create a more interesting,
engaging, & lifelike experience for users.
Thursday, October 21, 2010
![Page 133: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/133.jpg)
createSLICKER
NAVIGATION
Thursday, October 21, 2010
![Page 134: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/134.jpg)
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
![Page 135: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/135.jpg)
Thursday, October 21, 2010
![Page 136: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/136.jpg)
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
![Page 137: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/137.jpg)
Thursday, October 21, 2010
![Page 138: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/138.jpg)
Thursday, October 21, 2010
![Page 139: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/139.jpg)
smooth things out with
TRANSITIONS
Thursday, October 21, 2010
![Page 140: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/140.jpg)
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
![Page 141: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/141.jpg)
Thursday, October 21, 2010
![Page 142: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/142.jpg)
Thursday, October 21, 2010
![Page 143: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/143.jpg)
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
![Page 144: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/144.jpg)
Thursday, October 21, 2010
![Page 145: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/145.jpg)
Thursday, October 21, 2010
![Page 146: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/146.jpg)
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
![Page 147: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/147.jpg)
Thursday, October 21, 2010
![Page 148: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/148.jpg)
Thursday, October 21, 2010
![Page 149: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/149.jpg)
light tricks withOPACITY
Thursday, October 21, 2010
![Page 150: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/150.jpg)
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
![Page 151: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/151.jpg)
Thursday, October 21, 2010
![Page 152: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/152.jpg)
Thursday, October 21, 2010
![Page 153: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/153.jpg)
getting fancy withTRANSFORMS
Thursday, October 21, 2010
![Page 154: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/154.jpg)
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
![Page 155: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/155.jpg)
Thursday, October 21, 2010
![Page 156: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/156.jpg)
Thursday, October 21, 2010
![Page 157: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/157.jpg)
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
![Page 158: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/158.jpg)
Thursday, October 21, 2010
![Page 159: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/159.jpg)
Thursday, October 21, 2010
![Page 160: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/160.jpg)
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
![Page 161: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/161.jpg)
Thursday, October 21, 2010
![Page 162: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/162.jpg)
Thursday, October 21, 2010
![Page 163: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/163.jpg)
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
![Page 164: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/164.jpg)
LAYOUT
Thursday, October 21, 2010
![Page 165: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/165.jpg)
CSS3 has support for multiple columns, which is a royal pain to
do the old way.
Thursday, October 21, 2010
![Page 166: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/166.jpg)
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
![Page 167: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/167.jpg)
Thursday, October 21, 2010
![Page 168: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/168.jpg)
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
![Page 169: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/169.jpg)
Holy crap,WE DID IT!
Thursday, October 21, 2010
![Page 170: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/170.jpg)
Q&AThursday, October 21, 2010
![Page 171: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/171.jpg)
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
![Page 172: Creating Lifelike Designs with CSS3](https://reader031.fdocuments.net/reader031/viewer/2022012919/5881b5cb1a28abdd348b614d/html5/thumbnails/172.jpg)
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