css3 for advanced design
DESCRIPTION
Paul Trani , Adobe Evangelist. cSS3 for Advanced Design. Paul Trani @ paultrani [email protected] 15 years design experience 4 year old at heart. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/1.jpg)
CSS3 FOR ADVANCED DESIGNPaul Trani, Adobe Evangelist
![Page 3: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/3.jpg)
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.
![Page 4: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/4.jpg)
Examples
• www.awwwards.com • Letter Heads• Cursor Monster• Fish Burst Game
![Page 5: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/5.jpg)
![Page 6: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/6.jpg)
BENEFITS OF CSS3
![Page 7: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/7.jpg)
Reduced development and maintenance time
• Less images, Flash, JavaScript• Streamlined markup
![Page 8: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/8.jpg)
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
![Page 9: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/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 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/10.jpg)
Increased usability
• Real text• Optimized styles based on device capabilities
![Page 11: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/11.jpg)
![Page 12: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/12.jpg)
BROWSER SUPPORT
![Page 13: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/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 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/14.jpg)
http://www.w3.org/TR/CSS/www.w3.org/Style/CSS/current-work
![Page 15: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/15.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 16: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/16.jpg)
CREATIVE CSS3
![Page 17: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/17.jpg)
• RGBa & HSLa• Gradients• Rounded Corners• Box Shadow• Multiple Backgrounds• @font-face• Media Queries• Visual Effects and Animation
![Page 19: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/19.jpg)
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
![Page 20: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/20.jpg)
border-radiusborder-radius: 10px;
![Page 21: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/21.jpg)
box-shadowbox-shadow (horizontal offset,
vertical offset, optional blur distance, optional distance, optional color, optional inset)
![Page 23: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/23.jpg)
@ font-face
![Page 24: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/24.jpg)
MEDIA QUERIES
![Page 25: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/25.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 26: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/26.jpg)
CSS Media Queries
<link rel="stylesheet" type="text/css"media="screen and (max-device-width: 480px)"href="mobile.css" />
![Page 27: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/27.jpg)
TRANSFORMS
![Page 28: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/28.jpg)
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
![Page 29: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/29.jpg)
WHAT’S NEXT
![Page 30: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/30.jpg)
http://lab.simurai.com/css/tilt-shift
Adobe Edge
![Page 31: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/31.jpg)
THANK YOU
![Page 32: cSS3 for Advanced Design](https://reader036.vdocument.in/reader036/viewer/2022062323/56816130550346895dd085b0/html5/thumbnails/32.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