Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
So today i'am sharing a post from hongkiat.com which is about creating Gmail logo with CSS3. First of all go and create a new html document on your computer and then paste following HTML markup on it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Gmail Logo with CSS3</title>
<style type="text/css">
Paste CSS3 here
</style>
</head>
<body>
<span class='gmail-logo'>
<span class='gmail-box'> </span>
</span>
<!-- sample usage, remove this comment
<a href='mailto:your@mail.com' class='gmail-logo'>
<span class='gmail-box'> </span>
</a>
-->
<!--
Cheers and Regards
Hongkiat Lim < http://www.hongkiat.com
Indam < http://www.indaam.com
-->
</body>
</html>
As you can see in above code that i left a blank field for our CSS3 code so just replace below CSS with "Paste CSS3 here":
<!--
body{
/* min-height:1600px;
padding:200px 0;
*/}
/*
Css Logo created by Indam < http://www.indaam.com
Publish for http://hongkiat.com */
.gmail-logo, .gmail-logo *, .gmail-logo *:before, .gmail-logo *:after{
/* content:''; Bug in Opera */
/* add this, for : can using many tag */
margin:0;
padding:0;
background:transparent;
border:0;
outline:0;
display:block;
font:normal normal 0/0 serif;
}
.gmail-logo{
margin:110px auto;
background:rgb(201, 44, 25);
width:600px;
height:400px;
border-top:4px solid rgb(201, 44, 25);
border-bottom:4px solid rgb(201, 44, 25);
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.gmail-logo .gmail-box{
overflow:hidden;
float:left;
width:440px;
height:400px;
margin:0 0 0 80px;
background:white;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.gmail-logo .gmail-box:before{
position:relative;
content:'';
z-index:1;
background:white;
float:left;
width:320px;
height:320px;
border:100px solid rgb(201, 44, 25);
margin:-310px 0 0 -40px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
.gmail-logo .gmail-box:after{
content:'';
float:left;
width:360px;
height:360px;
border:2px solid rgb(201, 44, 25);
margin:10px 0 0 40px;
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
}
.gmail-logo:after{
content:'';
position:relative;
z-index:2;
content:'';
float:left;
margin-top:-404px;
width:600px;
height:408px;
display:block;
background:
-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,
/* rgba(255, 255, 255, 0.3) 30%, */
rgba(255, 255, 255, 0.1) 100%);
background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,
/* rgba(255, 255, 255, 0.2) 30%, */
rgba(255, 255, 255, 0.1) 100%);
background:-webkit-gradient(
linear, left top, left bottom, color-stop(0%,
rgba(255, 255, 255, 0.3)),
/* color-stop(30%, rgba(255, 255, 255, 0.2)), */
color-stop(100%, rgba(255, 255, 255, 0.1)));
}
.gmail-logo:hover{
background:#313131;
border-color:#313131;
}
.gmail-logo:hover .gmail-box:before{
border-color:#313131;
/* margin-top:-305px; */
}
.gmail-logo:hover .gmail-box:after{
/* margin-top:-5px; */
border-color:#313131;
border-bottom-color:#fff;
border-right-color:#fff;
}
-->
That's It...... :)
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
