用CSS3做的各种网页效果

2016-02-17 03:58 18 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区，我们拥有最用心的各种教程，今天就给大家分享用CSS3做的各种网页效果的教程，热爱PS的朋友们快点看过来吧！

【 tulaoshi.com - 平面设计】

用纯CSS也可以实现各种各样很酷的效果了，甚至是动画。虽然有些效果不能跨浏览器(甚至是支持CSS3的浏览器)运行，有些只是展示并没什么实际用途，但仅用CSS实现出的这些效果似乎没什么可以挑剔的。

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

用CSS3做的各种网页效果,PS教程,图老师教程网

这里有5个使用CSS3实现的常见效果，你可以马上动手试试看。

1. CSS3按钮

用CSS3做的各种网页效果,PS教程,图老师教程网

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

2.CSS3柱形图

用CSS3做的各种网页效果,PS教程,图老师教程网

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

3. CSS3下拉菜单

用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过渡效果的示例。

来源:http://www.tulaoshi.com/n/20160217/1578281.html

看过《用CSS3做的各种网页效果》的人还看了以下文章更多>>

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

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

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

CSS3制作的精彩的网页实例教程

标签： Web开发

今天看到 Joshua Johnson 的一篇 10 Amazing Examples of Innovative CSS3 Animation 很是精彩，大概翻译如下： CSS3带来了很多令人印象深刻的新功能，最有意思的或许是很多基于javascript来实现的功能，现在可以用CSS动画来制作。以下是我找到的用CSS3创建的精彩案例：注意：以下演示代码在IE6等低端浏览器下无效，请下载并安装现代浏览器...

CSS3中如何实现渐变效果

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

渐变可以创建类似于彩虹的效果，低版本的浏览器不的不使开发者用图片来实现，CSS3将会轻松实现网页渐变效果。要得上面的线性渐变效果，我们这样去定义CSS3样式： background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f0...

CSS3教程(3):border-color网页边框色彩

标签： Web开发

现在我们来看一看如何为边框的border-color添加更多的色彩。上一篇介绍了：CSS3教程(2):网页边框半径和网页圆角使用CSS3的border-radius属性，如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6中颜色，那么最后一个颜色将被添加到...

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

标签： Web开发

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

查看更多精彩>>