Social Icons

twitter facebook google plus

Pages

Sunday, 4 May 2014

Thanks for your great support..

Hello friend.
firstly I want to say you very thank you for your great support and love my blogs.
now i started to write blogs, article on http://www.c-sharpcorner.com/ . if you really like
my blogs then please please read all my blogs and articles form here:
http://www.c-sharpcorner.com/authors/2cb323/sanjay-singh.aspx .

thank you !!!
Posted by at 0 comments

Monday, 7 April 2014

How to Rotate an Image using CSS3

Hello friends..
        How are you friends? I think you all are very well. today i'll show you very interesting programming
using CSS3 with Hover effect..
Just copy the given code & save with .html and open it with any browser....

code
<html>
<head>
<style>
.box
{
width:200px;
height:200px;
margin:100px;
box-shadow:0px 0px 10px 10px #666666;
background-color:#F00;
-webkit-transition:width 8s, height 8s, background-color 8s, -webkit-transform 8s;
-moz-transition:width 8s, height 8s, background-color 8s, -moz-transform 8s;
-op-transition:width 8s, height 8s, background-color 8s, -op-transform 8s;

}
.box:hover
{
-webkit-transform:rotate(5000deg);
-moz-transform:rotate(5000deg);
-op-transform:rotate(5000deg);
background-color:#0F0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>


Thank you !!!
Posted by at 0 comments

Friday, 28 February 2014

How to use Hover effect in webpages using html & css

Hello friends...
        How are you ? I think you are all fine.At present time i am learning to design the webpages using CSS3. CSS3 gives a great design & effect to our webpages.
In this post i'll show you how to use hover effect in webpages.
HTML

 <!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="post.css"
<title>image</title>
</head>
<body>
<div class="grow img">
<img src="1.jpg"/>
</div>
<div class="shrink img">
<img src="1.jpg"/>
</div>
</body>

</html>

 CSS

 .grow img {
  height: 100px;
  width:  100px;
  -webkit-transition: all 1s ease;
  }
.grow img:hover {
  width: 600px;
  height: 600px;
}
.shrink img {
  height: 400px;
  width: 400px;
 -webkit-transition: all 1s ease;
  -moz-transition:all 1s ease;
  -o-transition:all 1s ease;
  }
 .shrink img:hover {
  width: 100px;
  height: 100px;
}


Thanks....
just mouse hover on any image 
image
Posted by at 0 comments
Subscribe to: Posts (Atom)
 

OUR VISION

think different

ABOUT US

THINK DIFFERENT