Vanessa

大前端的点滴生活

8 个应该了解的 CSS3 技术

有了 CSS3,网站开发及网站设计都发展到一个更高的层次。在本文中,作者收集了一些惊人的使用 CSS3 技术的例子,如果多数浏览器能兼容 CSS3,那么这些技术很可能会被广泛接受。 

1. Color animate any shape with CSS3 and a PNG


第一个展示的是一个仅仅使用了 CSS3 技术的有趣的成果:一个可以变换背景的 PNG 图像。背景使用了 CSS3 转变。不是那种可以直接放在网站上的效果,而是展示 CSS3 功能的有趣的演示。



2. Create adaptable layout using CSS3 media queries


CSS3 媒体调查可以使你的网站构架兼容于浏览器。也就是说,你可以轻松的制作一个同时适用于大型展示和手机移动装置的设计,它具有较强的适应力。 也许你 已经度读过我关于那个主题的文章,所以我挑选了另外一个由网站设计师 Nick La 编写的实用教程。一个所有的网站开发师们都应该知道的技术!



3. Dim entire page when certain link is rolled over, css way


适用于网站软件的:当一个特定的链接自动翻滚时,页面的剩余部分会呈昏暗状态。对于其它难度更高的实验来说,这项技术可能也是一个起点。



4. Clipping text with CSS3 text-overflow


text overflow 是 CSS3 另外一个新的属性,可以解决容量不足的问题。这个例子会告诉你关于该属性的一些知识点。不幸的是,我的这篇文章,由于文本内容超过规定容量这个问题,只能使用 Opera 和 IE9 浏览器。



5. Full Browser Width Bars 完整的浏览器宽度条


另外一个有用的技巧来自于 Chris Coyier:这个教程会教你制作完整的浏览器宽度条。



6. CSS Mask-Image & Text CSS 图像遮罩和文本


使用 CSS3 和���像遮罩技术的文本成果。不幸的是,其效果在一些浏览器无法显示,但这种问题在慢慢减少。当主要的浏览器都能兼容 CSS3 时,这项成果肯定会变得非常受欢迎。



7. Image slider with CSS3 transitions 使用 CSS3 转换制作图像滑块


还有谁没有听说过 JavaScript 滑块,比如说 NivoSlider?过去的两三年,该效果十分风靡。新的 CSS3 动画技术,可以加强图像之间的转换。这个工具叫 Flux Slider,不兼容于 jQuery 和 Zepto.js。基本上任何浏览器都支持 CSS3 的图像转换。



8. Flared Borders with CSS 使用 CSS3 扩大图像边框


当你需要制作图像,在一个圆角 box 中显示,有过这种情况吗?。多亏了扩大图像边框这一功能,这个让人头疼的过程再也不需要了。这个教程教给你如何使用 CSS3 制作过大图像边框元素。而全部的代码将会在老式浏览器中慢慢淘汰。



转自:http://www.mhtml5.com/2011/08/2442.html


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步