CSS3绘制图形应用：如何使用 CSS3 创建 Gmail 徽标。上代码吧。
<!DOCTYPE HTML>
<html>
<head>
<title>CSS3绘制图形应用：如何使用 CSS3 创建 Gmail 徽标 | Web前端之家www.jiangweishan.com</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
<!-- /* CSS */
/*
-moz- > firefox
-o- > opera
-webkit > webkit(chrome, safari)
-ms- > MSIE8+
*/
body{
padding:200px 0;
}
#gmail-logo2{
margin:0 auto;
display:block;
width:380px;
height:290px;
-moz-transform:rotate(6deg);
-webkit-transform:rotate(6deg);
-o-transform:rotate(6deg);
transform:rotate(6deg);
-ms-transform:rotate(6deg);
}
#gmail-logo2 .element1{
display:block;
width:380px;
height:290px;
}
#gmail-logo2 .element2 ,
#gmail-logo2 .element3,
#gmail-logo2 .element4,
#gmail-logo2 .element5 {
float:left;
display:block;
width:380px;
height:290px;
margin:-290px 0 0 0;
}
#gmail-logo2 .element1::before{
content:'';
position:relative;
margin:2px 0 0 14px;
float:left;
display:block;
background:rgb(201, 44, 25);
width:30px;
height:276px;
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
-ms-transform:rotate(3deg);
border-radius:22px 0 0 20px;
-moz-border-radius:22px 0 0 20px;
-webkit-border-radius:22px 0 0 20px;
box-shadow:
-1px 1px 0 rgb(109, 10, 0),
-2px 2px 0 rgb(109, 10, 0),
-3px 3px 0 rgb(109, 10, 0),
-4px 4px 0 rgb(109, 10, 0),
-5px 5px 0 rgb(109, 10, 0),
-6px 6px 0 rgb(109, 10, 0);
-webkit-box-shadow:
-1px 1px 0 rgb(109, 10, 0),
-2px 2px 0 rgb(109, 10, 0),
-3px 3px 0 rgb(109, 10, 0),
-4px 4px 0 rgb(109, 10, 0),
-5px 5px 0 rgb(109, 10, 0),
-6px 6px 0 rgb(109, 10, 0);
-moz-box-shadow:
-1px 1px 0 rgb(109, 10, 0),
-2px 2px 0 rgb(109, 10, 0),
-3px 3px 0 rgb(109, 10, 0),
-4px 4px 0 rgb(109, 10, 0),
-5px 5px 0 rgb(109, 10, 0),
-6px 6px 0 rgb(109, 10, 0);
}
#gmail-logo2 .element1::after{
content:'';
position:relative;
margin:40px 5px 0 0;
float:right;
display:block;
background:rgb(201, 44, 25);
width:30px;
height:238px;
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
-ms-transform:rotate(3deg);
border-radius:0 18px 26px 0;
-webkit-border-radius:0 18px 26px 0;
-moz-border-radius:0 18px 26px 0;
box-shadow:
-1px 1px 0 rgb(109, 10, 0),
-2px 2px 0 rgb(109, 10, 0),
-3px 3px 0 rgb(109, 10, 0),
-4px 4px 0 rgb(109, 10, 0),
-5px 5px 0 rgb(109, 10, 0),
-6px 6px 0 rgb(109, 10, 0),
-6px 7px 0 rgb(109, 10, 0);
-moz-box-shadow:
-1px 1px 0 rgb(109, 10, 0),
-2px 2px 0 rgb(109, 10, 0),
-3px 3px 0 rgb(109, 10, 0),
-4px 4px 0 rgb(109, 10, 0),
-5px 5px 0 rgb(109, 10, 0),
-6px 6px 0 rgb(109, 10, 0),
-6px 7px 0 rgb(109, 10, 0);
-webkit-box-shadow:
-1px 1px 0 rgb(109, 10, 0),
-2px 2px 0 rgb(109, 10, 0),
-3px 3px 0 rgb(109, 10, 0),
-4px 4px 0 rgb(109, 10, 0),
-5px 5px 0 rgb(109, 10, 0),
-6px 6px 0 rgb(109, 10, 0),
-6px 7px 0 rgb(109, 10, 0);
}
#gmail-logo2 .element2::before{
content:'';
margin:22px 0 0 48px;
float:left;
display:block;
background:rgb(201, 44, 25);
width:315px;
height:14px;
-moz-transform:rotate(6.8deg);
-webkit-transform:rotate(6.8deg);
-o-transform:rotate(6.8deg);
transform:rotate(6.8deg);
-ms-transform:rotate(6.8deg);
box-shadow:
0 1px 0 rgb(109, 10, 0),
0 2px 0 rgb(109, 10, 0),
0 3px 0 rgb(109, 10, 0),
0 4px 0 rgb(109, 10, 0),
0 5px 0 rgb(109, 10, 0),
-6px 6px 0 rgb(109, 10, 0);
-webkit-box-shadow:
0 1px 0 rgb(109, 10, 0),
0 2px 0 rgb(109, 10, 0),
0 3px 0 rgb(109, 10, 0),
0 4px 0 rgb(109, 10, 0),
0 5px 0 rgb(109, 10, 0),
-6px 6px 0 rgb(109, 10, 0);
-moz-box-shadow:
0 1px 0 rgb(109, 10, 0),
0 2px 0 rgb(109, 10, 0),
0 3px 0 rgb(109, 10, 0),
0 4px 0 rgb(109, 10, 0),
0 5px 0 rgb(109, 10, 0),
-6px 6px 0 rgb(109, 10, 0);
}
#gmail-logo2 .element2::after{
content:'';
position:relative;
margin:230px 0 0 36px;
float:left;
display:block;
background:rgb(201, 44, 25);
width:310px;
height:12px;
box-shadow:
0 1px 0 rgb(109, 10, 0),
0 2px 0 rgb(109, 10, 0),
0 3px 0 rgb(109, 10, 0),
0 4px 0 rgb(109, 10, 0),
0 5px 0 rgb(109, 10, 0),
-6px 6px 0 rgb(109, 10, 0);
-webkit-box-shadow:
0 1px 0 rgb(109, 10, 0),
0 2px 0 rgb(109, 10, 0),
0 3px 0 rgb(109, 10, 0),
0 4px 0 rgb(109, 10, 0),
0 5px 0 rgb(109, 10, 0),
-6px 6px 0 rgb(109, 10, 0);
-moz-box-shadow:
0 1px 0 rgb(109, 10, 0),
0 2px 0 rgb(109, 10, 0),
0 3px 0 rgb(109, 10, 0),
0 4px 0 rgb(109, 10, 0),
0 5px 0 rgb(109, 10, 0),
-6px 6px 0 rgb(109, 10, 0);
}
#gmail-logo2 .element3::before{
content:'';
position:relative;
margin:8px 0 0 42px;
float:left;
display:block;
background:rgb(201, 44, 25);
width:42px;
height:268px;
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
-ms-transform:rotate(3deg);
}
#gmail-logo2 .element3::after{
content:'';
position:relative;
margin:40px 32px 0 0;
float:right;
display:block;
background:rgb(201, 44, 25);
width:22px;
height:236px;
-moz-transform:rotate(3.0deg);
-webkit-transform:rotate(3.0deg);
-o-transform:rotate(3.0deg);
transform:rotate(3.0deg);
-ms-transform:rotate(3.0deg);
box-shadow:
0 1px 0 rgb(109, 10, 0),
0 2px 0 rgb(109, 10, 0),
0 3px 0 rgb(109, 10, 0),
0 4px 0 rgb(109, 10, 0),
0 5px 0 rgb(109, 10, 0),
-6px 6px 0 rgb(109, 10, 0);
-webkit-box-shadow:
0 1px 0 rgb(109, 10, 0),
0 2px 0 rgb(109, 10, 0),
0 3px 0 rgb(109, 10, 0),
0 4px 0 rgb(109, 10, 0),
0 5px 0 rgb(109, 10, 0),
-6px 6px 0 rgb(109, 10, 0);
-moz-box-shadow:
0 1px 0 rgb(109, 10, 0),
0 2px 0 rgb(109, 10, 0),
0 3px 0 rgb(109, 10, 0),
0 4px 0 rgb(109, 10, 0),
0 5px 0 rgb(109, 10, 0),
-6px 6px 0 rgb(109, 10, 0);
}
#gmail-logo2 .element4::before{
content:'';
position:relative;
margin:-2px 0 0 130px;
float:left;
display:block;
background:rgb(201, 44, 25);
width:54px;
height:192px;
-moz-transform:rotate(-49deg);
-webkit-transform:rotate(-49deg);
-o-transform:rotate(-49deg);
transform:rotate(-49deg);
-ms-transform:rotate(-49deg);
box-shadow:
-1px 0 0 rgb(109, 10, 0),
-2px 0 0 rgb(109, 10, 0),
-3px 0 0 rgb(109, 10, 0),
-4px 0 0 rgb(109, 10, 0),
-5px 0 0 rgb(109, 10, 0),
-6px 0 0 rgb(109, 10, 0),
-7px 0 0 rgb(109, 10, 0),
-8px 0 0 rgb(109, 10, 0);
-moz-box-shadow:
-1px 0 0 rgb(109, 10, 0),
-2px 0 0 rgb(109, 10, 0),
-3px 0 0 rgb(109, 10, 0),
-4px 0 0 rgb(109, 10, 0),
-5px 0 0 rgb(109, 10, 0),
-6px 0 0 rgb(109, 10, 0),
-7px 0 0 rgb(109, 10, 0),
-8px 0 0 rgb(109, 10, 0);
-webkit-box-shadow:
-1px 0 0 rgb(109, 10, 0),
-2px 0 0 rgb(109, 10, 0),
-3px 0 0 rgb(109, 10, 0),
-4px 0 0 rgb(109, 10, 0),
-5px 0 0 rgb(109, 10, 0),
-6px 0 0 rgb(109, 10, 0),
-7px 0 0 rgb(109, 10, 0),
-8px 0 0 rgb(109, 10, 0);
}
#gmail-logo2 .element4::after{
content:'';
position:relative;
margin:12px 88px 0 0;
float:right;
display:block;
background:rgb(201, 44, 25);
width:54px;
height:186px;
border-radius:30px 0 0 0;
-webkit-border-radius:30px 0 0 0;
-moz-border-radius:30px 0 0 0;
-moz-transform:rotate(53deg);
-webkit-transform:rotate(53deg);
-o-transform:rotate(53deg);
transform:rotate(53deg);
-ms-transform:rotate(53deg);
}
#gmail-logo2 .element5::before{
content:'';
position:relative;
margin:115px 0 0 125px;
float:left;
display:block;
background:rgb(201, 44, 25);
width:2px;
height:150px;
-moz-transform:rotate(55deg);
-o-transform:rotate(55deg);
-webkit-transform:rotate(55deg);
transform:rotate(55deg);
-ms-transform:rotate(55deg);
}
#gmail-logo2 .element5::after{
position:relative;
content:'';
margin:115px 0 0 150px;
float:left;
display:block;
background:rgb(201, 44, 25);
width:2px;
height:150px;
-moz-transform:rotate(-50deg);
-webkit-transform:rotate(-50deg);
-o-transform:rotate(-50deg);
transform:rotate(-50deg);
-ms-transform:rotate(-50deg);
}
#gmail-logo2 .element1::before{z-index:3;}/* 4 */
#gmail-logo2 .element1::after{z-index:1;}/* 7 */
#gmail-logo2 .element2::before{}/* 10 */
#gmail-logo2 .element2::after{z-index:2;}/* 5 */
#gmail-logo2 .element3::before{z-index:5;}/* 1 */
#gmail-logo2 .element3::after{z-index:1;}/* 6 */
#gmail-logo2 .element4::before{z-index:4;}/* 2 */
#gmail-logo2 .element4::after{z-index:3;}/* 3 */
#gmail-logo2 .element5::before{/* z-index:4; */}/* 8 */
#gmail-logo2 .element5::after{/* z-index:3; */}/* 9 */
#gmail-logo2:hover *::after,
#gmail-logo2:hover *::before{
background:rgba(20, 196, 7, 1);
}
#gmail-logo2:hover .element1::before{
box-shadow:
-1px 1px 0 rgb(10, 90, 4),
-2px 2px 0 rgb(10, 90, 4),
-3px 3px 0 rgb(10, 90, 4),
-4px 4px 0 rgb(10, 90, 4),
-5px 5px 0 rgb(10, 90, 4),
-6px 6px 0 rgb(10, 90, 4);
-webkit-box-shadow:
-1px 1px 0 rgb(10, 90, 4),
-2px 2px 0 rgb(10, 90, 4),
-3px 3px 0 rgb(10, 90, 4),
-4px 4px 0 rgb(10, 90, 4),
-5px 5px 0 rgb(10, 90, 4),
-6px 6px 0 rgb(10, 90, 4);
-moz-box-shadow:
-1px 1px 0 rgb(10, 90, 4),
-2px 2px 0 rgb(10, 90, 4),
-3px 3px 0 rgb(10, 90, 4),
-4px 4px 0 rgb(10, 90, 4),
-5px 5px 0 rgb(10, 90, 4),
-6px 6px 0 rgb(10, 90, 4);
}
#gmail-logo2:hover .element1::after{
box-shadow:
-1px 1px 0 rgb(10, 90, 4),
-2px 2px 0 rgb(10, 90, 4),
-3px 3px 0 rgb(10, 90, 4),
-4px 4px 0 rgb(10, 90, 4),
-5px 5px 0 rgb(10, 90, 4),
-6px 6px 0 rgb(10, 90, 4),
-6px 7px 0 rgb(10, 90, 4);
-moz-box-shadow:
-1px 1px 0 rgb(10, 90, 4),
-2px 2px 0 rgb(10, 90, 4),
-3px 3px 0 rgb(10, 90, 4),
-4px 4px 0 rgb(10, 90, 4),
-5px 5px 0 rgb(10, 90, 4),
-6px 6px 0 rgb(10, 90, 4),
-6px 7px 0 rgb(10, 90, 4);
-webkit-box-shadow:
-1px 1px 0 rgb(10, 90, 4),
-2px 2px 0 rgb(10, 90, 4),
-3px 3px 0 rgb(10, 90, 4),
-4px 4px 0 rgb(10, 90, 4),
-5px 5px 0 rgb(10, 90, 4),
-6px 6px 0 rgb(10, 90, 4),
-6px 7px 0 rgb(10, 90, 4);
}
#gmail-logo2:hover .element2::before{
box-shadow:
0 1px 0 rgb(10, 90, 4),
0 2px 0 rgb(10, 90, 4),
0 3px 0 rgb(10, 90, 4),
0 4px 0 rgb(10, 90, 4),
0 5px 0 rgb(10, 90, 4),
-6px 6px 0 rgb(10, 90, 4);
-webkit-box-shadow:
0 1px 0 rgb(10, 90, 4),
0 2px 0 rgb(10, 90, 4),
0 3px 0 rgb(10, 90, 4),
0 4px 0 rgb(10, 90, 4),
0 5px 0 rgb(10, 90, 4),
-6px 6px 0 rgb(10, 90, 4);
-moz-box-shadow:
0 1px 0 rgb(10, 90, 4),
0 2px 0 rgb(10, 90, 4),
0 3px 0 rgb(10, 90, 4),
0 4px 0 rgb(10, 90, 4),
0 5px 0 rgb(10, 90, 4),
-6px 6px 0 rgb(10, 90, 4);
}
#gmail-logo2:hover .element2::after{
box-shadow:
0 1px 0 rgb(10, 90, 4),
0 2px 0 rgb(10, 90, 4),
0 3px 0 rgb(10, 90, 4),
0 4px 0 rgb(10, 90, 4),
0 5px 0 rgb(10, 90, 4),
-6px 6px 0 rgb(10, 90, 4);
-webkit-box-shadow:
0 1px 0 rgb(10, 90, 4),
0 2px 0 rgb(10, 90, 4),
0 3px 0 rgb(10, 90, 4),
0 4px 0 rgb(10, 90, 4),
0 5px 0 rgb(10, 90, 4),
-6px 6px 0 rgb(10, 90, 4);
-moz-box-shadow:
0 1px 0 rgb(10, 90, 4),
0 2px 0 rgb(10, 90, 4),
0 3px 0 rgb(10, 90, 4),
0 4px 0 rgb(10, 90, 4),
0 5px 0 rgb(10, 90, 4),
-6px 6px 0 rgb(10, 90, 4);
}
#gmail-logo2:hover .element3::after{
box-shadow:
0 1px 0 rgb(10, 90, 4),
0 2px 0 rgb(10, 90, 4),
0 3px 0 rgb(10, 90, 4),
0 4px 0 rgb(10, 90, 4),
0 5px 0 rgb(10, 90, 4),
-6px 6px 0 rgb(10, 90, 4);
-webkit-box-shadow:
0 1px 0 rgb(10, 90, 4),
0 2px 0 rgb(10, 90, 4),
0 3px 0 rgb(10, 90, 4),
0 4px 0 rgb(10, 90, 4),
0 5px 0 rgb(10, 90, 4),
-6px 6px 0 rgb(10, 90, 4);
-moz-box-shadow:
0 1px 0 rgb(10, 90, 4),
0 2px 0 rgb(10, 90, 4),
0 3px 0 rgb(10, 90, 4),
0 4px 0 rgb(10, 90, 4),
0 5px 0 rgb(10, 90, 4),
-6px 6px 0 rgb(10, 90, 4);
}
#gmail-logo2:hover .element4::before{
box-shadow:
-1px 0 0 rgb(10, 90, 4),
-2px 0 0 rgb(10, 90, 4),
-3px 0 0 rgb(10, 90, 4),
-4px 0 0 rgb(10, 90, 4),
-5px 0 0 rgb(10, 90, 4),
-6px 0 0 rgb(10, 90, 4),
-7px 0 0 rgb(10, 90, 4),
-8px 0 0 rgb(10, 90, 4);
-moz-box-shadow:
-1px 0 0 rgb(10, 90, 4),
-2px 0 0 rgb(10, 90, 4),
-3px 0 0 rgb(10, 90, 4),
-4px 0 0 rgb(10, 90, 4),
-5px 0 0 rgb(10, 90, 4),
-6px 0 0 rgb(10, 90, 4),
-7px 0 0 rgb(10, 90, 4),
-8px 0 0 rgb(10, 90, 4);
-webkit-box-shadow:
-1px 0 0 rgb(10, 90, 4),
-2px 0 0 rgb(10, 90, 4),
-3px 0 0 rgb(10, 90, 4),
-4px 0 0 rgb(10, 90, 4),
-5px 0 0 rgb(10, 90, 4),
-6px 0 0 rgb(10, 90, 4),
-7px 0 0 rgb(10, 90, 4),
-8px 0 0 rgb(10, 90, 4);
}
-->
</style>
</head>
<body>
<span id='gmail-logo2'>
<span class='element1'> </span>
<span class='element2'> </span>
<span class='element3'> </span>
<span class='element4'> </span>
<span class='element5'> </span>
</span>
</body>
</html>大家试试吧。
网友评论文明上网理性发言 已有0人参与
发表评论: