CSS3 new properties http://www.w3schools.com/cssref 1 shadows 2 - PowerPoint PPT Presentation

CSS3 new properties http://www.w3schools.com/cssref 1

shadows 2

box-shadow TRY IT! The box-shadow property attaches one or more shadows to an element. 3

text-shadow TRY IT! The text-shadow property adds shadow to text. 4

gradient 5

gradient (1) • Linear Gradients (goes down/up/left/right/diagonally) • Radial Gradients (de fi ned by their center) 6

gradient (2) 7

gradient (3) MORE 8

transform 9

transform (1) VIEW ALL 10

transform (2) VIEW ALL 3D rotations! 11

transform (3) VIEW ALL what is missing? Perspective ! The perspective property de fi nes 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 de fi ning the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself. 12

transform (4) VIEW ALL 3D rotation without perspective 3D rotation with perspective Wow!! much better! 13

transitions 14

transition (1) VIEW ALL allows you to change property values smoothly over a given duration. The transition e ff ect will start when the speci fi ed CSS property changes value. this will change the width value on mouseover However, it is not a nice e ff ect! 15

transition (2) VIEW ALL we need to add a transition! 16

transition (3) VIEW ALL 17

transition (4) VIEW ALL properties can be speci fi ed one by one shorthand 18

transition (5) VIEW ALL example (ese2) 19

transition (6) VIEW ALL cooler example! (ese3) 20

transition (7) VIEW ALL result 21

animations 22

animation (1) VIEW ALL An animation lets an element gradually change from one style to another. To use CSS3 animation, you must fi rst specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times. ese4 23

animation (2) VIEW ALL 24