Published on: 09 May, 2014

CSS3 Opacity

Posted by andy | 2145 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: 20 January, 2018
By default, a table in HTML will contain a default value of cellpadding and cellspacing. This can be easily removed if you are using tag properties attached to the HTML table itself. For example, you can see the following image. I have included a border to the table so we can exactly see the cellpadding and cellspacing applied to the table.
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.