O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
CSS3 FOR ADVANCED DESIGN
Paul Trani, Adobe Evangelist
Paul Trani
@paultrani ptrani@adobe.com
• 15 years design experience
• 4 year old at heart
The power of the web has arrived for mobile phones
and tablets. CSS3 gives web sites a dynamic,
interactive capability and...
Examples
• www.awwwards.com
• Letter Heads
• Cursor Monster
• Fish Burst Game
BENEFITS OF CSS3
Reduced development and maintenance time
• Less images, Flash, JavaScript
• Streamlined markup
Increased page performance
• Smaller file sizes
• Fewer HTTP requests
“Reducing the number of HTTP requests…is the most im...
Better search engine placement
• Google uses speed as ranking factor
• Real text instead of image or Flash text
Increased usability
• Real text
• Optimized styles based on device capabilities
BROWSER SUPPORT
Progressive Enhancement
• Deliver the best possible experience to the widest
possible audience.
• Should be as fully featu...
http://www.w3.org/TR/CSS/
www.w3.org/Style/CSS/current-work
Use the parts of CSS3 that:
• have generally stable syntax
• have good support
• don't harm non-supporting browsers by the...
CREATIVE CSS3
• RGBa & HSLa
• Gradients
• Rounded Corners
• Box Shadow
• Multiple Backgrounds
• @font-face
• Media Queries
• Visual Effe...
COLOR
• RGBa (255, 255, 255, 0.5);
• HSLa (360, 100%, 50%, 0.5);
Gradients
• Can be used in every place you can use an image
• background: linear-gradient(white, black);
• Prefixes:
– -we...
border-radius
border-radius: 10px;
box-shadow
box-shadow (horizontal offset,
vertical offset,
optional blur distance,
optional distance,
optional color,
opti...
text-shadow
@ font-face
MEDIA QUERIES
CSS Media Queries for Mobile
• min-width
• max-width
• device-width
• min-device-width
• max-device-width
• orientation
• ...
CSS Media Queries
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="mobile.css" />
TRANSFORMS
Transforms – You can transform anything!
opacity: 0.5;
-webkit-transition-property: opacity;
-webkit-transition-duration: ...
WHAT’S NEXT
http://lab.simurai.com/css/tilt-shift
Adobe Edge
THANK YOU
• Slides posted at www.paultrani.com
• Flexible Web Design www.flexiblewebbook.com
• Stunning CSS3 www.stunningcss3.com
• ...
Css3 paul trani
Css3 paul trani
Próximos SlideShares
Carregando em…5
×

Css3 paul trani

872 visualizações

Publicada em

Advance CSS3

Publicada em: Tecnologia
  • Entre para ver os comentários

Css3 paul trani

  1. 1. CSS3 FOR ADVANCED DESIGN Paul Trani, Adobe Evangelist
  2. 2. Paul Trani @paultrani ptrani@adobe.com • 15 years design experience • 4 year old at heart
  3. 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.
  4. 4. Examples • www.awwwards.com • Letter Heads • Cursor Monster • Fish Burst Game
  5. 5. BENEFITS OF CSS3
  6. 6. Reduced development and maintenance time • Less images, Flash, JavaScript • Streamlined markup
  7. 7. 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
  8. 8. Better search engine placement • Google uses speed as ranking factor • Real text instead of image or Flash text
  9. 9. Increased usability • Real text • Optimized styles based on device capabilities
  10. 10. BROWSER SUPPORT
  11. 11. Progressive Enhancement • Deliver the best possible experience to the widest possible audience. • Should be as fully featured and functional as possible.
  12. 12. http://www.w3.org/TR/CSS/ www.w3.org/Style/CSS/current-work
  13. 13. 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
  14. 14. CREATIVE CSS3
  15. 15. • RGBa & HSLa • Gradients • Rounded Corners • Box Shadow • Multiple Backgrounds • @font-face • Media Queries • Visual Effects and Animation
  16. 16. COLOR • RGBa (255, 255, 255, 0.5); • HSLa (360, 100%, 50%, 0.5);
  17. 17. 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
  18. 18. border-radius border-radius: 10px;
  19. 19. box-shadow box-shadow (horizontal offset, vertical offset, optional blur distance, optional distance, optional color, optional inset)
  20. 20. text-shadow
  21. 21. @ font-face
  22. 22. MEDIA QUERIES
  23. 23. CSS Media Queries for Mobile • min-width • max-width • device-width • min-device-width • max-device-width • orientation • -webkit-min-device-pixel-ratio
  24. 24. CSS Media Queries <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />
  25. 25. TRANSFORMS
  26. 26. 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
  27. 27. WHAT’S NEXT
  28. 28. http://lab.simurai.com/css/tilt-shift Adobe Edge
  29. 29. THANK YOU
  30. 30. • 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

×