Css3 for advanced design
Download
1 / 32

cSS3 for Advanced Design - PowerPoint PPT Presentation


  • 84 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
Css3 for advanced design

Paul Trani, Adobe Evangelist

cSS3 for Advanced Design



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 tablets. CSS3 gives web sites a dynamic, interactive capability and greater

  • www.awwwards.com

  • Letter Heads

  • Cursor Monster

  • Fish Burst Game


Benefits of css3
Benefits of CSS3 tablets. CSS3 gives web sites a dynamic, interactive capability and greater


Reduced development and maintenance time
Reduced development and maintenance time tablets. CSS3 gives web sites a dynamic, interactive capability and greater

  • Less images, Flash, JavaScript

  • Streamlined markup


Increased page performance
Increased page performance tablets. CSS3 gives web sites a dynamic, interactive capability and greater

  • 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 tablets. CSS3 gives web sites a dynamic, interactive capability and greater

  • Google uses speed as ranking factor

  • Real text instead of image or Flash text


Increased usability
Increased usability tablets. CSS3 gives web sites a dynamic, interactive capability and greater

  • Real text

  • Optimized styles based on device capabilities


Browser support
Browser support tablets. CSS3 gives web sites a dynamic, interactive capability and greater


Progressive enhancement
Progressive Enhancement tablets. CSS3 gives web sites a dynamic, interactive capability and greater

  • Deliver the best possible experience to the widest possible audience.

  • Should be as fully featured and functional as possible.


http://www.w3.org/TR/CSS/ tablets. CSS3 gives web sites a dynamic, interactive capability and greater

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


Use the parts of css3 that
Use the parts of CSS3 that: tablets. CSS3 gives web sites a dynamic, interactive capability and greater

  • 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


Creative css3
Creative CSS3 tablets. CSS3 gives web sites a dynamic, interactive capability and greater


  • RGBa tablets. CSS3 gives web sites a dynamic, interactive capability and greater & HSLa

  • Gradients

  • Rounded Corners

  • Box Shadow

  • Multiple Backgrounds

  • @font-face

  • Media Queries

  • Visual Effects and Animation


Color
COLOR tablets. CSS3 gives web sites a dynamic, interactive capability and greater

  • RGBa (255, 255, 255, 0.5);

  • HSLa (360, 100%, 50%, 0.5);


Gradients
Gradients tablets. CSS3 gives web sites a dynamic, interactive capability and greater

  • 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


Border radius border radius 10px
border-radius tablets. CSS3 gives web sites a dynamic, interactive capability and greater border-radius: 10px;


box-shadow tablets. CSS3 gives web sites a dynamic, interactive capability and greater box-shadow (horizontal offset, vertical offset, optional blur distance, optional distance, optional color, optional inset)


Text shadow
text-shadow tablets. CSS3 gives web sites a dynamic, interactive capability and greater


@ font face
@ font-face tablets. CSS3 gives web sites a dynamic, interactive capability and greater


Media queries
Media queries tablets. CSS3 gives web sites a dynamic, interactive capability and greater


Css media queries for mobile
CSS Media Queries for Mobile tablets. CSS3 gives web sites a dynamic, interactive capability and greater

  • min-width

  • max-width

  • device-width

  • min-device-width

  • max-device-width

  • orientation

  • -webkit-min-device-pixel-ratio


Css media queries
CSS Media Queries tablets. CSS3 gives web sites a dynamic, interactive capability and greater

<link rel="stylesheet" type="text/css"

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

href="mobile.css" />


Transforms
TRANSFORMS tablets. CSS3 gives web sites a dynamic, interactive capability and greater


Transforms – You can transform anything! tablets. CSS3 gives web sites a dynamic, interactive capability and greater 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


What s next
What’s next tablets. CSS3 gives web sites a dynamic, interactive capability and greater


Adobe edge
Adobe Edge tablets. CSS3 gives web sites a dynamic, interactive capability and greater

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


Thank you
Thank you tablets. CSS3 gives web sites a dynamic, interactive capability and greater


  • Slides posted at tablets. CSS3 gives web sites a dynamic, interactive capability and greater 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