Css3

269 views

Published on

CSS 3 properties and animations

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
269
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css3

  1. 1. CSS3
  2. 2. Before we start I don’t claim to have infallible knowledgeon CSS3. If you find any of thisinformation to be incorrect or inefficient letme know, I’d love to hear your thoughts.
  3. 3. CSS 3• CSS is used to control style and layout of the web pages• CSS3 is the latest standard for css. Although the specification for css3 is still under development by W3C. However, many properties of css3 are supported by the modern browsers
  4. 4. CSS3 new properties•Borders•Backgrounds•Transitions•Animation
  5. 5. Description•Border-radius – creates rounded borders•Box-shadow – adds shadow to boxes•Border-image – uses an image as the border
  6. 6. Border-radius •W3C specification •Mozilla Implementation Border-radius -moz-border-radius Border-top-left-radius -moz-border-radius-topleft Border-top-right-radius -moz-border-radius-topright Border-bottom-right-radius -moz-border-radius-bottomright Border-bottom-left-radius -moz-border-radius-bottomleft Syntax: border-radius:25px; // length
  7. 7. Box-shadowSyntax:Box-shadow: box-shadow: none |<shadow> [,<shadow>]*where <shadow> is defined as:<offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>
  8. 8. ExamplesExample A shows a shadow offset to the left and top by 5px:#Example_A {-moz-box-shadow: -5px -5px #888;-webkit-box-shadow: -5px -5px #888;box-shadow: -5px -5px #888;}Example B shows the same shadow with a blur distance of 5px:#Example_B {-moz-box-shadow: -5px -5px 5px #888;-webkit-box-shadow: -5px -5px 5px #888;box-shadow: -5px -5px 5px #888;}
  9. 9. Border-imageSyntax:Border-image: <s o urc e > s lic e wid th o uts e t re p e a t;#round{-moz-border-image:url(border.png) 30 30 round; /* Firefox */-webkit-border-image:url(border.png) 30 30 round; /* Safari andChrome */-o-border-image:url(border.png) 30 30 round; /* Opera */border-image:url(border.png) 30 30 round;}
  10. 10. Browser Support• Internet Explorer 9 supports two of the new border properties.• Firefox requires the prefix -moz- for border-image.• Chrome and Safari requires the prefix -webkit- for border- image.• Opera requires the prefix -o- for border-image.• Opera supports the new border properties.
  11. 11. CSS3 TransitionsWith CSS3, we can add an effect when changing from onestyle to another, without using Flash animations orJavaScripts.Transition properties:•Transition-property•Transition-duration•Transition-timing-function•Transition-delay
  12. 12. CSS3 AnimationsWhat is Animation?The technique of photographing successive drawings or positions ofpuppets or models to create an illusion of movement when the film isshown as a sequence.How:When the animation is created in the @keyframe, bind it to a selector,otherwise the animation will have no effect. Bind the animation to aselector by specifying at least these two CSS3 animation properties:•Specify the name of the animation•Specify the duration of the animation•Working draft: http://www.w3.org/TR/2009/WD-css3-animations-20090320/
  13. 13. Timing Functions• Declared using animation-timing-function• Value Description• linear The animation has the same speed from start to end• ease• Default. The animation has a slow start, then fast, before it ends slowly• ease-in The animation has a slow start• ease-out The animation has a slow end• ease-in-out The animation has both a slow start and a slow end• cubic-bezier(n,n,n,n) Possible values are numeric values from 0 to 1• Very useful tool for creating Cubic-Bezer code: http://cubic-bezier.com/#.14,.98,.91,.11
  14. 14. Important Links• http://www.sitepoint.com/build-awesome-apps-with-css3- animations/#fbid=siBj6rCkHLg• http://tympanus.net/Tutorials/AnimatedButtons/index4.html• http://chrisyaxley.co.uk/css3animations/swingAndFall.shtml• http://caniuse.com/css-animation• http://daneden.me/animate/
  15. 15. End

×