Your SlideShare is downloading. ×
CSS3 and Advanced Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

CSS3 and Advanced Design

4,446
views

Published on

Talk given at DevCon 5 in Santa Clara: …

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.

Published in: Technology

1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,446
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
91
Comments
1
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS3 & ADVANCED DESIGN
  • 2. Paul Trani@paultrani ptrani@adobe.com•  15 years design experience•  4 year old at heart
  • 3. Designer or Developer?
  • 4. Examples•  Letter Heads•  Cursor Monster•  www.awwwards.com
  • 5. Bene ts of CSS3
  • 6. Reduced Development and Maintenance Time•  Less images, Flash, JavaScript•  Streamlined markup
  • 7. 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
  • 8. Better Search Engine Placement•  Google uses speed as ranking factor•  Real text instead of image or Flash text
  • 9. Increased Usability•  Optimized styles based on device capabilities•  Real text
  • 10. Browser Support
  • 11. Progressive Enhancement•  Deliver the best possible experience to the widest possible audience.•  Should be as fully featured and functional as possible.
  • 12. Use the parts of CSS3 that:•  Have generally stable syntax•  Have good support•  Dont 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
  • 13. Creative CSS3
  • 14. •  RGBa & HSLa{ •  Gradients •  Rounded Corners •  Box Shadow •  Multiple Backgrounds •  @font-face •  Media Queries •  Visual Effects and Animation
  • 15. Color•  RGBa (255, 255, 255, 0.5);•  HSLa (360, 100%, 50%, 0.5);
  • 16. border-radiusborder-radius: 10px;
  • 17. 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
  • 18. box-shadowbox-shadow (horizontal offset, vertical offset, optional blur distance, optional distance, optional color, optional inset)
  • 19. text-shadow
  • 20. @ font-face
  • 21. Media Queries
  • 22. CSS Media Queries for Mobile•  min-width•  max-width•  device-width•  min-device-width•  max-device-width•  orientation•  -webkit-min-device-pixel-ratio
  • 23. CSS Media Queries<link rel="stylesheet" type="text/css"media="screen and (max-device-width: 480px)"href="mobile.css" />
  • 24. Transforms
  • 25. 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    
  • 26. What’s Next
  • 27. Adobe Edge
  • 28.   CSS Regions   CSS Shaders
  • 29. Thank You•  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    
  • 30. Hey. We’re hiring. 