当前位置: 首页 > 编程日记 > 正文

巧用CSS的Glow滤镜

作者:冯永曜

对一个对象使用“glow”滤镜后,这个对象的边缘就会产生类似发光的效果,这种效果在PHTOSHOP中做起来都比较麻烦,而在DW3中用CSS的“glow”滤镜来制作却是如此地简单,而且节约不少字节。
“glow”滤镜只有两个参数,一个是“color”是指定发光的颜色,可用十六进制的颜色代码来设定,如#FF0000(表示红色);另一个参数是“strength”则是表示发光的强度,可以从1到255之间的任何整数来指定这个发光强度,也可简单地理解为光芒的长度。下面我们来做几个应用实例。

一、发光的文字
请看下面的效果图:

图1 “glow”滤镜加载到文字上的效果

上面这种效果不错吧?!制作“glow”滤镜与其它CSS滤镜在方法上没有什么区别,故不再重复。“glow”滤镜可以直接加载到文字上,所以使用非常方便。上面这种效果的滤镜代码是:Glow1(Color=#0000FF, Strength=7),你对“Color"和“Strength”设置不同的值,将得到不同的效果,你可以动手试试。

二、给图片加渐变外框
“glow”滤镜加载到一般图片无效,但若是把图片放到表格中,再给表格的< td >加上“glow”滤镜,却能使图片产生一个渐变颜色的边框,请看下面的效果:

图2 在< td >上加载“glow”滤镜的效果

这里使用的“glow”滤镜代码是:Glow1(Color=#0000FF, Strength=7)。但请你在具体制作时注意:为了加强效果,可以加上背景色,但你只能给表格加背景色,而一旦你给单元格加上背景色,“glow”滤镜就无效了。

三、为透明背景的图片增色
“glow”滤镜加载到一般图片上无效,但加载到有透明背景的gif图片上却能产生一种光晕效果,请看下面的效果图:

图3 “glow”滤镜加载到透明背景图片上的效果

在透明的gif 图片上可以直接加载“glow”滤镜,也就是用鼠标点击一下图片,然后,点击快速启动栏上的CSS图标,在对话框中选择一个“glow”滤镜即可。本例的“glow”滤镜代码是Glow1(Color=#CCFF99, Strength=7)。
“glow”滤镜的参数不多,使用也就比较简单,在具体应用时关键的问题是光芒颜色的选择,原则是与整个页面色彩要协调。我们再来看看在上例中再给< td >加载一个“glow”滤镜,代码为Glow2(Color=#0000FF, Strength=7),将获得如下图所示的效果:

图4 两次加载滤镜的效果

这种效果有点酷吧?!此时你在网页的源代码< head >与< /head >可看到这样一些代码:
< style type="text/css" >
< !--
.glow1 { filter: Glow(Color:#CCFF99, Strength:7) }
.glow2 { filter: Glow(Color:#0000FF, Strength:7) }
-- >
< /style >
而在< td >的代码是这样的:< td class="glow2 glow1" > 。这就给我们一个启示,多次加载“Glow”滤镜可产生一些奇特的效果,如制作发生日蚀时太阳的图片,火焰文字效果等等,这完全取决于你的创意。

相关文章:

10大经典排序算法,20+张图就搞定

作者 | 李肖遥来源 | 技术让梦想更伟大冒泡排序简介冒泡排序是因为越小的元素会经由交换以升序或降序的方式慢慢浮到数列的顶端&#xff0c;就如同碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样&#xff0c;故名冒泡排序。复杂度与稳定性思路原理以顺序为例从第一个元素开始一…

C# MoreLinq 扩展安装

为什么80%的码农都做不了架构师&#xff1f;>>> http://blog.csdn.net/lee576/article/details/42716905 MoreLinq是一个对Linq to object的扩展类库,它是一个开源项目(http://code.google.com/p/morelinq/source/browse 天朝已对google全力封禁,所以要翻墙)&#…

IOS学习博客不错的大部分是原创

http://blog.csdn.net/iukey/article/category/955062

巧用CSS的Light滤镜

作者&#xff1a; 冯永曜Light滤镜能产生一个模拟光源的效果&#xff0c;但使用它要通过调用它的“方法&#xff08;Method&#xff09;”来实现&#xff0c;这就要用到一些Javascrpt知识&#xff0c;虽然有一点难度&#xff0c;但产生的效果也是奇特的&#xff0c;你看看下面的…

没有场景,不做单点技术输出,360数科如何做金融科技的最佳实践?

作者 | Just 出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09; 从互联网金融公司转变为金融科技公司&#xff0c;品牌升级后的360数科强化了“科技”的外衣。 在近期的首个360数科技术开放日&#xff0c;360数科CEO吴海生表示&#xff0c;他们已经做好金融科技的最佳…

react构建淘票票webapp,及react与vue的简单比较。

前言 前段时间使用vue2.0构建了淘票票页面&#xff0c;并写了一篇相关文章vue2.0构建淘票票webapp&#xff0c;得到了很多童鞋的支持&#xff0c;因此这些天又使用react重构了下这个项目&#xff0c;目的无他&#xff0c;只为了学习和共同进步&#xff01; 项目技术栈 前端技术…

【机器学习】机器学习算法优缺点对比(汇总篇)

作者 | 杜博亚来源 | 阿泽的学习笔记「本文的目的&#xff0c;是务实、简洁地盘点一番当前机器学习算法」。文中内容结合了个人在查阅资料过程中收集到的前人总结&#xff0c;同时添加了部分自身总结&#xff0c;在这里&#xff0c;依据实际使用中的经验&#xff0c;将对此模型…

PLSQL developer 连接不上64位Oracle 解决办法

在64位Windows2003上安装Oracle后&#xff0c;用PLSQL developer去连接数据库出现报错&#xff1a; Could not load "……\bin\oci.dll" OCIDLL forced to…… LoadLibrary&#xff08;……oci.dll&#xff09; returned 0 原因&#xff1a; oci.dll是64位的&#xf…

Docker 使用教程

概括  Docker与传统虚拟机的区别 与传统虚拟机的区别  Docker的安装 的安装  Docker daemon &#xff0c; client &#xff0c; containerd  镜像与容器操作  容器运行配置  Docker网络配置 网络配置  Alpine Docker Image  制作自己的 Docker Image …

话说CSS滤镜

作者&#xff1a;http://www.swtv.com.cn/adjunct/nr/css/css.htmAlpha 透明层次&#xff1a;滤镜效果语法&#xff1a;STYLE"filter:filtername(parameter1,parameter2,parameter3...)"其中&#xff1a;filtername为滤镜的名称&#xff1b;parameter1,parameter2等为…

面向隐私AI的TensorFlow深度定制化实践

作者 | Rosetta团队出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;之前我们整体上介绍了基于深度学习框架开发隐私 AI 框架中的工程挑战和可行解决方案。在这一篇文章中&#xff0c;我们进一步结合 Rosetta 介绍如何定制化改造 TensorFlow 中前后端相关组件&#xf…

”拿来搞笑“的大学生活

”拿来搞笑“这词&#xff0c;是我舍友对我说过好几遍&#xff0c;我才觉得这词用来形容我大学的生活再恰当不过了&#xff0c;感谢他送给我这个词。 下面就列一下我大学期间”拿来搞笑“的事情&#xff1a; —&#xff1a;无偿捐血400毫升。当时认为是一件微不足道的事情&…

巧用CSS的Border属性

。作者&#xff1a;冯永曜 来源&#xff1a;黄山村夫 制作过网页的人都有为画线而烦恼的经历&#xff0c;本文介绍的小技巧也许对你有所帮助。我们先来认识一下“Border”&#xff08;画边框&#xff09;&#xff0c;它是CSS的一个属性&#xff0c;用它可以给能确定范围的HTML标…

阿里资深算法专家:如何突围大厂算法面试?

2020 届秋招&#xff0c;算法岗灰飞烟灭。最聪明的应届生 / 程序员 &#xff0c;都在极度竞争中&#xff0c;面临着前所未有的激烈 PK 。学生因“内卷”而迷茫&#xff1b;初级程序员遇职业发展瓶颈而困惑...面对重重压力&#xff0c;苦不堪言。to do list 上写满计划&#xff…

乡下人最嘲笑城里人的16件事,无语了!

一、出门「taxi」&#xff0c;乘电梯上七楼的健身房&#xff0c;然后在跑步机上挥汗如雨。 二、半夜上网&#xff0c;去歌厅、舞厅&#xff0c;困了不睡觉。之后失眠&#xff0c;再吃安眠药。 三、管儿子叫「小兔崽子」&#xff0c;管宠物狗叫儿子。 四、挑最有特色的饭店吃…

2017浅谈面试(一)

2017给自己一个目标&#xff0c;制定一份计划&#xff0c;新的开始&#xff0c;跟随创业团队风险无处不在&#xff0c;不过还是要选好Boss。 2016一个煎熬&#xff0c;悲剧&#xff0c;没发工资的日子&#xff0c;一等就等了5个月&#xff0c;零散的就拿到了一个半月工资&#…

乘风破浪的PTM:两年来预训练模型的技术进展

作者 | 张俊林来源 | 深度学习前沿笔记专栏Bert模型自18年10月推出&#xff0c;到目前为止快两年了。它卜一问世即引起轰动&#xff0c;之后&#xff0c;各种改进版本的预训练模型&#xff08;Pre-Training Model, PTM&#xff09;与应用如过江之鲫&#xff0c;层出不穷。Bert及…

DW中CSS属性详解

作者&#xff1a;未知 来源&#xff1a;5D多媒体 在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性&#xff0c;Dreamweaver把这些属性分为Type&#xff08;类型&#xff09;、Background&#xff08;背景&#xff09;、Block&#xff08;块&#xff09;、Box&a…

第十周项目5:贪心的富翁

上机内容&#xff1a;用循环语句完成累加 上机目的&#xff1a;学会循环语句的使用 /* * Copyright (c) 2012, 烟台大学计算机学院 * All rights reserved. * 作 者&#xff1a;孙锐 * 完成日期&#xff1a;2012 年 10 月 31 日 * 版 本 号&…

python requests返回的json对象用json.loads()时转为字典时编码变为了unicode

2019独角兽企业重金招聘Python工程师标准>>> 1.使用simplejson&#xff0c;loads的对象为str&#xff0c;否则还是会转码unicode import simplejson url "" payload {} headers {} r requests.post(url, datapayload, headersheaders)result simplej…

关于Dreamweaver乱码问题的解决方案

原作者&#xff1a;南宫彩虹出处&#xff1a;5D多媒体出现乱码&#xff0c;大致为两种情况&#xff1a; 一是没有标明主页制作所用的文字&#xff0c;这种情况下很简单就可以解决&#xff0c;在<HEAD>区加上<META http-equivContent-Type content"text/html; cha…

百度绝对控股,小度科技独立融资,投后估值200亿元

9月30日&#xff0c;百度宣布旗下智能生活事业群组业务&#xff08;以下简称“小度科技”&#xff09;完成了独立融资协议的签署&#xff0c;本轮融资由百度资本及CPE战略领投、IDG资本跟投&#xff0c;投后估值达约200亿元。作为百度的重要战略业务板块&#xff0c;百度公司对…

Android UI开发第二十五篇——分享一篇自定义的 Action Bar

Action Bar是android3.0以后才引入的&#xff0c;主要是替代3.0以前的menu和tittle bar。在3.0之前是不能使用Action Bar功能的。这里引入了自定义的Action Bar&#xff0c;自定义Action bar也不是完全实现了 Action bar功能&#xff0c;只是在外形上相似。自定义Action bar没有…

ADF12C 在线预览PDF文件 afinlineFrame

转载于:https://blog.51cto.com/feitai/1898433

批量消除虚线框

原作者&#xff1a;星之海洋出处&#xff1a;5D多媒体 各位想必都知道&#xff0c;οnfοcus”this.blur()”这条代码能消除链接时的虚线框&#xff0c;但你有没有想过&#xff0c;如果你的网页上有几个甚至上百个链接&#xff0c;而你又想要去掉上面那些讨厌的虚线框&#xf…

Python实战 | 送亲戚,送长辈,月饼可视化大屏来帮忙!

中秋节介绍中秋节&#xff0c;又称祭月节、月光诞、月夕、秋节、仲秋节、拜月节、月娘节、月亮节、团圆节等&#xff0c;是中国民间的传统节日。中秋节自古便有祭月、赏月、吃月饼、玩花灯、赏桂花、饮桂花酒等民俗&#xff0c;流传至今&#xff0c;经久不息。每年中秋节到&…

lamp一键安装包

lamp一键安装包 http://58.83.226.93/ http://www.centos.bz/lamp/ http://www.centos.bz/ lamp一键安装包 http://58.83.226.93/ http://www.centos.bz/lamp/ http://www.centos.bz/

快节奏的多人游戏同步 - 示例代码和在线演示

这是一个实现我《快节奏的多人游戏同步》系列文章中主要概念的客户端——服务器架构演示示例&#xff08;不包括实例插值&#xff0c;那块我还没弄完&#xff09;建议在阅读完这系列文章后再看这部分。代码是纯JavaScript写的&#xff0c;一页就装下了。少于400行代码&#xff…

探索IE浏览器窗口

探索IE浏览器窗口点燃灵感   星之海洋不知大家是否见过浏览器窗口&#xff08;哎呦&#xff0c;不要打我&#xff01;&#xff09;&#xff0c;其实&#xff0c;不要小瞧了这普普通通的windows&#xff0c;除了常用的window.open()与window.resizeTo()方法来开启窗口外&…

新转机!2020年想裸辞的程序员们注意了

近期&#xff0c;脉脉发布了《2020职场人裸辞现状调研报道》&#xff0c;报道显示2020最让职场人想裸辞的三大原因为&#xff1a;不开心、工资低、没有盼头。报告数据中还显示&#xff0c;工资不满预期是最让人想要裸辞的主要原因&#xff0c;但有超过6成职场人表示&#xff0c…