纯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 "-/ ...

随机推荐

自己动手写游戏：Flappy Bird
START:最近闲来无事,看了看一下<C#开发Flappy Bird游戏>的教程,自己也试着做了一下,实现了一个超级简单版(十分简陋)的Flappy Bird,使用的语言是C#,技术采用了 ...
oracle数据库的安装、配置与无残留卸载
安装配置 :关闭专用网络防火墙 2 :以管理员身份运行安装文件 ——“setup.exe” 3 :设置口令其中SYS 用户权限大于 SYSTEM 4 :先决条件检查,若验证成功,点击 ”下 ...
Cygwin/babun install telnet
最近一直在用一个windows下模拟linux的集成环境babun,特点是安装方便,使用简单,而且大部分linux程序都可以找到. 下面说一下telnet的安装: pact install inetu ...
Hibernate
iOS-iOS开发简单介绍
概览终于到了真正接触IOS应用程序的时刻了,之前我们花了很多时间去讨论C语言.ObjC等知识,对于很多朋友而言开发IOS第一天就想直接看到成果,看到可以运行的IOS程序.但是这里我想强调一下,前面的 ...
CSS移动端多行显示多余省略号
/*css3 多行显示省略号,也可用于单行*/ .one-line { display: -webkit-box; overflow : hidden; text-overflow: ellipsis ...
理解DOM事件流的三个阶段
本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段事件流之事件冒泡与事件捕获在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...
深入理解DOM节点类型第三篇——注释节点和文档类型节点
× 目录 [1]注释节点 [2]文档类型前面的话把注释节点和文档类型节点放在一起是因为IE8-浏览器的一个bug.IE8-浏览器将标签名为"!"的元素视作注释节点,所以文档声明 ...
深入理解闭包系列第三篇——IIFE
× 目录 [1]实现 [2]用途前面的话严格来讲,IIFE并不是闭包,因为它并不满足函数成为闭包的三个条件.但一般地,人们认为IIFE就是闭包,毕竟闭包有多个定义.本文将详细介绍IIFE的实现和用 ...
JavaScript之糟粕
0.导言在上篇<JavaScript之毒瘤>中,列举了一些在JavaScript中难以避免的问题特性.本篇将会展示JavaScript中有问题的特性,但我们很容易就能便面它们.通过这些简 ...

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

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

随机推荐

热门专题