Css3 paul trani
- 3. The power of the web has arrived for mobile phones
and tablets. CSS3 gives web sites a dynamic,
interactive capability and greater useability. CSS3
adds fine grained controls for designers looking to
bring the web closer to reality.
- 8. Increased page performance
• Smaller file sizes
• Fewer HTTP requests
“Reducing the number of HTTP requests…is the most important
guideline for improving performance for first time visitors.”
Yahoo! Exceptional Performance Team
- 9. Better search engine placement
• Google uses speed as ranking factor
• Real text instead of image or Flash text
- 15. Use the parts of CSS3 that:
• have generally stable syntax
• have good support
• don't harm non-supporting browsers by their lack.
• http://caniuse.com
“Subtle CSS3 effects should be employed as a reward for users
who run a modern browser.”
- Front-End Development Guidelines, Yahoo
- 17. • RGBa & HSLa
• Gradients
• Rounded Corners
• Box Shadow
• Multiple Backgrounds
• @font-face
• Media Queries
• Visual Effects and Animation
- 19. Gradients
• Can be used in every place you can use an image
• background: linear-gradient(white, black);
• Prefixes:
– -webkit- Chrome and Webkit
– -moz- Firefox 3.6+
– -o- Opera 11.1 (linear only)
– -ms- IE 10
- 25. CSS Media Queries for Mobile
• min-width
• max-width
• device-width
• min-device-width
• max-device-width
• orientation
• -webkit-min-device-pixel-ratio
- 26. CSS Media Queries
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="mobile.css" />
- 28. Transforms – You can transform anything!
opacity: 0.5;
-webkit-transition-property: opacity;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease;
opacity: 1;
http://lab.simurai.com/css/tilt-shift
- 32. • Slides posted at www.paultrani.com
• Flexible Web Design www.flexiblewebbook.com
• Stunning CSS3 www.stunningcss3.com
• www.w3.org/Style/CSS/current-work
• www.caniuse.com
Editor's Notes
- http://developer.yahoo.com/performance/rules.html
- Delight the user with what’s available, and not moan about what isn’t or make the experience terrible for those without.
- Modify header.
We have long had the opacity property, which is similar, but opacity forces all decendant elements to also become transparent and there is no way to fight it (except weird positional hacks <http://css-tricks.com/non-transparent-elements-inside-transparent-elements/> ) Cross-browser opacity <http://css-tricks.com/css-transparency-settings-for-all-broswers/> is also a bit sloppy.
http://24ways.org, http://css-tricks.com/text-blocks-over-image, www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html
Hue is derived from a degree on the color wheel: 0 & 360 being red, around 120 for the greens, 240 for the blues and everything else in betweenSaturation is a percentage: 0% being grayscale and 100% in full colorLightness is a percentage: 0% is dark, 50% the average and 100% the lightest
- www.blueskyresumes.com, http://blog.gesteves.com, http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
http://designindevelopment.com/demos/grooveshark, www.broken-links.com/tests/studio_effect, www.yummly.com, http://nimbupani.com/sexy-css3-buttons.html
- www.blueskyresumes.com, http://blog.gesteves.com, http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
- www.fredssoldater.se, http://chris-armstrong.com, http://girliemac.com/sandbox/button.html, http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow
http://mothereffingtextshadow.com/
- http://desandro.com, http://chunkytheme.tumblr.com, http://safe.tumblr.com/theme/preview/5932, http://sixrevisions.com/css/how-to-create-inset-typography-with-css3, , www.time2project.com
- www.blueskyresumes.com, www.jasonsantamaria.com, http://lostworldsfairs.com/atlantis, www.fredssoldater.se
- http://butterlabel.com, http://forabeautifulweb.com, http://girliemac.com/sandbox/dock.html, http://lab.simurai.com/css/tilt-shift
http://www.paulrhayes.com/experiments/cube-3d/
- http://butterlabel.com, http://forabeautifulweb.com, http://girliemac.com/sandbox/dock.html, http://lab.simurai.com/css/tilt-shift