kobe
Uploaded by
32 SLIDES
459 VUES
320LIKES

Enhancing Web Experiences with CSS3: A Deep Dive into Advanced Design Techniques

DESCRIPTION

Explore the transformative power of CSS3 in modern web design with insights from Adobe Evangelist Paul Trani. With over 15 years of design experience, Paul highlights how CSS3 enables dynamic, interactive websites that improve usability across mobile phones and tablets. Discover the benefits of reduced development time, improved page performance, and enhanced SEO. Learn about essential features like media queries, gradients, and visual effects that deliver a rich user experience while maintaining compatibility with older browsers. Elevate your design skills with CSS3 today!

1 / 32

Télécharger la présentation

Enhancing Web Experiences with CSS3: A Deep Dive into Advanced Design Techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

Playing audio...

  1. Paul Trani, Adobe Evangelist cSS3 for Advanced Design

  2. Paul Trani • @paultraniptrani@adobe.com • 15 years design experience • 4 year old at heart

  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. Examples • www.awwwards.com • Letter Heads • Cursor Monster • Fish Burst Game

  5. Benefits of CSS3

  6. Reduced development and maintenance time • Less images, Flash, JavaScript • Streamlined markup

  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. Better search engine placement • Google uses speed as ranking factor • Real text instead of image or Flash text

  9. Increased usability • Real text • Optimized styles based on device capabilities

  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. http://www.w3.org/TR/CSS/ www.w3.org/Style/CSS/current-work

  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. Creative CSS3

  15. RGBa & HSLa • Gradients • Rounded Corners • Box Shadow • Multiple Backgrounds • @font-face • Media Queries • Visual Effects and Animation

  16. COLOR • RGBa (255, 255, 255, 0.5); • HSLa (360, 100%, 50%, 0.5);

  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. border-radiusborder-radius: 10px;

  19. box-shadowbox-shadow (horizontal offset, vertical offset, optional blur distance, optional distance, optional color, optional inset)

  20. text-shadow

  21. @ font-face

  22. Media queries

  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. CSS Media Queries <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />

  25. TRANSFORMS

  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. What’s next

  28. Adobe Edge http://lab.simurai.com/css/tilt-shift

  29. Thank you

  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

More Related