CSS3 Effects

« Previous Tutorial Next Tutorial »

Cascading Style Sheet (CSS) properties provide you with various functionalities to make your Web page more dynamic and attractive. Some of these functionalities are applying effects, creating frames, and customizing the appearance of controls on a Web page.

Effects are optical illusions created by animating images and elements in a Web page. These effects can be made to appear in a Web page on various events, such as mouse hover and mouse click. For instance, you can set the transition effect to appear between two images when a mouse is clicked.

Different Types of Effects in CSS

As already said, effects are the results of action that are carried out to change the look and feel of HTML elements.

CSS allows you to apply different types of effects on different types of HTML controls, such as buttons, menus, images, and tables.

The following are the types of effects that can be applied on a Web page :

CSS3 Opacity Effects

The opacity effects modify the opacity of an HTML element. For instance, using these effects, you can make an element transparent so that any other element or background behind that element gets visible.

Learn in detail about CSS3 Opacity Effects at CSS3 Opacity.

CSS3 Transition Effects

The transition effects change the states of an element.

Transition is a process of passing an act from one state to another.

Generally, whenever the value of a CSS property changes, the result is instantly rendered on a Web page. However, when you apply transition effect on an element, it slowly transits from its old state to new.

Learn in detail about CSS3 Transition Effect at CSS3 Transitions Effect.

CSS3 Transformation Effects

The transformation effects changes the position or direction of the content of your Web page.

CSS allows you to apply this effect to the Web content with the help of the transform property.

Using CSS3, you can apply both the transformation properties :

CSS3 Animation Effects

The animation effects refers to optical illusions, which are created by animating images and elements in a Web page.

Learn in detail about CSS3 Animation Effect at CSS3 Animation Effect.

« Previous Tutorial Next Tutorial »


Quick Links
Signup - Login - Give Online Test