css3 for advanced design
Download
Skip this Video
Download Presentation
cSS3 for Advanced Design

Loading in 2 Seconds...

play fullscreen
1 / 32

cSS3 for Advanced Design - PowerPoint PPT Presentation


  • 86 Views
  • Uploaded on

Paul Trani , Adobe Evangelist. cSS3 for Advanced Design. Paul Trani @ paultrani [email protected] 15 years design experience 4 year old at heart.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'cSS3 for Advanced Design' - kobe


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide2
Paul Trani
slide3
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.
examples
Examples
  • www.awwwards.com
  • Letter Heads
  • Cursor Monster
  • Fish Burst Game
reduced development and maintenance time
Reduced development and maintenance time
  • Less images, Flash, JavaScript
  • Streamlined markup
increased page performance
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

better search engine placement
Better search engine placement
  • Google uses speed as ranking factor
  • Real text instead of image or Flash text
increased usability
Increased usability
  • Real text
  • Optimized styles based on device capabilities
progressive enhancement
Progressive Enhancement
  • Deliver the best possible experience to the widest possible audience.
  • Should be as fully featured and functional as possible.
slide14
http://www.w3.org/TR/CSS/

www.w3.org/Style/CSS/current-work

use the parts of css3 that
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

slide17
RGBa & HSLa
  • Gradients
  • Rounded Corners
  • Box Shadow
  • Multiple Backgrounds
  • @font-face
  • Media Queries
  • Visual Effects and Animation
color
COLOR
  • RGBa (255, 255, 255, 0.5);
  • HSLa (360, 100%, 50%, 0.5);
gradients
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
slide21
box-shadowbox-shadow (horizontal offset, vertical offset, optional blur distance, optional distance, optional color, optional inset)
css media queries for mobile
CSS Media Queries for Mobile
  • min-width
  • max-width
  • device-width
  • min-device-width
  • max-device-width
  • orientation
  • -webkit-min-device-pixel-ratio
css media queries
CSS Media Queries

media="screen and (max-device-width: 480px)"

href="mobile.css" />

slide28
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

adobe edge
Adobe Edge

http://lab.simurai.com/css/tilt-shift

slide32
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
ad