CSS3 For Advanced Design
Download as PPTX, PDF4 likes1,375 views
CSS3 gives websites dynamic and interactive capabilities for mobile phones and tablets. CSS3 adds fine-grained design controls and brings the web closer to reality. Examples of CSS3 benefits include reduced development time, streamlined markup, improved page performance, and better search engine placement. Browser support for CSS3 is improving through progressive enhancement. CSS3 features like RGBa & HSLa colors, gradients, rounded corners, box shadows, fonts, and media queries allow for creative designs.
CSS3 For Advanced Design
- 1. cSS3 for Advanced DesignPaul Trani, Adobe Evangelist
- 2. Paul Trani@paultraniptrani@adobe.com 15 yearsdesign experience
- 3. 4 year old at heartThe 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.
- 4. Exampleswww.awwwards.comLetter HeadsCursor MonsterFish Burst Game
- 7. Reduced development and maintenance timeLess images, Flash, JavaScriptStreamlined markup
- 8. Increased page performanceSmaller file sizesFewer 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 placementGoogle uses speed as ranking factorReal text instead of image or Flash text
- 10. Increased usabilityReal textOptimized styles based on device capabilities
- 12. Browser support
- 13. Progressive EnhancementDeliver the best possible experience to the widest possible audience.Should be as fully featured and functional as possible.
- 15. Use the parts of CSS3 that:have generally stable syntaxhave good supportdon'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
- 16. Creative CSS3
- 17. RGBa & HSLaGradientsRounded CornersBox ShadowMultiple Backgrounds@font-faceMedia QueriesVisual Effects and Animation
- 18. COLORRGBa (255, 255, 255, 0.5);HSLa(360, 100%, 50%, 0.5);
- 19. GradientsCan be used in every place you can use an imagebackground: linear-gradient(white, black);Prefixes:-webkit- Chrome and Webkit-moz- Firefox 3.6+-o- Opera 11.1 (linear only)-ms- IE 10
- 21. box-shadowbox-shadow (horizontal offset,vertical offset, optional blur distance, optional distance, optional color, optional inset)
- 22. text-shadow
- 23. @ font-face
- 24. Media queries
- 25. CSS Media Queries for Mobilemin-widthmax-widthdevice-widthmin-device-widthmax-device-widthorientation-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" />
- 27. TRANSFORMS
- 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
- 29. What’s next
- 31. Thank you
- 32. Slides posted at www.paultrani.comFlexible Web Design www.flexiblewebbook.comStunning CSS3 www.stunningcss3.comwww.w3.org/Style/CSS/current-workwww.caniuse.com
Editor's Notes
- #9: http://developer.yahoo.com/performance/rules.html
- #16: Delight the user with what’s available, and not moan about what isn’t or make the experience terrible for those without.
- #19: 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.htmlHue 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
- #20: www.blueskyresumes.com, http://blog.gesteves.com, http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.htmlhttp://designindevelopment.com/demos/grooveshark, www.broken-links.com/tests/studio_effect, www.yummly.com, http://nimbupani.com/sexy-css3-buttons.html
- #21: www.blueskyresumes.com, http://blog.gesteves.com, http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
- #22: 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-shadowhttp://mothereffingtextshadow.com/
- #23: 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
- #24: www.blueskyresumes.com, www.jasonsantamaria.com, http://lostworldsfairs.com/atlantis, www.fredssoldater.se
- #29: http://butterlabel.com, http://forabeautifulweb.com, http://girliemac.com/sandbox/dock.html, http://lab.simurai.com/css/tilt-shifthttp://www.paulrhayes.com/experiments/cube-3d/
- #31: http://butterlabel.com, http://forabeautifulweb.com, http://girliemac.com/sandbox/dock.html, http://lab.simurai.com/css/tilt-shift