Css3
-
Upload
bharti-gurav -
Category
Technology
-
view
112 -
download
2
description
Transcript of Css3
![Page 1: Css3](https://reader036.fdocuments.in/reader036/viewer/2022070303/54b7b7994a7959bf688b474b/html5/thumbnails/1.jpg)
CSS3
![Page 2: Css3](https://reader036.fdocuments.in/reader036/viewer/2022070303/54b7b7994a7959bf688b474b/html5/thumbnails/2.jpg)
Before we start
I don’t claim to have infallible knowledge on CSS3. If you find any of this information to be incorrect or inefficient let me know, I’d love to hear your thoughts.
![Page 3: Css3](https://reader036.fdocuments.in/reader036/viewer/2022070303/54b7b7994a7959bf688b474b/html5/thumbnails/3.jpg)
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
![Page 4: Css3](https://reader036.fdocuments.in/reader036/viewer/2022070303/54b7b7994a7959bf688b474b/html5/thumbnails/4.jpg)
CSS3 new properties
•Borders
•Backgrounds
•Transitions
•Animation
![Page 5: Css3](https://reader036.fdocuments.in/reader036/viewer/2022070303/54b7b7994a7959bf688b474b/html5/thumbnails/5.jpg)
Description
•Border-radius – creates rounded borders
•Box-shadow – adds shadow to boxes
•Border-image – uses an image as the border
![Page 6: Css3](https://reader036.fdocuments.in/reader036/viewer/2022070303/54b7b7994a7959bf688b474b/html5/thumbnails/6.jpg)
Border-radius
•W3C specification
Border-radius
Border-top-left-radius
Border-top-right-radius
Border-bottom-right-radius
Border-bottom-left-radius
•Mozilla Implementation
-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
Syntax:
border-radius:25px; // length
![Page 7: Css3](https://reader036.fdocuments.in/reader036/viewer/2022070303/54b7b7994a7959bf688b474b/html5/thumbnails/7.jpg)
Box-shadow
Syntax:
Box-shadow: box-shadow: none | <shadow> [,<shadow>]*where <shadow> is defined as:
<offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>
![Page 8: Css3](https://reader036.fdocuments.in/reader036/viewer/2022070303/54b7b7994a7959bf688b474b/html5/thumbnails/8.jpg)
Examples
Example 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;}
![Page 9: Css3](https://reader036.fdocuments.in/reader036/viewer/2022070303/54b7b7994a7959bf688b474b/html5/thumbnails/9.jpg)
Border-image
Syntax:
Border-image: <source> slice width outset repeat;
#round{
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
![Page 10: Css3](https://reader036.fdocuments.in/reader036/viewer/2022070303/54b7b7994a7959bf688b474b/html5/thumbnails/10.jpg)
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.
![Page 11: Css3](https://reader036.fdocuments.in/reader036/viewer/2022070303/54b7b7994a7959bf688b474b/html5/thumbnails/11.jpg)
CSS3 Transitions
With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
Transition properties:•Transition-property
•Transition-duration
•Transition-timing-function
•Transition-delay
![Page 12: Css3](https://reader036.fdocuments.in/reader036/viewer/2022070303/54b7b7994a7959bf688b474b/html5/thumbnails/12.jpg)
CSS3 Animations
What is Animation?
The technique of photographing successive drawings or positions of puppets or models to create an illusion of movement when the film is shown 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 a selector 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/
![Page 13: Css3](https://reader036.fdocuments.in/reader036/viewer/2022070303/54b7b7994a7959bf688b474b/html5/thumbnails/13.jpg)
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
![Page 14: Css3](https://reader036.fdocuments.in/reader036/viewer/2022070303/54b7b7994a7959bf688b474b/html5/thumbnails/14.jpg)
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/
![Page 15: Css3](https://reader036.fdocuments.in/reader036/viewer/2022070303/54b7b7994a7959bf688b474b/html5/thumbnails/15.jpg)
End