不久前,我向您展示了如何使用CSS3创建RSS feed徽标 。 我认为创建一些复杂的东西会很有趣。 在今天的帖子中,我将向您展示如何仅使用CSS3创建Gmail徽标的一种,而是两种。
Gmail徽标#1
这个第一个徽标很简单,而且很容易创建。 事不宜迟,这里是步骤。 让我们首先启动您喜欢的代码编辑器,然后输入以下HTML代码,然后将其另存为logo-gmail.html 。
<html>
<head>
<title>Gmail CSS Logo</title>
<style type='text/css'>
</style>
</head>
<body>
<span class='gmail-logo'>
<span class='gmail-box'> </span>
</span><!-- End .gmail-logo -->
</body>
</html>
在<style></style>
之间添加以下CSS样式以重置默认CSS值。
.gmail-logo,
.gmail-logo *,
.gmail-logo *:before,
.gmail-logo *:after {
margin:0;
padding:0;
background:transparent;
border:0;
outline:0;
display:block;
font:normal normal 0/0 serif;
}
以下CSS代码为我们提供了Gmail徽标的红色背景和圆角。
.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;
}
为了创建红色的“ M”效果,我们将首先创建一个带有红色边框的框。
.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 {
overflow:hidden;
}
现在,让我们给出两个细的红色边框,使其具有信封外观。
.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)));
}
最后但并非最不重要的一点是,让我们在悬停时为其赋予不同的颜色。 在<html>
之前添加以下HTML DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
以及</style>
之前的以下CSS样式
.gmail-logo:hover {
background:#313131;
border-color:#313131;
/* cursor:pointer; */
}
.gmail-logo:hover .gmail-box:before {
border-color:#313131;
}
.gmail-logo:hover .gmail-box:after {
border-color:#313131;
border-bottom-color:#fff;
border-right-color:#fff;
}
Gmail徽标#2
接下来,我们将从另一个角度创建具有3D效果的Gmail徽标。 我们将从基本HTML标记开始。
<html>
<head>
<title>Gmail logo 2 </title>
<style type="text/css">
</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>
由于徽标具有不同的视角,因此我们首先将其旋转一点,然后依次创建所需的图层(我们将其称为elements )。
#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);
}
#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;
}
样式.element1::before
#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);
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);
}
样式.element1::after
#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);
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);
}
样式.element2::before
#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);
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);
}
样式.element2::after
#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);
}
样式.element3::before
#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);
}
样式.element3::after
#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);
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);
}
样式.element4::before
#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);
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);
}
样式.element4::after
#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);
}
样式.element5::before
#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);
}
样式.element5::after
#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);
}
调整z-index
的优先级。
#gmail-logo2 .element1::before {z-index:3;}
#gmail-logo2 .element1::after {z-index:1;}
/*#gmail-logo2 .element2::before {}*/
#gmail-logo2 .element2::after {z-index:2;}
#gmail-logo2 .element3::before {z-index:5;}
#gmail-logo2 .element3::after {z-index:1;}
#gmail-logo2 .element4::before {z-index:4;}
#gmail-logo2 .element4::after {z-index:3;}
/*#gmail-logo2 .element5::before {}
#gmail-logo2 .element5::after {}*/
我们快完成了。 您的Gmail徽标应如下所示:
最后,让我们在悬停时为其赋予不同的颜色。
#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);
}
编者注:本文由Irham Kendeni为Hongkiat.com撰写。 Irham,也称为Indaam,是印度尼西亚的一名网页设计师和开发人员。 他还喜欢CSS和WordPress主题开发。