CSS3设计赛:基于纯CSS3技术的前5名设计师

2016-02-20 00:27 2 1 收藏

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐CSS3设计赛:基于纯CSS3技术的前5名设计师,无聊中的都看过来。

【 tulaoshi.com - Web开发 】

上月组织了一次 CSS3 设计赛,最终有 5 位设计师获奖,获奖作品体现了 CSS3 技巧的原创性与独特性,同时展示了 CSS3 的强大的功能,这些作品基于纯 CSS3 技术,并不借助 JavaScript 或其它技术。

Smashing Magazine 为了激发 Web 设计者对 CSS3 的兴趣,上月组织了一次 CSS3 设计赛,最终有 5 位设计师获奖,获奖作品体现了 CSS3 技巧的原创性与独特性,同时展示了 CSS3 的强大的功能,这些作品基于纯 CSS3 技术,并不借助 JavaScript 或其它技术。

第一名: CSS3 图表

CSS3 Charts [ 预览 | 下载 ]

该设计试验了 CSS3 在图表方面的应用,不借助任何 JavaScript 和图片。用到了 CSS3 强大的选择器功能:nth-child 和 :target,同时用到了过渡,渐变等技术,由来自美国的 Sean Oh 设计。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

Css3-charts-full 1 in CSS3 Design Contest Results

Css3-charts-full 2 in CSS3 Design Contest Results

第二名: CSS3 魔方

CSS3 Rubiks Cube [ 预览 | 下载 ]

使用魔方实现导航,虽然在具体应用中体验未必好,但作为一种创意,可以用在作品展示类站点。用到了 CSS3 的过渡和渐变技巧。由来自意大利的 Francesco Benanti 与 Maicol Zenatti 联合设计。

Rubik in CSS3 Design Contest Results

第三名: CSS3 3D

CSS3D [ 预览 | 下载 ]

如果你有 3D 眼镜,可以看看这个 3D 效果,支持任意现代浏览器,甚至 iPhone,由来自荷兰的 simurai 设计。

Css3d-full in CSS3 Design Contest Results

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)第四名: CSS3 机器人

CSS3 Monsters Blob [ 预览 | 下载 ]

使用纯 CSS3 设计的机器人,随着鼠标的移动,机器人的眼镜也在转动,由来自法国的 Sebastien Plaignaud 设计。

Css3-monsters-blob-full in CSS3 Design Contest Results

第五名: CSS3: 时间的裂缝

CSS3 A Rift in Time [ 预览 | 下载 ]

CSS3 支持旋转,我们可以借以试验反传统的倾斜导航,由来自美国的 Maxwell Burton 设计。

Css3-a-rift-in-time-full in CSS3 Design Contest Results

来源:https://www.tulaoshi.com/n/20160220/1631887.html

延伸阅读
标签: Web开发
CSS3透明不透明渐变随便你怎么叫它吧!这里是一些使用CSS3透明度的指南以及一些例子。 其实这个firefox很久以前就支持了,而IE一直不支持! 上一篇文章:CSS3教程(7):CSS3嵌入字体 opacity声明用来设置一个元素的透明度:层、文字、图片等一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值...
设计师千万不要总觉得CSS3还离我们特别遥远,其实如果你有兴趣的话,完全可以学习了解一些简单的CSS3技术。 你知道的,国内的行情就是如此:所有的公司都会希望你在前端技术上懂的越多越好。那设计师学习前端代码是否就是天方夜谭呢?其实并不如此。就像我们学设计一样,最基本的方法就是模仿,以及观看大师作品的案例。所以,今天我们为您收...
标签: Web开发
CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果,但了解它们还是必须且很有趣味性的。网页教学网将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。 相关文章:介绍CSS3使用技巧5个 1:基本...
  最近闲来无事,上W3C转了一圈,粗略地浏览了一下尚未发布的CSS3,虽然还未被W3C正式发布出来,但还是能从已有的资料中窥出一些端倪,一个很明显的特征,CSS3制订得越来越细致了,某些细节之处完全超乎你所能想象的到的范围。 在这里不提及CSS3的语法,因为对于目前尚未有软件支持的CSS3,任何语法的探讨都像是空中楼...
所有的开发人员都应该注意了,你们绝对应该看看这篇文章,帮助你快速创建HTML5/CSS3的开发框架。可能你也看到过其它的框架,但是你应该看看这些框架,因为你以前可能没用过他们中的大部分。看看最新的实用HTML5和CSS3框架吧!希望你们喜欢! 1.HTML5boilerplate H5BP带给你非常漂亮的文档,一个网站优化的编译脚本,还有一个自定义的boilerpla...

经验教程

706

收藏

65

精华推荐

介绍CSS3使用技巧5个

介绍CSS3使用技巧5个

zyq2626

31个技术高超的CSS3网页设计欣赏

31个技术高超的CSS3网页设计欣赏

爱烟的丫头

CSS3 有关的问题

CSS3 有关的问题

你印哥

微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部