CSS3基础使用CSS旋转和渐变制作Chrome图标的步骤

使用CSS旋转和渐变制作Chrome图标的步骤

Chrome是目前最受欢迎的网页浏览器,它运行速度快,安全且稳定,如今基本上已经取代了以前IE浏览器的地位,本文主要分享怎样通过CSS来制作Chrome的图标,这里需要用到CSS3的2D旋转线性渐变

简单的来讲,可以将Chrome图标拆分为几个小部分,首先是一个大圆,中间是一个有边框的小圆,然后由三个颜色的形状组合起来就得到图标的样子了,下面首先在html中将这几个部分列出来:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
</head>
<body>
<div id="chrome">
<div class="ch part_red"></div>
<div class="ch part_yellow"></div>
<div class="ch part_green"></div>
<div class="part_center"></div>
</div>
</body>
</html>

这里分别以四个div表示三种颜色的部分和中间的小圆部分,接下来首先将大圆和小圆的样式定义出来:

body {
  background-color:#eee;
}
#chrome {
  position:relative;
  width:360px;height:360px;
  background-color:#368; /*--先随意定义一个背景,之后可删除--*/
  margin:100px auto;
  border-radius:50%;
}
.part_center {
  width:130px;height:130px;
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  margin:auto; /*--通过定位和margin使小圆居中--*/
  border:17px solid #f5f5f5;
  background-color:#48f;
  border-radius:50%;
  z-index:3; /*--设置层级,使它显示在三个颜色部分的上层--*/
}

chrome0.png

接下来比较难的就是三种颜色的部分,虽然是不规则的形状,但也是按照一定的规律排布的,只要通过对矩形的2D旋转,就能得到相应的形状,再定位到合适的坐标就行了,比如红色部分可以这么做:

.ch {
 width:200px;height:270px;position:absolute;
}
.part_red {
 background-color:#d44;transform:rotate(60deg);left:89px;top:-60px;
}

chrome1.png

这里将矩形的尺寸和定位属性分开来写,便于接下来定义另外两个形状,黄色(此部分不需要旋转)和绿色的部分可以有如下类似的做法:

.part_yellow {
  background-color:#fc4;left:168px;top:101px;
}

chrome2.png

.part_green {
  background-color:#195;transform:rotate(120deg);left:-12px;top:95px;
}

chrome3.png

由于默认的层叠顺序,没法实现三种颜色“互相覆盖”的效果,所以需要增加一小块矩形覆盖红色左下角被绿色遮盖的部分,也就是首先需要在html中green部分下方增加:

<div class="ch part_red2"></div>

在CSS里将其设置为尺寸较小的矩形,并定位到红色部分左下角的位置:

.part_red2 {
  background-color:#d66; /*--便于修改,这里设置的颜色与红色部分不同--*/
  transform:rotate(60deg);
  left:-5px;top:60px;
  z-index:1;
  width:200px;height:90px;
}

这样以来,三个颜色的部分就定义好了,这几个部分的left和top偏移值我并未经过精确计算,只是估算的结果。接着只需将最外层的大圆设置一个溢出隐藏就可以出现大致的效果了,原本设置的大圆的背景颜色可以去掉了:

chrome1-3.png

此时将刚刚定义的小矩形red2的颜色修改成与red部分相同就实现了三个颜色部分“相互覆盖”的效果了:

CSS制作chrome图标.png

为了效果更好,接下来给中间的小圆部分定义一个线性渐变,原本小圆的背景颜色可以去掉了:

.part_center {
  background:linear-gradient(#7bd,#48c);
}

为了更有立体感,接着在整个图标上方定义一个伪元素并设置渐变背景以及透明度:

#chrome:before {
  content:" ";
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  width:360px;height:360px;
  border-radius:50%;
  background-image:linear-gradient(transparent 30%,rgba(0,0,0,0.7));
  opacity:0.4;
  z-index:2; /*--使伪元素显示在三个颜色上方,小圆的下方--*/
}

这样以来,一个简单的Google Chrome图标就通过CSS制作完成了,效果如下图,和PS完成的效果差不多:

CSS制作chrome图标和PS对比.png

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.flooren.com.cn/css3/147.html