纯css3艺术文字样式效果代码

本效果主要使用text-shadow实现.
参考：http://hovertree.com/h/bjaf/css3_text_effect.htm

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>超炫CSS3文字特效集锦DEMO演示 - 何问起</title>

<link rel="stylesheet" href="http://hovertree.com/texiao/css3/1/css/style.css" media="screen" type="text/css" />

</head>

<body>

<!--For Firefox-->

<style>a{color:blue}

.test:after {

filter: url(#light-top);

}

.dilate:before {

filter: url(#dilate10);

}

.dilate:after {

filter: url(#dilate6);

}

.erode:after {

filter: url(#erode2);

}

.distant1:after {

filter: url(#distant1);

}

.distant-top:after {

filter: url(#distant-top);

}

.distant-front:after {

filter: url(#distant-front);

}

.diff1 {

filter: url(#diff1);

}

.bevel, .bevel:after {

filter: url(#light2);

}

</style>

<h1 class='outlinedA'>OutlinedA</h1>

<h1 class='outlinedA mid'>OutlinedA</h1>

<div>

<a href="http://hovertree.com/h/bjaf/yishuzi.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/texiao/keleyi/">向上弹出菜单</a>

</div>

<h1 class='outlinedB'>OutlinedB</h1>

<h1 class='hsl'>Hsl Colors</h1>

<h1 class='test'>Test</h1>

<h1 class='bottom'>Bottom Light</h1>

<h1 class='dilate'>Dilate</h1>

<h1 class='erode'>Erode</h1>

<h1 class='distant1'>Distant Light</h1>

<h1 class='distant-top'>Distant Top</h1>

<h1 class='distant-front'>Distant Front</h1>

<h1 class='diff1'>Diffused Light</h1>

<h1 class='bevel'>Bevel</h1>

<h1 style="font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink">何问起</h1>

<h1 style="font-family:cursive;text-shadow:6px 2px 2px #666666;">hovertree.com</h1>

</body>

</html>

参考：

纯css3艺术文字样式效果代码的更多相关文章

jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
简单几步用纯CSS3实现3D翻转效果
作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其添加transition和transform ...
纯css3实现文字间歇滚动效果
场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...
css3火焰文字样式代码
css样式: <style type="text/css"> body{background:#000;} *{margin:0;padding:0;transitio ...
用CSS3实现文字描边效果【效果在这儿，创意在你！】
CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边. 这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果.例: text-shadow:10px 5px 2px # ...
markdown 使用示例，包含常用的标题、图片、文字样式、代码块、链接等
ps:博客园markdown不能自动生成列表,更好的阅读体验可访问我的个人博客http://www.isspark.com/archives/Markdown%E7%A4%BA%E4%BE%8B # ...
纯CSS3制作的“Ribbons”效果
在看具体每个demo之前,我们一起来看下面一个截图: 上图是一个典型的“Ribbons”各部位的示意图,但每一个“Ribbons”并不会都使用上图示意的各个部分,在下面的实例中大家可以明显的看到或者 ...
【CSS3】纯CSS3制作页面切换效果
此前写的那个太复杂了,来点简单的核心 <html> <head> <title></title> <style type="text/c ...
纯CSS实现Tab切换标签效果代码
在线演示地址如下: http://demo.jb51.net/js/2015/css-tab-bq-style-cha-codes/ <!DOCTYPE html PUBLIC "-/ ...

随机推荐

使用ReSharper打造团队代码检查流程
首先我想跟大家分享一下我们团队的代码检查流程. 1. 项目经理随时会检查成员的代码,如果发现有不符合规范的代码,会在注释里面加todo.比如,假设leo的代码不符合规范,那么项目经理就会加注释: // ...
前端er是否忽略了某些东西？——读《ppk谈JavaScript》
关于书 “不知道ppk的网站QuirksMode,说明你可能还没有真正成为资深的JavaScript程序员.” ——Roger Johansson,瑞典资深Web专家. ppk是世界级前端技术专家,W ...
MySQL 启动服务报错解决方案
标签:ERROR! The server quit without updating PID file (/var/lib/mysql/localhost.localdomain.pid) 概述文章 ...
开始研究web，mark一下
之前想要搞引擎,经过思考之后,定位为webgl方面的引擎,这个决定早就做了,只是没有写下来做了一些调研之后,确定使用babylon.js 和typescript 和c# 来开发 Babylo ...
使用PM2将Node.js的集群变得更加容易
介绍众所周知,Node.js运行在Chrome的JavaScript运行时平台上,我们把该平台优雅地称之为V8引擎.不论是V8引擎,还是之后的Node.js,都是以单线程的方式运行的,因此,在多核心 ...
Redis应用场景一
Redis开创了一种新的数据存储思路,使用Redis,我们不用在面对功能单调的数据库时,把精力放在如何把大象放进冰箱这样的问题上,而是利用Redis灵活多变的数据结构和数据操作,为不同的大象构建不同的 ...
【PRINCE2是什么】PRINCE2认证之七大原则（3）
我们先来回顾一下,PRINCE2七大原则分别是持续的业务验证,经验学习,角色与责任,按阶段管理,例外管理,关注产品,剪裁. 第三个原则:明确定义的角色和职责. 项目离不开人员,错误的人来了,合适的人没 ...
JVM字节码指令
invokevirtual 调用实例方法 invokespecial 调用父类构造,实例初始化方法,私有方法 dup 复制栈顶数值,并且复制值进栈,pop/pop2为栈顶值出栈 aload_0 加载第 ...
Selenium WebDriver 3.0 需要注意的事项
以下所有代码基于Java 首先,要使用WebDriver 3.0 的话请使用JAVA 8(必要) 其次,由于W3C标准化以及各大浏览器厂商的积极跟进,自WebDriver 3.0 之后,Sele ...
对Big Table进行全表更新，导致 Replication 同步数据的过程十分缓慢
在Publisher database中更新一个big table,数据行数是3.4亿多.由于没有更新 clustered Index key,因此,只产生了3.4亿多个Update Commands ...

纯css3艺术文字样式效果代码

纯css3艺术文字样式效果代码的更多相关文章

随机推荐

热门专题