8个应该了解的css3技术 -凯发k8官方网

有了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.jobbole.com/entry.php/1256

　　原文：jean-baptiste jung　　翻译：敏捷翻译- 宋彩珺

转载于:https://www.cnblogs.com/ginowang42/archive/2011/08/16/2140734.html

总结

以上是凯发k8官方网为你收集整理的8个应该了解的css3技术的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。