Awesome CSS3 Effects

What is CSS3?

Before going to the CSS3 effects, we will have look at what is css3 and what are the new things in CSS3. CSS3 is the latest evolution of the Cascading Style Sheets language and we can say it is an extension of css 2 features. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, multiple background images, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts. In other way we can say, css3 makes the lives of UI developers, much better, rather than playing with lot of images for for border radius, multiple background images, gradient background and lot of Javascript or jquery for simple animations or effects.

CSS3 Effects

All of us, when we search through, have seen almost all the web sites with different kind of animations of effects. With the introduction of CSS3, these kinds of animations or effects are added with css 3 effects. CSS3 animations makes or helps us to add awesome css 3 effects to our web pages. Moving objects, fade in fade out effects, spinning effect, cross fading effects, displaying elements or texts when we hover any element, etc… are the css 3 effects which can be added in our web pages. So we will see few of the examples using css3 animation.

Read more about Principles of CSS3 Animations

Overlay effect and title with CSS3

We will see an example of overlay effect and title with css3. The following code shows, how to add overlay and title.

<a class="demo1" title="Awesome CSS3 Animation Effects Demo" href="#"><img src="flower-1.jpg" alt="Awesome CSS3 Animation Effects Demo" /></a>

CSS 3 for the effects

.demo1 {
		display: inline-block;
		overflow: hidden;
		position: relative;
		text-align: center;
		text-decoration: none;
	}

	.demo1:before {
		background-color: rgb(0, 0, 0);
		content: "";
		display: block;
		height: 100%;
		opacity: 0;
		position: absolute;
		width: 100%;
		z-index: 2;
	}

	.demo1:after {
		color: rgba(255, 255, 255, 0);
		content: attr(title);
		display: block;
		font-family: Arial;
		font-size: 30px;
		font-weight: bold;
		padding: 0 3%;
		position: absolute;
		text-transform: uppercase;
		top: 50%;
		-webkit-transform-origin: 50% 0%;
		-ms-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform: scaleX(3) translateY(-50%);
		-ms-transform: scaleX(3) translateY(-50%);
		transform: scaleX(3) translateY(-50%);
		width: 94%;
		z-index: 3;
	}
       .demo1:after {
		-webkit-transition: all 350ms ease-in-out;
		-moz-transition: all 350ms ease-in-out;
		-o-transition: all 350ms ease-in-out;
		transition: all 350ms ease-in-out;
	}
       .demo1:after {
		-webkit-transform: scaleY(5) translateY(-50%);
		-ms-transform: scaleY(5) translateY(-50%);
		transform: scaleY(5) translateY(-50%);
	}
	.demo1 img {
		border: none;
		display: block;
		z-index: 1;
	}
	.demo1:hover:before {
		opacity: 0.6;
	}

	.demo1:hover:after {
		color: rgba(255, 255, 255, 1);
		-webkit-transform: scaleX(1) translateY(-50%);
		-ms-transform: scaleX(1) translateY(-50%);
		transform: scaleX(1) translateY(-50%);
	}

	.demo1:hover:after {
		-webkit-transform: scaleY(1) translateY(-50%);
		-ms-transform: scaleY(1) translateY(-50%);
		transform: scaleY(1) translateY(-50%);
	}

First we added styles for the ‘a’ tag, then using ::after and ::before add pseudo elements for the demo1 wrapper. Also we add the transition and transform css3 effects for the pseudo elements. Then comes the even for the animations to happen. When we hover the element, we do the animation of the pseudo elements. As a result, an overlay comes over the images, and the title shows, which is added with the ‘content’ property of css3, and the title value is the title attribute of the anchor tag.

Demo for CSS3 effects: Overlay effect and title with CSS3

Just we have seen one example for the awesome css3 effects for your web pages. The same way we can add different types of awesomeness to your web pages using css 3 effects. CSS3 animations for creating effects, makes the css coding interesting. You can see all the demos for the css 3 effects.