Published on: 09 May, 2014

CSS3 Opacity

Posted by andy | 1620 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.