How to use Opacity, Scale and box shadow and Zooming in CSS 3?

Sheonarayan
Posted by in CSS 3 category on for Beginner level | Points: 250 | Views : 16663 red flag
Rating: 4 out of 5  
 3 vote(s)

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.

Page copy protected against web site content infringement by Copyscape

About the Author

Sheonarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com

Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Vinay13mar on: 11/9/2012 | Points: 25
Hi this is really nice article please check this article below article also.

http://www.dotnetpools.com/Article/ArticleDetiail/?articleId=68&title=Zoom Effect Using Jquery In Asp.Net

Login to post response

Comment using Facebook(Author doesn't get notification)