Published on: 09 May, 2014

CSS3 Opacity

Posted by andy | 976 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus

So what is actually opacity? CSS3 Opacity defines a transparency level of an element. The property value of opacity is range from 0 to 1.

CSS3 Opacity Example

Opacity applied at 0.7
Opacity applied at 0.4
<style type="text/css">
	.example1, .example2{
		padding:30px;
		text-align:center;
		opacity:0.7;
		background:#af1111;
		margin-bottom:20px;
	}

	.example2{
		opacity:0.4;
	}
</style>
<div class="example1">
	Opacity applied at 0.7
</div>

<div class="example2">
	Opacity applied at 0.4
</div>

CSS3 Opacity Generator

Alternatively, you can see our interactive demo by using our CSS3 Opacity Generator.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 13 July, 2016
Ever imagine that you can now easily create a bouncing ball using CSS3 only? No javascript or image is required to do this. Thanks to the powerful attribute of CSS3 animation.
Published on: 24 March, 2016
You probably never thought about creating a heart shape completely using CSS3. Furthermore, you can include an animation to show the heart is actually beating. This is can be easily done with CSS3 animation. No flash or images are required.