CSS基本功先生--滤镜_html/css_WEB-ITnose
程序员文章站
2022-04-21 22:48:50
...
上一篇博客将的事基本的用法,这篇博客咱们讲一下CSS中的滤镜和图片处理。打开网页的时候,尤其是一些公司的官网的时候,首页总是坐的非常的绚烂,以前以为那都是一些flash或者好多图片组合的,现在学习了CSS滤镜,我想看完下边,大家也能做出一些非常绚烂的页面了。
看上去是不是很漂亮,就是几个简单的属性,就能实现Photoshop的功能,而且还可以根据我们的要求来改变。
CSS滤镜并不是浏览器的插件,也不符合CSS标准,而是微软公司为增强浏览功能而特意开发的并整合在IE浏览器中的一类功能的集合由于浏览器有着很广的使用范围,因此CSS滤镜也被广大设计者所喜爱,CSS滤镜的标识符是filter体上跟其它CSS语句一样,都十分简单。
一、滤镜属性
其实滤镜就是一个简单的透明度,但是就是这么一个简单的透明度,却因为他的效果非常的好,所以应用的频率非常的高。
1、Alpha通道
.alpha{ filter:alpha(opacity=50) //表示透明度为50%}2、Blur(模糊)
.blur{ filter:progid:DXImageTransform.Morcrosoft.blur(pixelradius=4,makeshadow=false);}
3、透明色 .chorma{ filter:chromalcolor=FF6800;}4、翻转
.flip1{ filter:fliph; /*水平翻转*/ }.flip3{ filter:flipv; /*竖直翻转*/ }.flip3{ filter:flipv fliph; /*水平竖直同时翻转*/ }
2、滤镜应用
水中倒影大家想必见过吧,非常的好看,那么今天我们就用一个这个滤镜实现一下咱们的水中的滤镜
三个滤镜同时使用
看上去是不是很漂亮,就是几个简单的属性,就能实现Photoshop的功能,而且还可以根据我们的要求来改变。
3、总结
当然在ID里边他用的是filter,但是在非IE浏览器中,用的是opacity,而且他的值在0~1之间,具体的写法就不再这里了,只是需要把filter:alpha(opacity=60)改成opacity=0.6就可以。虽然这个滤镜的功能非常强大,但是不是说PhotoShop不行了,二者各有利弊,Photoshop还是可以为为咱们制定图片的。
推荐阅读
-
Bootstrap组件之Glyphicons字体图标_html/css_WEB-ITnose
-
HTML常用标签之超链接标签_html/css_WEB-ITnose
-
CSS3透明属性opacity_html/css_WEB-ITnose
-
CSS的opacity属性_html/css_WEB-ITnose
-
一款纯css3实现的颜色渐变按钮_html/css_WEB-ITnose
-
运用HTML5+CSS3和CSS滤镜做的精美的登录界面,无用到图片的
-
关于网页路径的疑惑_html/css_WEB-ITnose
-
Codeforces Round #156 (Div. 2)-A. Greg's Workout_html/css_WEB-ITnose
-
html 关于ul标签的_html/css_WEB-ITnose
-
background-size 设置背景图片的大小_html/css_WEB-ITnose