Css不朽的经典—3D文字特效

css|特效

效果:

3D Text

以下是一个用了blur滤镜而另一个没用的叠加效果

Ttop.cn Ttop.cn

Glass Text

这个是两个都用了alpha滤镜的效果

Ttop.cnTtop.cn

Inner Shadow

这个是先用了一段白色的文字,再加了mask()滤镜,再用了shadow()滤镜,最后加入chroma()滤镜形成后一段字体,放在前一段文字的相对left: -200px位置上形成的。

Ttop.cnTtop.cn

Outline Text

用mask, glow and chroma三个滤镜联合作用

Ttop.cn

与Marquee的完美结合

www.Ttop.cnwww.Ttop.cn

源代码:

<style type="text/css">
<!--
.sample
  font-style: italic; font-family: arial black;font-size: 40px; font-weight: bold; cursor: hand;

-->
</style>
<title>Css不朽的经典—3D文字特效</title>
<div>
<h2>3D Text</h2>
 <p>以下是一个用了blur滤镜而另一个没用的叠加效果</p>
 <p > <span class="sample"
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);"
>Ttop.cn</span><span class="sample"
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;">
 Ttop.cn</span> </p>
 <h2>Glass Text</h2>
 <p>这个是两个都用了alpha滤镜的效果</p>
 <p > <span class="sample"
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);"
>Ttop.cn</span><span class="sample"
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);"
>Ttop.cn</span> </p>
 <h2>Inner Shadow</h2>
 <p>这个是先用了一段白色的文字,再加了mask()滤镜,再用了shadow()滤镜,最后加入chroma()滤镜形成后一段字体,放在前一段文字的相对left:
 -200px位置上形成的。</p>
 <p > <span class="sample"
style="width: 200px; height: 70; color: white;"
>Ttop.cn</span><span class="sample"
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);"
>Ttop.cn</span> </p>
 <h2>Outline Text</h2>
 <p>用mask, glow and chroma三个滤镜联合作用</p>
 <p > <span class="sample" style="width: 200px; height: 70; filter: mask(color=red) glow(color=black, strength=1) chroma(color=red);">Ttop.cn</span> </p>
<h2>与Marquee的完美结合</h2>
<p > <span class="sample"
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);"
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span>
<span class="sample"
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;">
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p>
</div>

时间: 2024-11-27 15:16:34

Css不朽的经典—3D文字特效的相关文章

Css制作3D文字特效

Css不朽的经典-3D文字特效--这个是先用了一段白色的文字,再加了mask()滤镜,再用了shadow()滤镜,最后加入chroma()滤镜形成后一段字体,放在前一段文字的相对left: -200px位置上形成的. 效果:见附图1 源代码: <style type="text/css"><!--.samplefont-style: italic; font-family: arial black;font-size: 40px; font-weight: bold;

jQuery实现3D文字特效的方法

 这篇文章主要介绍了jQuery实现3D文字特效的方法,通过鼠标与css样式来实现文字特效的技巧,需要的朋友可以参考下     本文实例讲述了jQuery实现3D文字特效的方法.分享给大家供大家参考.具体如下: 这款基于jQuery的3D文字特效演示,不是真正的3D,是由多个文字形成的3D效果,如果首次加载网页出错的话,请刷新一下页面,当然在使用中不会出现此问题. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN&q

jquery实现叠层3D文字特效代码分享_jquery

jquery实现叠层3D文字特效是一款效果非常酷,实现代码也很简单,没有用HTML5和CSS3元素,纯粹用Jquery代码实现的. 运行效果图:------------------------------效果演示----------------------------- 为大家分享的jquery实现叠层3D文字特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=u

利用AI+PS制作假日热销3D文字特效教程

先说一下开篇的废话.做立体字可以用到的办法有很多,效果最好的,当然还是专业的3D软件来做的好,比如3DS MAX.MAYA等等,可以作出很多特殊的, 逼真的立体效果. 但是在常用的网站专题,一些品面广告用3D,一来一般的3D软件平面和网页设计玩的不是很转, 二来就是一些效果比较耗时..所以现在的AI, CDR等等的都可以做一些简单的3D效果,然后在用PS来处里加工,可以作出一些基础的可以突出显示主题的3D文字特效来,来提高专题页面.平面广告的视觉效果. 好,废话就到这里, 开始正题. 效果图:

Photoshop制作3D文字特效

我们经常会在网络上看到很多使用3D文字创建的图像教程,这些3D文字通常是使用了一种像3DSMax,Xara 3D, Cinema 4D等等这样的3D程序.如果你的目标是创建简单的3d文本,你可以轻松地用Photoshop实现.在本教程中,我们将学习如何实现这样的3D效果.实际上,你可以使用这个简单的技术来创建时尚的现代LOGO和图标. 效果预览 制作步骤: 1.打开Photoshop,创建一个尺寸为1280 * 800px的新文件,并在你的文件中输入文本.我使用的字体是AVENGER,它是很棒的

PS教程:制作质感3D文字特效

本文分做两个部分,一个是制作抽象的艺术白雾背景,另外就是制作水晶的文字字体,主要使用的还是PS图层样式,做法比较简单. 本文分做两个部分,一个是制作抽象的艺术白雾背景,另外就是制作水晶的文字字体,主要使用的还是PS图层样式,做法比较简单,里面用到的纹理与字体可在最后的原文地址中寻找下载. 先看下效果吧 :) 第1步:找一个喜欢的纹理: 从这里下载 >>Material.rar 第2步:新建文件(ctrl+N):文件大小为880 x 540 px,背景为透明. 第3步:选择矩形工具(U),设置如

CSS 动态链接提示_文字特效

ASP是什么语言呢? 这里是您的提示内容 PHP是什么呢? 注意到了吗?随机动态提示 ASP.NET又是什么呢? 随机动态提示

Photoshop文字特效教程:水浒传血战沧州游戏3D文字效果

本例介绍用PS和AI制作水浒传血战沧州游戏3D文字效果,字体的选择没有硬性的要求,但考虑到后期材质物资的表现,还是选择粗一些的字体为宜. 效果图: 点击图片查看大图 [1] [2] [3]  下一页

PS CS6打造超棒的草莓朱古力甜点3D文字效果教程

2012年4月24日,Adobe发布了Photoshop CS6的正式版,在CS6中整合了其Adobe专有的 Mercury图像 引擎,通过显卡核心GPU提供了强悍的图片编辑能力.Content-Aware Patch帮助用户更加轻松方便的选取区域,方便用户抠图等操作.Blur Gallery可以允许 用户在图片和文件内容上进行渲染模糊特效.Intuitive Video Creation提供了一种全新的视频操作体验. 本文教我们用PhotoShop CS6打造超棒的草莓朱古力甜点3D文字效果,