使用纯 CSS 创建您的 Logo

Avatar of Chris Coyier
Chris Coyier 发布

DigitalOcean 提供适用于您旅程各个阶段的云产品。 立即开始使用 价值 200 美元的免费积分!

Dan Cole 发表了一篇有趣的文章,介绍了 仅使用 CSS 创建 logo 的方法。 为什么呢?

  • 更快的加载时间
  • 即使图像被禁用也能正常工作
  • 可扩展

以下是其外观
towers.png

以下是其制作方法

#tower1 {
position:absolute;
top:51px;
left:20px;
width:20px;
height: 30px;
background-color: #333;
}
#tower2 {
position:absolute;
top:31px;
left:45px;
width:20px;
height: 50px;
background-color: #33E;
}
#tower3 {
position:absolute;
top:11px;
left:70px;
width:20px;
height: 70px;
background-color: #3A3;
}
#tower4 {
position:absolute;
top:90px;
left:20px;
width:20px;
height: 10px;
background-color: #AAA;
}
#tower5 {
position:absolute;
top:90px;
left:45px;
width:20px;
height: 17px;
background-color: #AAD;
}
#tower6 {
position:absolute;
top:90px;
left:70px;
width:20px;
height: 23px;
background-color: #ADA;
}