让人难以置信的纯CSS3图标

2016-02-20 00:24 5 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区，我们拥有最用心的各种教程，今天就给大家分享让人难以置信的纯CSS3图标的教程，热爱PS的朋友们快点看过来吧！

【 tulaoshi.com - Web开发】

　　尽管被批评为走火入魔，CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计，如果你看到本文介绍的这些精美图标，你绝对不会相信它们完全是由 CSS3 代码生成的。尤其是那套由 Louis Harboe 设计的 iOS 图标，那么微妙的色彩与纹理，真的难以置信。

　　奥林匹克标志

　　作者: Doug Neiner

　　基于纯 CSS，以 em 为单位，可动态调整尺寸，需要浏览器支持 border-radius 属性，目前支持的浏览器包括 Chrome, Safari, Firefox 和 IE9。

　　jQuery 标志

　　作者: Doug Neiner

　　这是大家最钟爱的 JavaScript 框架 jQuery 的标志，使用 CSS3 的 border-radius 属性。

　　jQuery UI 标志

　　作者: Doug Neiner

　　这是 jQuery UI 库的标志，同样，基于 CSS3 的 border-radius 属性。

　　CCS 标志一宗

　　作者: Justin Sepulveda

　　全部基于纯 CSS3 的 border-radius, gradient, transform 属性。

来源:http://www.tulaoshi.com/n/20160220/1631780.html

上一篇：伤感的QQ签名_虚伪的世界
下一篇：昨晚做梦梦见你了,在梦中,你还是对我那么好.

看过《让人难以置信的纯CSS3图标》的人还看了以下文章更多>>

CSS实例教程：纯CSS3编写的面包屑导航

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

随着Web技术越来越先进，浏览器更新换代也很快，在国内很多网站已经有使用css3和html5的技术了，所以我们也应该多学习这些新知识，设计达人网站整理的资料，你在学校、图书上也是未必能看到的。今天我们整理了10个纯CSS3制作的面包屑导航，这些都是通过CSS3来编写，十分方便，而且实用。有些文章附有教程，大家可以学习研究一下。漂亮面...

CSS3教程(1):什么是CSS3

标签： Web开发

CSS3不是新事物，更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里，已经准备好了首次登场，呷着咖啡，等着浏览器来铺上红地毯。你看，浏览器需要跟上了注意：浏览器需要改进尽管把玩CSS3是很有趣的事情就像接下来我要演示的几篇教程中表现的那样，但是需要了解的是，CSS3并没有被当前浏览器完全的支持。也就是说，如...

CSS3教程(8):CSS3透明度指南

标签： Web开发

CSS3透明不透明渐变随便你怎么叫它吧！这里是一些使用CSS3透明度的指南以及一些例子。其实这个firefox很久以前就支持了，而IE一直不支持！上一篇文章：CSS3教程(7):CSS3嵌入字体 opacity声明用来设置一个元素的透明度：层、文字、图片等一个opacity的值为1的元素是完全不透明的，反之，值为0是完全透明的，看不见的。1到0之间的任何值...

CSS3教程(10):CSS3 HSL声明设置颜色

标签： Web开发

使用CSS3 HSL声明同样是用来设置颜色的。下一个呢？ HSLA？是的，这个和RGBA的效果是一样的。上一篇文章：CSS3教程(9):设置RGB颜色 HSL声明使用色调Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置颜色。 Hue 衍生于色盘：0和360是红色，接近120的是绿色，240是蓝色。 Saturation 值是一个百分比：0%是灰度，100%饱和度最高 ...

CSS3 有关的问题

标签： Web开发

Eric A. Meyer 对基于 Web 标准的 CSS 与 HTML 绝非一知半解，他是这个领域杰出的专家，曾写过不少 CSS 方面的书，是 An Event Apart 的合伙创始人，A List Apart 团队成员，还是 Complex Spiral Consulting 的创始人。另外， Eric Meyer 7年来一直是 CSS Working Group 资格深获邀专家，他们负责维护和开发 CSS。不用说，如果要找...

查看更多精彩>>