Tag: css3预览模式: 普通 | 列表

CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。

-webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。下面咱们就学习一下filter这个属性吧。

现在规范中支持的效果有:

  • grayscale 灰度               值为0-1之间的小数 
  • sepia 褐色         值为0-1之间的小数
  • saturate 饱和度     值为num
  • hue-rotate 色相旋转  值为angle
  • invert 反色        值为0-1之间的小数
  • opacity 透明度     值为0-1之间的小数
  • brightness 亮度     值为0-1之间的小数
  • contrast 对比度     值为num
  • blur 模糊           值为length
  • drop-shadow 阴影

没加什么效果的图片:

查看更多...

Tags: css3

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 344

css3背景图片全屏显示

如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。
比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。
所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。所以一般用作背景图片的有2类:

1.是一整张大图,尺寸和区域大小刚好吻合
2.一个很小的条状图,通过repeat后,形成一个很规则的大图背景。

但是css3出现以后,这个情况被改善了。background-size 属性可以让我们之前的希望成真。
而且这个属性在firefox,chrome,以及ie9上都可以使用。

背景图尺寸(数值表示方式): 

CSS代码
  1. #background-size{   
  2. background-size:200px 100px;   
  3. }   

查看更多...

Tags: css3

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1799

CSS3之渐变效果

CSS3渐变色生成网站:http://gradients.glrzad.com/
在CSS3出来以前,想要显示一个渐变的效果,必须要专门制作一个图片。
CSS3的出现,使得渐变色得以简单的实现。由于不是所有的浏览器都支持CSS3,所以不是所有的浏览器都能够显现出渐变的效果来。
目前,Mozilla内核的(Firefox)和webkit内核的(Safari/Chrome)浏览器支持这一属性。不过,两者对于渐变的语法有些差异。

查看更多...

Tags: css3

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2702

 广告位