可用CSS3实现的常见网页设计应用

2016-02-17 03:48 3 1 收藏

下面图老师小编要向大家介绍下可用CSS3实现的常见网页设计应用,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - 平面设计 】

对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分,随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了更多的选择。现在,用纯CSS也可以实现各种各样很酷的效果了,甚至是动画。虽然有些效果不能跨浏览器(甚至是支持CSS3的浏览器)运行,有些只是展示并没什么实际用途, 但仅用CSS实现出这些效果也是一大进步。

这里有几个可以使用CSS3实现的常见网页设计应用,你可以马上动手试试看。

1. CSS3按钮

可用CSS3实现的常见网页设计应用,PS教程,图老师教程网

你可以创建一些大小、颜色不同的元素(如按钮),而不用每次都准备一个背景图片。 ZURB上有教你创建CSS3按钮的详细文章,有兴趣可以去看看。利用RGBA做出的阴影效果真的很棒!

2.CSS3柱形图

可用CSS3实现的常见网页设计应用,PS教程,图老师教程网

Ben Lister选列了很多实用的CSS3技巧,包括这个看起来相当不错 的3D柱形图。使用-webkit-transform或-moz-transform以及指定的偏移,你可以用CSS做出和图片一样令人印象深 刻的效果。

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

3. CSS3下拉菜单

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

可用CSS3实现的常见网页设计应用,PS教程,图老师教程网

WebDesignerWall的Nick La展示了如何创建一个漂亮的CSS3弹出式下拉菜单,他展示了使用渐变图片和CSS创建的两个版本的菜单。

4. CSS3引用气泡

可用CSS3实现的常见网页设计应用,PS教程,图老师教程网

这些由Nicolas Gallagher创建的纯CSS引用气泡看起来很棒,你可以稍加修改作为你网页上的blockquote元素。

可以去Gallagher的demo页面看看效果,尤其注意那个twitter的气泡,比twitter官方使用嵌入的方法好。

5. CSS3相册

可用CSS3实现的常见网页设计应用,PS教程,图老师教程网

苹果刚刚推出了一些展示HTML5网页效果的页面(HTML5和CSS3往往被联系在一起)。虽然这个使用CSS3创建的 Polaroid-style相册有些过渡和3D效果无法在所有的浏览器中运行,不过这真的是一个很酷的CSS3过渡效果的示例。

来源:https://www.tulaoshi.com/n/20160217/1578211.html

延伸阅读
标签: Web开发
想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件?那么就使用CSS3嵌入字体吧! 上一篇:CSS3教程(6):创建网站多列 要使用一款字体,我们首先需要使用‘@font-face’属性。这必须先准备好我们要用的字体文件。 尽管这样,让我们简单的学习一下字体方面的历史。@font-face属性从CSS2就已经考虑了,但却始终在...
标签: Web开发
阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样。阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样。 上一篇介绍了:CSS3教程(3):border-color网页边框色彩 一般可以分为box-shadow和textshadow两类。 CSS3的box-shadow和textshadow可以写做:box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y...
标签: Web开发
上月组织了一次 CSS3 设计赛,最终有 5 位设计师获奖,获奖作品体现了 CSS3 技巧的原创性与独特性,同时展示了 CSS3 的强大的功能,这些作品基于纯 CSS3 技术,并不借助 JavaScript 或其它技术。 Smashing Magazine 为了激发 Web 设计者对 CSS3 的兴趣,上月组织了一次 CSS3 设计赛,最终有 5 位设计师获奖,获奖作品体现了 CSS3 技巧的原创...
现在大多数浏览器支持CSS3技术,因此许多大胆且富有创意的设计师开始学习运用它,有一大票童鞋已经在CSS3的路上高歌猛进,以下就是它们的作品,每一个都酷炫难挡,根本停不下来。 Quechua 有些网站就是喜欢带点动感,这个Quechua就是使用了视屏背景,视觉效果很好。 LanderApp 4N 4N高档手表网站设计,不仅技术厉害,设计师的绘画也...
标签: Web开发
页面中圆角的实现是个很头疼的问题,虽然现在有很多种实现方法,但是都是比较麻烦的。在本文中,让我们看看如何使用CSS3 border-radius来实现圆角DIV。 跨浏览器兼容性 就像在上一篇《CSS3教程:什么是CSS3》中提到的,并不是所有的浏览器支持CSS3,但是那些比较好的浏览器选择兼容,而不是直接支持。我们有两个能使用的前缀。 前缀: -moz...

经验教程

38

收藏

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