CSS3教程:由CSS3代码生成的图形与图标设计

坏孩子丨最拉风

坏孩子丨最拉风

2016-02-19 18:18

下面,图老师小编带您去了解一下CSS3教程:由CSS3代码生成的图形与图标设计,生活就是不断的发现新事物,get新技能~

本文中的这些标志与图标都是用CSS3制作而成,看上去似乎很不可思议,其中包括了IE图标,网站图标,奥运会标志等等,都是一些十分常见的标志,而它们之所有如此特别是因为这些标志与图标只是用CSS3来显示在网页中,而并非图片显示。

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

Olympic Logo

Name: Doug Neiner
Purely css, ems based and dynamically scallable. It also requires a browser capable of rendering

border-radius

For now that includes recent versions of Chrome, Safari, Firefox and Internet Explorer 9.

jQuery Logo

Name: Doug Neiner
We all know jQery. Probably most of us, favorite javascript framework. Logo rendered mainly using

border-radius

property.

jQuery UI Logo

Name: Doug Neiner
jQery UI icon. Not as popular as framework brother, but worth being interested in. Similairly, made using

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
border-radius

property.

Impressive CSS Logo replications

Name: Justin Sepulveda
Nice piece of icon set. All made with pure css and use

border-radius

,

gradient

,

transform

properties. It’s nice to see people come up with such amazing replicas. Awesome!

Opera Logo

Name: David DeSandro
Nicely made Opera icon. Extensive usage of

border-radius

,

gradient

could provide this extensively awesome effect. Logo doesn’t look the same on all browsers, especially on IE.IE.

iOS icons

Name: Louis Harboe
Great work. Advanced css3 involved.

Simple css icons

Name: Zander Martineau
I didn’t know making triangles out of css2 was possible, till this article research. Here you can find some pretty and simple stuff like rss icon, heart icon or triangle.

Pure CSS animated 3D Super Mario Icon

Name: Andreas Jacob
Made by with CSS3 & the CSS 4D Framework by Andreas Jacob. Animation work is decent but for now only works in Safari 5.

Some nice icon made with pure CSS

Name: Andrew Kelly
Gradients, Shadows and rounded borders used. Nice final effect.

Adobe Photoshop Logos in CSS3

Name: Radu Chelariu
Great use of gradients and amazing footer. No images used!

Ten amazing social media icons!

Name: Nicolas Gallagher
All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images.

Peculiar CSS icon set

Name: Lucian Marin
Peculiar is icon package made only in CSS. It was created for sites and web applications that depend on fewer HTTP requests as possible or don’t need to use any image at all.

Twitter icon in only CSS3

Name: Giacomo Bartoli
Obviously used @font-face with little shadow and rounded borders.

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)Go Transit CSS Logo

Name: Collin Henderson
CSS only Logo of Canadian Transporter. Simply done with use of

border-radius

展开更多 50%)
分享

猜你喜欢

CSS3教程:由CSS3代码生成的图形与图标设计

Web开发
CSS3教程:由CSS3代码生成的图形与图标设计

由CSS3代码生成的图形与图标设计

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
由CSS3代码生成的图形与图标设计

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS3 Please:在线生成跨浏览器的CSS3代码

Web开发
CSS3 Please:在线生成跨浏览器的CSS3代码

帮助你学习CSS3的不错的7个CSS3代码生成工具

Web开发
帮助你学习CSS3的不错的7个CSS3代码生成工具

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

7个有用的CSS3代码生成工具

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
7个有用的CSS3代码生成工具

10个省时高效的CSS3代码生成工具分享

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
10个省时高效的CSS3代码生成工具分享

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

用HTML5为你的网页添加音效

用HTML5为你的网页添加音效

如此高效通用的分页存储过程是带有sql注入漏洞的

如此高效通用的分页存储过程是带有sql注入漏洞的
下拉加载更多内容 ↓