In this article we are going to learn, how to use Opacity, Scale and box shadow and Zooming effects in CSS 3.
NOTICE: Below CSS3 effects may not work in all browser, I have used Google Chrome browser during this demonstration. You may also use browser specific prefixes to get it working in almost all browsers.
Opacity effects
Opacity is used to specify the level of transparency with CSS.
This article is continuation of my previous article How to use Transition,Text-Shadow and Border-Radius effect in CSS 3?
Get HTML 5 and CSS 3 Online Training and 500+ ASP.NET web development Tips & Tricks here.
<style type="text/css">
a.class1
{
font-size: 50px;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5);
border-radius: 10px;
border: 1px solid #c0c0c0;
padding: 10px;
background-color: Yellow;
opacity: 0.5;
}
a.class1:hover
{
background-color: #690;
opacity: 0.5;
}
</style>
<a href="http://www.dotnetfunda.com" class="class1">DotNetFunda.com</a>
In the above code snippet, notice the opacity
property that is 0.5, it means 50% opaque.
Output
Scale and box shadow effects
Scale is used to change the size of the element based on its width and height ratio.
Box shadow is used to create a drop shadow beneath the element.
<style type="text/css">
ul.myGallery li
{
float: left;
list-style: none;
border: 1px solid #c0c0c0;
}
ul.myGallery li:hover
{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
-webkit-box-shadow: 4px 4px 10px red;
-moz-box-shadow: 4px 4px 10px red;
box-shadow: 4px 4px 10px red;
}
</style>
<div style="background-color: #efefef; padding: 50px; height: 150px;">
<ul class="myGallery">
<li><img src="images/dotnetlogo.gif" /></li>
<li><img src="images/iconnectin.gif" /></li>
<li><img src="images/itfunda.gif" /></li>
<li><img src="images/myfundalogo.gif" /></li>
</ul>
</div>
In the above code snippet, we have specified scale
property that accepts the scale ratio as parameter. Accordingly it changes the height and width of the element. Here scale(1.5) means increase the height and width of the element to 1.5 times.
The box-shadow
property displays the shadow beneath the element. Where 1st parameter is shadow from left, 2nd parameter is shadow from top and 3rd parameter is the intensity of the shadow where 4th parameter is the color of the shadow.
If you have already read my last article, you must be knowing the -webkit-, -moz- and -o- is nothing but the browser specific prefixes.
Output
Zooming effects
Smooth zooming in CSS3 can be done using transition css style by transitioning the transform css property.
<style type="text/css">
ul.myGallery li
{
float: left;
list-style: none;
border: 1px solid #c0c0c0;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
ul.myGallery li:hover
{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
-webkit-box-shadow: 4px 4px 10px red;
-moz-box-shadow: 4px 4px 10px red;
box-shadow: 4px 4px 10px red;
}
</style>
<ul class="myGallery">
<li>
<img src="images/dotnetlogo.gif" /></li>
<li>
<img src="images/iconnectin.gif" /></li>
<li>
<img src="images/itfunda.gif" /></li>
<li>
<img src="images/myfundalogo.gif" /></li>
</ul>
In the above code snippet, we have written a transform css property to do the transition.
Transition has following paramters
- 1st parameter is the transition property
- 2nd parameter is the transition duration
- 3rd parameter is the transition timing function (ease | linear | ease-in |ease-out |ease-in-out|cubic-Bezier)
On mouse over on these elements, the transform and box-shadow properties have been changed. As we have specified the transition properties on these elements so when user mouse over on the element, the scale and box-shadow will change by taking care of the transition effects that gives zooming effect.
Output
As I can't show the zooming effect in the image so the above code snippet looks almost similar to the above one. However you can try on your machine and you will be surprised how it works.
Hope this article was useful. Thanks for reading and hope that you liked it.
Keep an eye on forth coming articles on CSS3. To read my series of articles, click here.