5个使用CSS3实现的常见效果

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

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

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

1. CSS3按钮

 

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

2.CSS3柱形图

 

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

3. CSS3下拉菜单

 

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

4. CSS3引用气泡

 

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

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

5. CSS3相册

 

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

想看更多CSS3和HTML5的demo,请点击这里。

时间: 2025-01-14 22:13:01

5个使用CSS3实现的常见效果的相关文章

css3 文字效果: 如何利用CSS3制作3D文字效果

下面这篇教程是教你如何用CSS3来制作3D效果的文字,文章翻译自3D CSS Shadow Text Tutorial.这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果.请注意,这个3D文字效果是用纯CSS的,没有用Javascript,并且需要用支持CSS3的浏览器才能看出效果,如firefox.chrome.safari和opera.CSS文字阴影是如何实现的为了实现3

如何利用CSS3制作3D文字效果

下面这篇教程是教你如何用CSS3来制作3D效果的文字,文章翻译自3D CSS Shadow Text Tutorial. 这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果.请注意,这个3D文字效果是用纯CSS的,没有用Javascript,并且需要用支持CSS3的浏览器才能看出效果,如firefox.chrome.safari和opera. CSS文字阴影是如何实现的 为了

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

CSS3实现时间轴效果

原文:CSS3实现时间轴效果 最近打开电脑就能看到极客学院什么新用户vip免费一个月,就进去看看咯,这里就不说它的课程怎么滴了,里面实战路径图页面看到了这个效果: 有点像时间轴的赶脚,而且每一块鼠标悬浮上去也有下拉效果展开介绍截图信息,就感觉效果还不错.但感觉这种效果貌似对于动态添加不是很灵活,因为高度不像宽度可以灵活的自适应,故添加得自己一个一个设置.所以很多都是做成展示效果. 当然啦,自己也基于它的这个想法搞了一点简单点的类似效果,主要还是整个布局效果,具体每一块内容就不仿造了,而且我自己也

JS+CSS3模拟溢出滚动效果_javascript技巧

移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件.最近接连遇到两个页面都有类似overflow:auto的效果,一般情况下通过css设置是可以实现的(虽说丑了点儿),,但是一旦overflow:auto的元素响应touch事件时就会有诸多不便,例如fullpage中某一元素自滑动,我们可以通过normalScrollElements来使元素滑动的时候不滑动到下一屏,但是在元素滑动到最底部的时候也就不能响应下一屏事件,上滑也是一样,这时候就需要touch事件来响应,

jquery实现搜索框常见效果的方法_jquery

本文实例讲述了jquery实现搜索框常见效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>jquery搜索框效果</title> <script type="text/javascript

用css3实现各种图标效果

原文:用css3实现各种图标效果 公共样式 应该说现在绝大多数公司的项目前端都是一团乱,不仅仅是js写的没有任何框架而言,css同样也是如此,导致项目如果要升级或者说有新的变更维护起来就特别困难. 最近领导决定花大时间整理一下css样式,用他的一句话来说就是为后来者造福. 首先我们在整理样式之前,必须得有一个自己团队的规范. 思考真的很重要,所谓的磨刀不误砍柴工,事实上也就是说你在做任何事情之前都要把大致的流程,大致的思路想清楚之后再动手,否则就可能做到一半发现这样不对,然后前面的工夫全白费了,

用css3实现各种图标效果(2)

原文:用css3实现各种图标效果(2) 写在前面 写的一模一样的css样式,结果却导致原来出来不一样的效果图. 用chrome的开发者工具查看,比较起来还是一模一样的css样式,可为什么会出现不一样的placeholder效果呢?一个白色粗体,一个灰色正常字体. 找了老半天找不到原因 后来才发现是我同事写的框架css里面代码的一句话影响到了 ::-webkit-input-placeholder { color: #a4afc6; } 可是为什么在chrome控制台看不到这句代码呢?请教了一番同

CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效_经验交流

今天分享一个CSS3制作的翻牌效果,效果如下图所示,所过把把这个效果应用于相册肯定会很炫的.呵呵,超酷啊. 一.HTML代码: 因为是CSS3实现,所以大家可以看到没有任何的JS代码.ul为一组图片,每个li中有个a(因为我们希望点击图片可以跳转),a中包含两个div,一个是正常显示时的(即显示图片),一个是图片旋转后显示的(即介绍). <!doctype html> <html> <head> <meta charset="gb2312"&g