您的位置: 首页  >  文章  >  如何使用CSS3创建Gmail徽标

如何使用CSS3创建Gmail徽标

分类: 文章 • 2024-06-25 14:50:22

不久前，我向您展示了如何使用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'>&nbsp;</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;
	}
如何使用CSS3创建Gmail徽标

然后，我们继续在红色背景中创建白色框。 

.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;
	}
如何使用CSS3创建Gmail徽标

为了创建红色的“ 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);
	}
如何使用CSS3创建Gmail徽标

然后，我们继续隐藏多余的一面，为我们提供完整的红色“ M”。 

.gmail-logo .gmail-box {
	overflow:hidden;
	}
如何使用CSS3创建Gmail徽标

现在，让我们给出两个细的红色边框，使其具有信封外观。 

.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);
	}
如何使用CSS3创建Gmail徽标

我们快完成了。 让我们为红色信封添加一些渐变。 

.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;
	}
如何使用CSS3创建Gmail徽标

预览 | 下载源文件

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'>&nbsp;</span>
			<span class='element2'>&nbsp;</span>
			<span class='element3'>&nbsp;</span>
			<span class='element4'>&nbsp;</span>
			<span class='element5'>&nbsp;</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;
	}
如何使用CSS3创建Gmail徽标

样式.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);
	}
如何使用CSS3创建Gmail徽标

样式.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);
	}
如何使用CSS3创建Gmail徽标

样式.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);
	}
如何使用CSS3创建Gmail徽标

样式.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);	
	}
如何使用CSS3创建Gmail徽标

样式.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);
	}
如何使用CSS3创建Gmail徽标

样式.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);
	}
如何使用CSS3创建Gmail徽标

样式.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);
	}
如何使用CSS3创建Gmail徽标

样式.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);
	}
如何使用CSS3创建Gmail徽标

样式.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);
	}
如何使用CSS3创建Gmail徽标

样式.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);
	}
如何使用CSS3创建Gmail徽标

调整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 {}*/
如何使用CSS3创建Gmail徽标

我们快完成了。 您的Gmail徽标应如下所示：

如何使用CSS3创建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);
	}
如何使用CSS3创建Gmail徽标

预览 | 下载源文件

编者注：本帖由Irham Kendeni为Hongkiat.com撰写。 Irham，也称为Indaam，是印度尼西亚的网页设计师和开发人员。 他还喜欢CSS和WordPress主题开发。

翻译自: https://www.hongkiat.com/blog/gmail-logo-css3/

相关推荐