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

数18753786829

数18753786829

2016-02-17 03:42

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享由CSS3代码生成的图形与图标设计,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

本文中的这些标志与图标都是用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.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

jQuery Logo

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

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

jQuery UI Logo

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

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

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!

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)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.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

iOS icons

Name: Louis Harboe
Great work. Advanced css3 involved.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

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.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

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.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

Some nice icon made with pure CSS

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

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

Adobe Photoshop Logos in CSS3

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

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)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.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

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.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

Twitter icon in only CSS3

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

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

Go Transit CSS Logo

Name: Collin Henderson
CSS only logo of Canadian Transporter. Simply done with use of border-radius.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

Internet Explorer CSS icon

Name: Andreas Jacob
Best viewed with Firefox 3.6+ & Safari 5. Radial, linear gradients, shadows and lots of empty elements.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

Nintendo icons

Name: Drew
Mario mushroom, the Triforce, a Pokéball, and Kirby made with pure css.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

Back to the future CSS Logo

Name: Lucas Garron
This logo and the original one. Unbelievably alike. Best viewed in webkit browser.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

Raindrop CSS Logo

Name: Sean Martell
Amazing replication of Mozilla’s project i like.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

Bahamas CSS Logo

Name: ForestMist
Impressive replica made with use of border-radius.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

Reddit CSS Alien

Name: Matthew James Taylor
Nice css logo made with use of O O _ ( ) ( ) O O O O / – o O O O O O O O O • • ( ) ( ) and some font-styling.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

Social Media Pure CSS icons

Name: insicdesigns
Just another social media icons with use of css3.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

Bonus: iPhone in CSS3

Name: Jeff Batterton
Well, that’s not an icon, but work involved in this one is really insane. Extensive use of css3.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

Bonus: Twitter Fail Whale

Name: Jeff Batterton
Well, that’s not an icon, neither logo. It’s really good illustration made only with css. No images whatsoever!

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

Bonus: LOST – Animated CSS3 Logo

Name: Marcos Esperon
This example animation plays nerdy title in the introduction of the series Lost (a tribute to its completion). Best viewed in webkit browser.

由CSS3代码生成的图形与图标设计,PS教程,图老师教程网

展开更多 50%)
分享

猜你喜欢

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

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

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

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

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

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

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

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

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

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

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

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

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

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

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

网页设计师是怎样下地狱的

网页设计师是怎样下地狱的

网页设计师:浅淡网页BANNER设计

网页设计师:浅淡网页BANNER设计
下拉加载更多内容 ↓