Dan Cole 发表了一篇有趣的文章,介绍了 仅使用 CSS 创建 logo 的方法。 为什么呢?
- 更快的加载时间
- 即使图像被禁用也能正常工作
- 可扩展
以下是其外观
以下是其制作方法
#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;
}
很棒的信息! 这可能不适用于所有字体,但值得研究。
谢谢!
不错的技巧,但如果您希望该 logo 呈现在打印件上,则它无法正常工作。
我即将作为自由职业的动态图形和电影艺术家发布我的第一个网站。 在 Google 上寻找灵感时偶然发现了这个想法。
我想说,使用您最熟悉的工具更有意义,但这确实很有启发性。
使用 CSS 创建 logo 是个很酷的想法,如果您说的是 100% 的 CSS,它确实有局限性,但如果您只是想要一个超级简单的东西,而且您会编码,那么就放手去做吧。
我想看看更多仅使用 CSS 的 logo。