W3.CSSLesson 45Free preview
W3.CSS Effects
This lesson is part of W3.CSS · All levels
Summary
Page Effects collects a variety of visual effects that can be added without changing the HTML structure, such as hovered oscillations and card shadows. Most of the effects use the hover class, the rest using the CSS transition and filter properties. Because the effect is only visual, it is safely added at the end of the refinement stage. (W3.CSS)
Key points
- A hover class such as .w3-hover-opacity changes the look when the cursor is attached
- And it gives the impression of a stacked card. (.w3-hover-shadow) (.w3-card-4)
- Property transition makes a change of color or size go smoothly
- Filter effects such as grayscale can be installed via CSS or inline style
- The effect doesn't change the content, it just beautifies the look.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.