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

▶
css3 new properties
SMART_READER_LITE
LIVE PREVIEW

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

Nov 27, 2022 87 likes •352 views

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

slide-1
SLIDE 1

CSS3 new properties

1

http://www.w3schools.com/cssref

slide-2
SLIDE 2

shadows

2

slide-3
SLIDE 3

3

box-shadow

The box-shadow property attaches one or more shadows to an element.

TRY IT!

slide-4
SLIDE 4

4

text-shadow

The text-shadow property adds shadow to text.

TRY IT!

slide-5
SLIDE 5

gradient

5

slide-6
SLIDE 6

6

gradient (1)

  • Linear Gradients (goes down/up/left/right/diagonally)
  • Radial Gradients (defined by their center)
slide-7
SLIDE 7

7

gradient (2)

slide-8
SLIDE 8

8

gradient (3)

MORE

slide-9
SLIDE 9

transform

9

slide-10
SLIDE 10

10

transform (1)

VIEW ALL

slide-11
SLIDE 11

11

transform (2)

VIEW ALL

3D rotations!

slide-12
SLIDE 12

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.

slide-13
SLIDE 13

13

transform (4)

VIEW ALL

3D rotation without perspective 3D rotation with perspective

Wow!! much better!

slide-14
SLIDE 14

transitions

14

slide-15
SLIDE 15

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!

slide-16
SLIDE 16

16

transition (2)

we need to add a transition!

VIEW ALL

slide-17
SLIDE 17

17

transition (3)

VIEW ALL

slide-18
SLIDE 18

18

transition (4)

VIEW ALL

properties can be specified one by one shorthand

slide-19
SLIDE 19

19

transition (5)

VIEW ALL example (ese2)

slide-20
SLIDE 20

20

transition (6)

VIEW ALL

cooler example! (ese3)

slide-21
SLIDE 21

21

transition (7)

VIEW ALL

result

slide-22
SLIDE 22

animations

22

slide-23
SLIDE 23

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

slide-24
SLIDE 24

24

animation (2)

VIEW ALL