css3 and advanced design
DESCRIPTION
Talk given at DevCon 5 in Santa Clara: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.TRANSCRIPT
![Page 1: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/1.jpg)
CSS3 & ADVANCED DESIGN
![Page 3: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/3.jpg)
Designer or Developer?
![Page 4: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/4.jpg)
![Page 5: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/5.jpg)
Examples
• Letter Heads
• Cursor Monster
• www.awwwards.com
![Page 6: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/6.jpg)
Bene!ts of CSS3
![Page 7: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/7.jpg)
Reduced Development and Maintenance Time
• Less images, Flash, JavaScript
• Streamlined markup
![Page 8: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/8.jpg)
Increased Page Performance
• Smaller !le sizes
• Fewer HTTP requests
“Reducing the number of HTTP requests…is the most important guideline for improving performance for !rst time visitors.”
Yahoo! Exceptional Performance Team
![Page 9: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/9.jpg)
Better Search Engine Placement
• Google uses speed as ranking factor
• Real text instead of image or Flash text
![Page 10: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/10.jpg)
Increased Usability
• Optimized styles based on device capabilities
• Real text
![Page 11: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/11.jpg)
![Page 12: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/12.jpg)
Browser Support
![Page 13: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/13.jpg)
Progressive Enhancement
• Deliver the best possible experience to the widest possible audience.
• Should be as fully featured and functional as possible.
![Page 14: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/14.jpg)
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
![Page 15: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/15.jpg)
Creative CSS3
![Page 16: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/16.jpg)
• RGBa & HSLa
• Gradients
• Rounded Corners
• Box Shadow
• Multiple Backgrounds
• @font-face
• Media Queries
• Visual Effects and Animation
{
![Page 17: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/17.jpg)
Color
• RGBa (255, 255, 255, 0.5);
• HSLa (360, 100%, 50%, 0.5);
![Page 18: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/18.jpg)
border-radius border-radius: 10px;
![Page 19: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/19.jpg)
Gradients • Can be used in every place you can use an image
• background: linear-gradient(white, black);
• Pre!xes: – -webkit- Chrome and Webkit
– -moz- Firefox 3.6+
– -o- Opera 11.1 (linear only)
– -ms- IE 10
![Page 20: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/20.jpg)
box-shadow box-shadow (horizontal offset,
vertical offset, optional blur distance, optional distance, optional color, optional inset)
![Page 21: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/21.jpg)
text-shadow
![Page 22: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/22.jpg)
@ font-face
![Page 23: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/23.jpg)
Media Queries
![Page 24: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/24.jpg)
CSS Media Queries for Mobile
• min-width
• max-width
• device-width
• min-device-width
• max-device-width
• orientation
• -webkit-min-device-pixel-ratio
![Page 25: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/25.jpg)
CSS Media Queries
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="mobile.css" />
![Page 26: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/26.jpg)
Transforms
![Page 27: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/27.jpg)
Transforms – Transform Anything! opacity: 0.5; -webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease; opacity: 1;
h"p://lab.simurai.com/css/1lt-‐shi4
![Page 28: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/28.jpg)
What’s Next
![Page 29: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/29.jpg)
Adobe Edge
![Page 30: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/30.jpg)
CSS Regions
CSS Shaders
![Page 31: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/31.jpg)
• 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
Thank You
![Page 32: CSS3 and Advanced Design](https://reader033.vdocument.in/reader033/viewer/2022051323/54b39c8d4a795944738b486f/html5/thumbnails/32.jpg)
Hey. We’re hiring.