css3 new properties€¦ · transition (1) allows you to change property values smoothly over a...
TRANSCRIPT
![Page 2: CSS3 new properties€¦ · transition (1) allows you to change property values smoothly over a given duration. The transition effect will start when the specified CSS property](https://reader036.vdocument.in/reader036/viewer/2022070808/5f0755047e708231d41c7596/html5/thumbnails/2.jpg)
shadows
2
![Page 3: CSS3 new properties€¦ · transition (1) allows you to change property values smoothly over a given duration. The transition effect will start when the specified CSS property](https://reader036.vdocument.in/reader036/viewer/2022070808/5f0755047e708231d41c7596/html5/thumbnails/3.jpg)
3
box-shadow
The box-shadow property attaches one or more shadows to an element.
TRY IT!
![Page 4: CSS3 new properties€¦ · transition (1) allows you to change property values smoothly over a given duration. The transition effect will start when the specified CSS property](https://reader036.vdocument.in/reader036/viewer/2022070808/5f0755047e708231d41c7596/html5/thumbnails/4.jpg)
4
text-shadow
The text-shadow property adds shadow to text.
TRY IT!
![Page 5: CSS3 new properties€¦ · transition (1) allows you to change property values smoothly over a given duration. The transition effect will start when the specified CSS property](https://reader036.vdocument.in/reader036/viewer/2022070808/5f0755047e708231d41c7596/html5/thumbnails/5.jpg)
gradient
5
![Page 6: CSS3 new properties€¦ · transition (1) allows you to change property values smoothly over a given duration. The transition effect will start when the specified CSS property](https://reader036.vdocument.in/reader036/viewer/2022070808/5f0755047e708231d41c7596/html5/thumbnails/6.jpg)
6
gradient (1)
• Linear Gradients (goes down/up/left/right/diagonally) • Radial Gradients (defined by their center)
![Page 7: CSS3 new properties€¦ · transition (1) allows you to change property values smoothly over a given duration. The transition effect will start when the specified CSS property](https://reader036.vdocument.in/reader036/viewer/2022070808/5f0755047e708231d41c7596/html5/thumbnails/7.jpg)
7
gradient (2)
![Page 9: CSS3 new properties€¦ · transition (1) allows you to change property values smoothly over a given duration. The transition effect will start when the specified CSS property](https://reader036.vdocument.in/reader036/viewer/2022070808/5f0755047e708231d41c7596/html5/thumbnails/9.jpg)
transform
9
![Page 12: CSS3 new properties€¦ · transition (1) allows you to change property values smoothly over a given duration. The transition effect will start when the specified CSS property](https://reader036.vdocument.in/reader036/viewer/2022070808/5f0755047e708231d41c7596/html5/thumbnails/12.jpg)
12
transform (3) VIEW ALL
what is missing? Perspective!
The perspective property defines how many pixels a 3D element is placed from the view. This property allows you to change the perspective on how 3D
elements are viewed.
N.B. When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.
![Page 13: CSS3 new properties€¦ · transition (1) allows you to change property values smoothly over a given duration. The transition effect will start when the specified CSS property](https://reader036.vdocument.in/reader036/viewer/2022070808/5f0755047e708231d41c7596/html5/thumbnails/13.jpg)
13
transform (4) VIEW ALL
3D rotation without perspective 3D rotation with perspective
Wow!! much better!
![Page 14: CSS3 new properties€¦ · transition (1) allows you to change property values smoothly over a given duration. The transition effect will start when the specified CSS property](https://reader036.vdocument.in/reader036/viewer/2022070808/5f0755047e708231d41c7596/html5/thumbnails/14.jpg)
transitions
14
![Page 15: CSS3 new properties€¦ · transition (1) allows you to change property values smoothly over a given duration. The transition effect will start when the specified CSS property](https://reader036.vdocument.in/reader036/viewer/2022070808/5f0755047e708231d41c7596/html5/thumbnails/15.jpg)
15
transition (1)
allows you to change property values smoothly over a given duration.
The transition effect will start when the specified CSS property changes value.
VIEW ALL
this will change the width value on mouseover
However, it is not a nice effect!
![Page 16: CSS3 new properties€¦ · transition (1) allows you to change property values smoothly over a given duration. The transition effect will start when the specified CSS property](https://reader036.vdocument.in/reader036/viewer/2022070808/5f0755047e708231d41c7596/html5/thumbnails/16.jpg)
16
transition (2)
we need to add a transition!
VIEW ALL
![Page 18: CSS3 new properties€¦ · transition (1) allows you to change property values smoothly over a given duration. The transition effect will start when the specified CSS property](https://reader036.vdocument.in/reader036/viewer/2022070808/5f0755047e708231d41c7596/html5/thumbnails/18.jpg)
18
transition (4) VIEW ALL
properties can be specified one by one
shorthand
![Page 22: CSS3 new properties€¦ · transition (1) allows you to change property values smoothly over a given duration. The transition effect will start when the specified CSS property](https://reader036.vdocument.in/reader036/viewer/2022070808/5f0755047e708231d41c7596/html5/thumbnails/22.jpg)
animations
22
![Page 23: CSS3 new properties€¦ · transition (1) allows you to change property values smoothly over a given duration. The transition effect will start when the specified CSS property](https://reader036.vdocument.in/reader036/viewer/2022070808/5f0755047e708231d41c7596/html5/thumbnails/23.jpg)
23
animation (1)
An animation lets an element gradually change from one style to another.
To use CSS3 animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.
VIEW ALL
ese4