对于设计人员和开发人员来说,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,请点击这里
。
转自:http://cnbeta.com/articles/113068.htm
分享到:
相关推荐
HTML5是超文本标记语言的第五次重大修订,而CSS3则是层叠样式表的最新版本,这两者的结合为开发者提供了更多创新的可能性。 在HTML5中,新增了许多功能强大的元素和API,使得网页内容的结构化更加清晰。例如,`...
网上收集的47个Html5CSS3实例,帮助了解HTML5和CSS3特性。
本资源集合包含了“上百个CSS实例”,旨在帮助初学者快速掌握CSS的基础知识和应用技巧。 1. **CSS选择器**:CSS的选择器是定位HTML元素的关键,包括标签选择器、类选择器、ID选择器、属性选择器等。例如,`p` 选择...
在"HTML5与CSS3实例教程 第二版"中,源代码涵盖了这些技术的应用,通过实际操作,学习者可以深入理解HTML5和CSS3的新特性,并掌握如何在实际项目中运用它们。代码文件(code)包含了这些实例的完整代码,供学习者...
本实例聚焦于HTML5+CSS3实现的3D立方体旋转效果,这是一个能够吸引用户注意力,提升网站视觉吸引力的炫酷特效。 HTML5是超文本标记语言的第五版,它扩展了原有的HTML4.01,引入了新的元素,如、、、等,使得网页...
【标题】:“h5+css3实例①”是指一个基于HTML5和CSS3技术的实战项目案例。在这个实例中,开发者将运用HTML5的新特性与CSS3的样式规则来创建一个具有现代网页设计感的页面。HTML5是超文本标记语言的最新版本,它引入...
综上所述,这个经典CSS实例可能涵盖了JavaScript与CSS的结合、背景图片的应用、盒模型、定位、浮动以及CSS3的新特性,这些都是网页设计和开发中的关键技能。通过深入研究这个实例,我们可以更好地理解和掌握CSS的...
通过学习和研究这个实例,你可以了解到如何创建和控制CSS3动画,如何与HTML5元素结合使用,以及如何优化网页性能,确保动画流畅而不影响页面加载速度。这将有助于你提升网页设计和开发的技能,让你能够创造出更具...
而"CSS教程"很可能是一个包含CSS实例和讲解的文件,可能是PDF、HTML文档或者是某个教学平台的课程链接。这个文件是本次学习的核心,其中应该包含了大量的CSS代码示例、解释和练习,涵盖基础选择器、盒模型、布局技术...
这个“div+css 网站实例 教程 css布局”显然是一个关于如何使用这两种技术来创建高效、可维护和响应式的网站的教程资源。 首先,Div元素在HTML中的主要作用是将网页内容分隔成多个独立的区域,每个区域可以有不同的...
HTML5+CSS3网页设计实例教程实例源代码
在现代网页设计中,CSS3和jQuery是两个非常重要的技术,它们共同为创建交互性和视觉效果丰富的用户体验提供了强大支持。CSS3(层叠样式表3)扩展了CSS2,引入了更多新的选择器、动画、过渡和3D效果,而jQuery则是一...
本资源包含24个`DIV+CSS`的经典实例源码,这些实例几乎涵盖了`DIV+CSS`技术的所有核心知识点,对于学习和提升`DIV+CSS`技能极具价值。 首先,我们要理解`<div>`标签。`<div>`是HTML中的一个块级元素,用于组织文档...
【个人主页css3实例源码】是一个集合了CSS3技术在个人主页设计中的实际应用案例。这个源码包可能是为了帮助开发者或者设计师更好地理解和学习如何使用CSS3来创建吸引人的、功能丰富的个人主页。CSS3是层叠样式表...
在本实例中,我们将深入探讨如何利用HTML5的`<canvas>`元素和CSS3的3D变换来创建一个3D立方体旋转动画。 首先,HTML5的`<canvas>`元素是一个强大的绘图工具,允许开发者通过JavaScript动态绘制图形。在这个3D立方体...