`
as1001001
  • 浏览: 89977 次
  • 性别: Icon_minigender_1
  • 来自: 鞍山
社区版块
存档分类
最新评论

HTML+CSS入门材料

阅读更多
两个资料,是HTML和CSS入门手册。
http://www.w3school.com.cn/

css滤镜
下面是一些滤镜的描述,有的有示范,有的没有.

Alpha滤镜

语法:Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

参数和功能: 使对象产生透明度。

参数名称 功能 参数
Opacity 图片的不透明度 值从0-100,0为完全透明,100为完全不透明
FinishOpacity 设置渐变的透明效果时,用来指定结束时的透明度 值从0-100,0为完全透明,100为完全不透明
Style 指定渐变的显示形状 0:没有渐进;1:直线渐进;2:圆形渐进;3:矩形渐进
StartX 渐变透明效果开始的X坐标值  
StartY 渐变透明效果开始的Y坐标值  
FinishX 渐变透明效果结束的X坐标值
FinishY 渐变透明效果结束的Y坐标值



Blur滤镜

语法:Blur(Add=?, Direction=?, Strength=?)

参数和功能: 使对象产生模糊效果。

参数名称 功能 参数
Add 指定图片是否显示原来的模糊方向 0:不显示原对象;1:显示原对象 
Direction 设置模糊的方向 0(上),45(右上),90(右),135(右下),180(下),225(左下),270(左),315(左上)

Strength 指定模糊图像模糊的半径大小 以pixels为单位,默认为5



Chroma滤镜

语法:Chroma(Color=?)

参数和功能:某个颜色变透明。这个功能对图片的支持不是很好。

参数名称 功能 参数
color
把图片或文字中的某个颜色变为透明 RGB格式的颜色值



Dropshadow滤镜

语法:DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

参数和功能: 阴影效果。这个功能对图片的支持不是很好,普遍用于文字。

参数名称 功能 参数
Color 指定阴影的颜色 RGB格式的颜色值
OffX 指定阴影相对于对象在水平方向的偏移 整数。正数表示阴影在对象右方,负数表示在左方。
OffY 指定阴影相对于对象在水垂直方向的偏移 整数。正数表示阴影在对象上方,负数表示在下方。
Positive 指定阴影的透明度 0:透明,无阴影;非0:阴影的强度



示范:

文字效果

DropShadow(Color=#a0a0a0, OffX=5, OffY=5, Positive=1)



FlipH、FlipV滤镜

无任何参数。FlipH使对象产生水平翻转效果;FlipV使对象产生垂直翻转效果。



Glow滤镜

语法:Glow(Color=?, Strength=?)

参数和功能:使对象的外轮廓产生一种光晕效果。一般用于文字效果。

参数名称 功能 参数
Color 指定光晕的颜色 RGB格式的颜色值
Strength 指定光晕的范围 设定值从1-255,数字越大光晕越强



示范:

文字效果

Glow(Color=ff0000, Strength=2)



Gray滤镜

无任何参数。使图片由彩色变为灰白色调。

Invert滤镜

无任何参数。使图片产生照片底片的效果。

Light滤镜

语法:Light(?)

参数和功能:模拟光源的投射效果。不过要通过调用方法来实现,这就需要用到javascript动态滤镜编程。在这里就不细说了。

方法 功能
AddAmbient 加入包围的光源
AddCone 加入锥形光源
Addpoint 加入点光源
Changcolor 改变光的颜色
Changstrength 改变光源的强度
Clear 清除所有的光源
MoveLight 移动光源



Mask滤镜

语法:Mask(Color=?)

参数和功能:在对象上建立一个覆盖于表面的膜。对图像的支持不好,普遍用于文字。

示范:

文字效果

Mask(Color=ff0000)


Shawdow滤镜

语法:Shadow(Color=?, Direction=?)

参数和功能:与dropshadow非常相似,也是一种阴影效果。dropshadow没有渐进感,shadow有渐进的阴影感。

参数名称 功能 参数
Color 指定阴影的颜色 RGB格式的颜色值
Direction 指定阴影的方向 0:垂直向上;每45度为一个单位



示范:

文字效果

Shadow(Color=#0099ff, Direction=90)


Wave滤镜

语法:Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

参数和功能:使对象在垂直方向上产生波浪的变形效果。

参数名称 功能 参数
Add 表示是否显示原对象 0:不显示;1:显示
Freq 设置波动的数量 自然数
LightStrength 设置波浪效果的光照强度 0-100,1为最弱,100为最强
Phase 波浪的起始相位 0-100
Strength 设置波浪摇摆的幅度 自然数

X-ray滤镜

无任何参数。使图片只显示其轮廓。
分享到:
评论

相关推荐

    DIV+CSS入门例子

    本资源"DIV+CSS入门例子"是针对初学者准备的一份极佳的学习材料,通过具体的实例帮助初学者快速掌握这两种技术的核心概念。 `DIV`(Division)在HTML中是一个通用容器元素,用于组织和分隔页面内容。它的主要作用是...

    HTML+CSS从入门到精通(中文)

    配合提供的资源,如"零基础学HTML+CSS雷宁 电子书.url"和"HTML+CSS网页设计与布局 从入门到精通",你将能够获得更丰富的学习材料和实践案例。同时,"PDF阅读器下载.url"可以帮助你更好地查看和学习PDF格式的教程。 ...

    div+css入门

    《div+css入门》是针对网页设计初学者的教程,主要涵盖了如何利用div和CSS进行网页美化和布局的基础知识。CSS(Cascading Style Sheets)是用于控制网页元素样式和布局的重要工具,而div(Division)是HTML中的一个...

    html+css(入门)

    在“HTML+CSS”这个压缩包中,可能包含了课程的所有学习材料,如讲义、实例代码、练习项目等。建议按照课程的结构逐步学习,先理解HTML的基本结构和元素,再深入研究CSS的选择器、盒模型、定位和布局策略。同时,...

    html+css浅谈

    本压缩包包含三部分培训材料:《html+css培训(一).ppt》、《html+css培训(二).ppt》和《html+css培训(三).ppt》,它们将逐步深入地介绍这两个领域的基础知识和应用技巧。 首先,我们从HTML开始。HTML是网页的...

    HTML+JS+CSS培训课件和练习(含答案)

    这个"HTML+JS+CSS培训课件和练习(含答案)"的资源包为初学者提供了一套完整的自学材料,涵盖了从基础到进阶的各个层面。以下是这些知识点的详细说明: 1. HTML (HyperText Markup Language):HTML是网页的基础,用于...

    HTML5+CSS3简单有趣的实例

    在这个“HTML5+CSS3简单有趣的实例”压缩包中,包含了一些适合初学者入门和教学使用的项目,如日历、轮播图和模态弹窗等。这些实例将帮助学习者更好地理解HTML5的新特性以及CSS3的强大样式控制能力。 HTML5是超文本...

    Web-前端html+css从入门到精通 213. bootstrap4之content.zip

    这个压缩包“Web-前端html+css从入门到精通 213. bootstrap4之content.zip”显然包含了关于使用Bootstrap 4进行网页设计和开发的教学资源,特别是关于“content”的部分。这里我们将深入探讨Bootstrap 4中的核心内容...

    html+css解读

    例如《HTML5与CSS3权威指南》以及配套的源码,这是一份非常适合初学者的学习材料,它能够帮助你理解HTML和CSS的基础知识,并逐步过渡到更高级的主题。 除了文档和电子书,还有很多源代码示例可以供学习者下载和分析...

    HTML与CSS入门经典 第8版 英文原版

    ### HTML与CSS入门经典 第8版 英文原版 #### 知识点概览 本书《HTML与CSS入门经典 第8版》是一本全面介绍HTML(HyperText ...无论是自学还是作为培训材料,《HTML与CSS入门经典 第8版》都是一本不可多得的好书。

    伸缩盒模型网页(HTML+CSS).zip

    弹性盒子模型,也称为Flex布局,是现代网页设计中一种强大的...这不仅是初学者入门的好材料,也是开发者提升技能的有效途径。实践出真知,动手操作是理解Flex布局的关键,所以尝试打开这个压缩包,亲自探索和实验吧!

    HTML+CSS+JavaScript快速入门+实战演练

    HTML、CSS和JavaScript是构建网页和交互式用户体验的三大核心技术。这篇文章将为你提供一个快速入门的框架,并通过实战演练加深理解。 首先,我们从HTML(HyperText Markup Language)开始,它是网页的基础结构语言...

    33本HTML5+CSS3相关电子书教程打包下载 卷2

    这些电子书集合不仅适合初学者入门,也对有经验的开发者提供了深入研究和实践的素材,涵盖了HTML5和CSS3的广泛主题,对于想要提升自身技能或深入了解这两项技术的人来说,是非常宝贵的学习资源。

    教学课件-HTML+CSS+JavaScript网页设计.ppt

    初学者会学习如何编写第一个HTML页面,从而入门网页制作。 本章还提到了【思考和练习】部分,以巩固学习成果,确保读者能够理解和实践所学知识。 总的来说,这个教学课件覆盖了网页设计的基础,包括网页的定义、...

    HTML5+CSS3培训ppt

    HTML5和CSS3是现代网页开发的两大核心技术,它们极大地扩展了网页的呈现能力和交互性。这份由惠普公司内部使用的培训PPT旨在为初学者...通过这份惠普公司的培训材料,学习者可以快速入门,逐步掌握这些重要的技术知识。

Global site tag (gtag.js) - Google Analytics