css滤镜基础教程

CSS滤镜基础





随着网页设计技术的发展,人们已经不满足于原有的一些HTML标记,而是希望能够为页面添加一些多媒体属性,例如滤镜的和渐变的效果。CSS技术的飞快发展使这些需求成为了现实。从现在开始我要为大家介绍一个新的CSS扩展部分:CSS滤镜属性(Filter Properties)。使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上,例如图片、文本容器、以及其他一些对象。对于滤镜和渐变效果,前者是基础,因为后者就是滤镜效果的不断变化和演示更替。当滤镜和渐变效果结合到一个基本的SCRIPT小程序中后,网页设计者就可以拥有一个建立动态交互文档的强大工具。也就是CSS FILTER+ SCRIPT,    这就说明想要建立动态的文档还要一些SCRIPT (脚本语言)的基础。










正常的图片    <img src="flower1.jpg" > 模糊效果处理后的图片,哪个更漂亮,你觉得呢!达到这个效果很容易。仅仅是加了点东东。
<img src="flower1.jpg" style="filter:blur(strength=50)">

自己试试,看看有假没有!不要你用什么Photoshop之类的图象软件,简简单单语法如下:
filter:filtername(parameters)       既 filter:滤镜名称(参数)

可视化滤镜属性只能用在HTML控件元素上。所谓的HTML空间元素就是它们在页面上定义了一个矩形空间,浏览器的窗口可以显示这些空间。下面列出了HTML合法的控件和它们的说明。

备注:可惜只有IE4.0以上支持,如果是别的浏览器,那就.......















































元素 说明
BODY 网页文档的主体元素,所有的可见范围都在<BODY>元素内
BUTTON 表单域的按钮,可以有“发送(submit)”、“重置(reset)”等形式
DIV 定义了网页上的一个区域,这个区域的高度、宽度或者绝对位置都是以知的
IMG 图片元素,通过指定“src"属性来指定图片的来源
INPUT 输入表单域
MARQUEE 移动字幕效果
SPAN 定义了网页上的一个区域,这个区域的高度、宽度或者绝对位置都是以知的
TABLE 表格
TD 表格数据单元格
TEXTAREA 文本区域
TFOOT 多行输入文本框
TH 表格标题单元格
THEAD 表格标题
TR 表格行

 

IE4.0以上支持的滤镜属性表















































滤镜效果 描述
Alpha 设置透明度
Blru 建立模糊效果
Chroma 把指定的颜色设置为透明
DropShadow 建立一种偏移的影象轮廓,即投射阴影
FlipH 水平反转
FlipV 垂直反转
Glow 为对象的外边界增加光效
Grayscale 降低图片的彩色度
Invert 将色彩、饱和度以及亮度值完全反转建立底片效果
Light 在一个对象上进行灯光投影
Mask 为一个对象建立透明膜
Shadow 建立一个对象的固体轮廓,即阴影效果
Wave 在X轴和Y轴方向利用正弦波纹打乱图片
Xray 只显示对象的轮廓

时间: 2007-03-28

AngularJs 60分钟入门基础教程

AngularJs是一个不错的用于开发SPA应用(单页Web应用)的框架.单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.浏览器一开始会加载必需的HTML.CSS和JavaScript,所有的操作都在这张页面上完成,由JavaScript来控制不同view在这个页面上的呈现.本文源于Youtube上一个不错的AngularJs的入门教程视频:AngularJS Fundamentals In 60-ish Minutes,主要讲解了

python基础教程项目三之万能的XML

这个项目的名称与其叫做万能的XML不如叫做自动构建网站,根据一份XML文件,生成对应目录结构的网站,不过只有html还是太过于简单了,如果要是可以连带生成css那就比较强大了.这个有待后续研发,先来研究下怎么html网站结构. 既然是通过XML结构生成网站,那所有的事情都应该由这个XML文件来.先来看下这个XML文件,website.xml: <website> <page name="index" title="Home page"> &l

Webpack基础教程之名词解释

一.概念介绍 本质上,webpack 是一个现代JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle. 它是高度可配置的,但是,在开始前你需要先理解四个核心概念: 入口(entry) 输出(output) loader 插件(plugins) 1. 入口(entry) 指定webpack从

css滤镜属性语法介绍

css滤镜  Style属性: 可以应用在标签中,更可用广泛应用在<table><tr><td><body> <center><img><input><font><form><frame><label><map>等等标签中, 更重要的是,它可用在标签中. 页面切换效果: 在页面前部与之间加入"" 说明:duration为页面切换的时间长度,3.

Javascript常用运算符(Operators)-javascript基础教程

javascript基础教程算术运算符 运算符 运算符说明 示例 示例说明 + 加法 x+y 如果x为整数2,y为整数5, x+y等于7 如果x为字符串"text1", y为字符串"fun", x+y则等于"text1fun" - 减法 x-y * 乘法 x*y / 除法 x/y % 两者相除求余数 x%y 如果x等于10, y等于3, x%y结果等于1 ++ 递增 x++ 如果x等于10, x++等于11 -- 递减 y-- 如果y等于10,

微信小程序开发入门基础教程

微信小程序开发入门基础教程 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow

JS基础教程——正则表达式示例(推荐)

正则表达式的() [] {}有不同的意思. () 是为了提取匹配的字符串.表达式中有几个()就有几个相应的匹配字符串. (\s*)表示连续空格的字符串. []是定义匹配的字符范围.比如 [a-zA-Z0-9] 表示相应位置的字符要匹配英文字符和数字.[\s*]表示空格或者*号. {}一般用来表示匹配的长度,比如 \s{3} 表示匹配三个空格,\s[1,3]表示匹配一到三个空格. (0-9) 匹配 '0-9′ 本身. [0-9]* 匹配数字(注意后面有 *,可以为空)[0-9]+ 匹配数字(注意后

Kotlin 基础教程之反射

Kotlin 基础教程之反射 概述 反射是语言与库中的一组功能, 可以在运行时刻获取程序本身的信息.在Kotlin中,不仅可以通过发射获取类的信息,同时可以获取函数和属性的信息.也就是说,在在运行时刻得到一个函数或属性的名称和数据类型) 可以通过简单的函数式, 或交互式的编程方式实现. 在Java平台上, 使用反射功能所需要的运行时组件是作为一个单独的JAR文件发布的( kotlinreflect.jar). 这是为了对那些不使用反射功能的应用程序, 减少其运行库的大小. 如果你需要使用反射,

Kotlin 基础教程之异常

Kotlin 基础教程之异常 概述 在Kotlin-null的处理里提到的NPE,它就是一个异常.而,异常是程序运行过程中出现的错误.在Kotlin中,所有的异常都继承于Throwable.对于每一个异常而言,它不仅仅包括异常的信息,还可以选择性包括异常的原因,而其原因也是一个异常的实例. 抛出异常 使用 throw表达式抛出异常: throw MyException("Hi There!") 捕获异常 如果在函数内部抛出了异常(或者在函数内部调用的其他函数抛出了异常),这个函数将在抛