css滤镜使文字变3D效果

为什么80%的码农都做不了架构师？>>>

四夕刚从 OECP社区看到了一篇文章 《css滤镜使文字变3D效果》，Css的确很强大， W3C 公布了样式单（ CSS ）的标准以来， HTML 的每一部分开始以元素的形式出现，并且事件开始真正被引入页面，动态 HTML 成为了人们讨论的热点。实际上， W3C 采用的标准即为微软的 DOM ，也就是说 IE4.0 可以更好的支持 CSS ，并且微软对 CSS 还进行了许多十分有益地探索， Filter 就是一个很好的例子。

Filter 是微软对 CSS 的扩展，与 PhotoShop 中的滤镜概念相似，它可以用很简单的方法对页面中的文字特效作出特效处理，静态如阴影、模糊的效果，动态如各种淡入淡出效果。

一般我们给文字加阴影、背景、变形、变成3D效果都是通过图片来加的，但有些时候网页并不需要图片，有些时候比如说标题是变化的，需要程序来控制什么时候调用哪些图片，所以这种时候只能用文字来表示，但是单一的文字效果，会使网站页面大降低美观效果。这就用到了用 css样式给文字加阴影变3D效果。

效果如下图所示：

<<css滤镜使文字变3D效果>>

原代码

XML/HTML代码

<style type="text/css">
.sample {
font-family: arial black;
font-size: 40px;
font-weight: bold;
cursor: hand;
}
</style>
<span class="sample"
style="width: 200px; height: 70; color: black; filter: Blur(Add = 0, Direction = 135, Strength = 10);">开发团队</span>
<span class="sample"
style="position: relative; left: -201; top: -18; width: 200; color: #2984ff;">开发团队</span>
<span class="sample"
style="width: 400px; height: 70; color: lightskyblue; filter: Alpha(Opacity = 60) Blur(Add = 0, Direction = 135, Strength = 20);">百洋软件实验室</span>
<span class="sample"
style="position: relative; left: -401; top: -15; width: 400px; color: lightskyblue; filter: Alpha(Opacity = 60);">百洋软件实验室</span>
<span class="sample" style="width: 400px; height: 70; color: white;">po-soft
listly</span>
<span class="sample"
style="width: 400px; height: 70; position: relative; left: -400; filter: mask(color = red) shadow(direction = 135) chroma(color = red);">po-soft
listly</span>
<span class="sample"
style="width: 200px; height: 70; filter: mask(color = red) glow(color = black, strength = 1) chroma(color = red);">WebFX</span>

本文转载自OECP社区http://www.oecp.cn/hi/listly/blog/1596

转载于:https://my.oschina.net/oecp/blog/27808

css滤镜使文字变3D效果相关推荐

HTML文字样式显示闪烁,怎么纯用css代码使文字展示闪动效果？（代码示例）
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...
php字体闪烁,怎么纯用css代码使文字展示闪动效果？（代码示例）
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...
html文本环绕’,css如何使文字环绕显示
css如何使文字环绕显示 css实现文字环绕可以使用float来实现,下面介绍下具体的实现方法. 1)代码部分 .img-left { border: 3px solid #005588; width ...
html中文本旋转90度,css如何使文字方向转90度
css中可以使用transform属性使文字方向转90度,语法格式为"transform: rotate(90deg)".transform属性表示元素应用2D或3D转换,当值为r ...
CSS滤镜—使整个网页变成灰色
为追思疫情中逝世的同袍们,将4.4日定为了全国哀悼日,这一天,全世界都是"灰"的.当然我们感觉最深应该就是这一天你打开任何网站.软件,都是灰灰的一片.收到几个人的提问:" ...
css如何实现文字两端对齐,CSS如何实现文字两端对齐效果？
想要实现文字两端对齐效果,可以使用CSS的text-align属性.设置text-align: justify;即可实现文字两端对齐效果. 两端对齐在导航nav的制作中非常常用,那么如何实现两端对齐效 ...
html语言两端对齐咋写,CSS如何实现文字两端对齐效果？
两端对齐在导航nav的制作中非常常用,那么如何实现两端对齐效果?下面本篇文章就来给大家介绍一下使用CSS实现文字两端对齐效果的方法,希望对大家有所帮助. 想要实现文字两端对齐效果,可以使用CSS的te ...
CSS打造图片翻转立体3D效果
一.案例效果展示二.搭建一个基本的html结构,将需要用到的图片居中 html的结构非常简单,只要一个盒子里面放二张照片即可 html代码: <div class="img_box& ...
前端——CSS如何使文字居中
最近在制作网页的时候,经常需要用到添加文本.但大部分文本都需要调整到需要的位置.调整文本的位置,可以通过margin来设置外边距的方法来调整.而使文本居中,则一般有以下三种方法. text-align ...

css滤镜使文字变3D效果

css滤镜使文字变3D效果相关推荐

最新文章

热门文章