8个应该了解的CSS3技术

标签: css3 技术 | 发表时间:2011-08-16 14:16 | 作者:设计 XcessLeo
出处:http://www.jobbole.com/blog.php
   注:本文由敏捷翻译- 宋彩珺翻译自Jean-Baptiste Jung的博文。如需转载,请参照文章末尾处的声明。

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


   1. Color animate any shape with CSS3 and a PNG

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

8个应该了解的CSS3技术    伯乐在线 - 职场博客


   2. Create adaptable layout using CSS3 media queries

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

8个应该了解的CSS3技术    伯乐在线 - 职场博客


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

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

8个应该了解的CSS3技术    伯乐在线 - 职场博客


   4. Clipping text with CSS3 text-overflow

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

8个应该了解的CSS3技术    伯乐在线 - 职场博客


   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制作过大图像边框元素。而全部的代码将会在老式浏览器中慢慢淘汰。



   -------------------------------------------------------------------
   你可能对以下文章也感兴趣

   为网页设计创建有效的配色方案
   触控的悖论
   设计高性能的移动用户体验的7个准则
   推荐给平面设计师的5个Android应用
   8款非常有用的CSS工具
   为什么空白区域在网页设计中重要
    
   -------------------------------------------------------------------
  译文出处:伯乐在线 - 职场博客 - 美工设计
  译文链接:http://www.jobbole.com/entry.php/1256

  原文:Jean-Baptiste Jung  翻译:敏捷翻译- 宋彩珺

  如需转载,但请注明原文/译文出处、译文超链接和译者等信息,否则视为侵权,谢谢合作!

  
   

相关 [css3 技术] 推荐:

8个应该了解的CSS3技术

- XcessLeo - 伯乐在线 -博客
   注:本文由敏捷翻译- 宋彩珺翻译自Jean-Baptiste Jung的博文. 如需转载,请参照文章末尾处的声明.    有了CSS3,网站开发及网站设计都发展到一个更高的层次. 在本文中,作者收集了一些惊人的使用CSS3技术的例子,如果多数浏览器能兼容CSS3,那么这些技术很可能会被广泛接受.

使用CSS3媒体查询技术创造响应式设计

- - 收集分享互联网资源!
显示器的分辨率的范围越来越宽泛了,从苹果的 320px(iphone)到 2560px(大显示器其)甚至更大. 用户浏览网页的的设备也不仅仅是桌面电脑了. 现在用户使用手机,上网本,平板电脑设备如iPad 或者 Playbook 等来登录网站. 因此传统的固定宽度的设计的方法将不再适用. 布局需要能自动适应的分辨率和解析设备.

CSS3 Media Queries 详细介绍与使用方法,Responsive Web Design 必备技术

- - Web前端 - ITeye博客
上一篇我们介绍了 Responsive Web Design之后,这次要来详细介绍CSS3 Media Queries了. 在上一篇中,我们提到 Responsive Web Desig n的实作方式有大半都是利用CSS3 Media Queries来达成. 而顾名思义Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支援.

Web 前沿技术:展示一组极其绚丽的 CSS3 效果

- - 博客园_梦想天空
  这篇文章收集了一组非常绚丽的. CSS3 效果应用演示,这些示例演示了 CSS3 各种新特性的强大能力. CSS3 支持的不断完善,设计师和开发者们有了更多的选择,以前需要使用 . JavaScript 才能实现的各种很酷的界面效果和动画,如今使用纯 CSS 代码就可以很容易实现. 相信下面这些 CSS3 演示会让你感到吃惊.

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意,但易用性明显提高了许多. 利用这个,我们可以对某个元素进行旋传,缩放,倾斜与位移,并且区分元素类型,无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

CSS3 代码生成工具:Create CSS3

- - 我爱水煮鱼
CSS3 具有相当多的新增属性,而且包括阴影、动画、过渡等华丽的效果. 但是由于 CSS3 出来并没有很久,各个浏览器厂商还在开发中,有些属性仍然会带有实验性前缀. 而且类似制作动画、渐变的 CSS3 代码也相当复杂,一旦写错就会导致出现问题. 为此,有人开发了一个生成 CSS3 代码的工具 Create CSS3.

CSS3 文字渐变

- slackware - 前端观察
之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可.

用css3写个logo

- 丸子 - 崔凯,前端开发
演示地址:http://uicss.cn/css3/maxthon-logo.html. 先画一个外框 width: 240px; height: 240px;border-radius: 120px;. 填充背景色background:#b1e4ff;. 描边border:2px solid #789cb6;.

CSS3 pointer-events介绍

- Pstrey - 前端观察
其实早知道这个属性,但是一直没有去研究过. 今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下. 嗯,其实这是个比较简单的CSS3属性. 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作.

HTML5 & CSS3 研究文档

- Kings - 幸福收藏夹
已经说了好久,一直没把这个文件夹分享出来. 这是我去年第四季度里做的,里面有 11 一个文档. 包括 HTML5 中最主要的 JS API 文档,还有 CSS3 中两个比较难的属性. 主要还停留在纯 API 层面上的研究,没有深入到应用中去. 不过,当做工具来使用,和入门文档,还是不错的. 特别是其中的 HTML5 JS API 文档.