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

随机推荐

[.net 面向对象程序设计深入]（0）开篇
[.net 面向对象程序设计深入](0)开篇 [.net 面向对象编程基础]和 [.net 面向对象程序设计进阶]在15年底写完了,群里也加进来不少热爱学习的小伙伴.让我深切感受到在这个 ...
[.net 面向对象程序设计进阶] (27) 团队开发利器（六）分布式版本控制系统Git——在Visual Studio 2015中使用Git
[.net 面向对象程序设计进阶] (26) 团队开发利器(六)分布式版本控制系统Git——在Visual Studio 2015中使用Git 本篇导读: 接上两篇,继续Git之旅分布式版本控制系统 ...
C#设计模式之组合
IronMan之组合在上个篇幅中讲到怎么把“武器”装饰到“部件”上,这个篇幅呢,还是要讲到“武器”,不过呢是关于“武器”使用的. 本篇介绍"武器"的合理使用方式,不说废话,直接来 ...
Mongoose Schemas定义中timestamps选项的妙用
在Node.js中使用MongoDB少不了Mongoose. 假设有如下Mongoose Schemas的定义: var ItemSchema = new mongoose.Schema({ biz: ...
My first makefile to compile multiple C files
I have three files to compile: main.c, func.c, func.h The steps: 1 main.c to main.o 2 func. ...
java中对final关键字的理解以及使用场景
谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法.
Android笔记——数据库升级与降级
一.概述 SQLite是Android内置的一个很小的关系型数据库.SQLiteOpenHelper是一个用来辅助管理数据库创建和版本升级问题的抽象类.我们可以继承这个抽象类,实现它的一些方法来对数据 ...
【原创】开源Math.NET基础数学类库使用(10)C#进行基本数据统计
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录前言 ...
Neutron 默认安全组规则 - 每天5分钟玩转 OpenStack（115）
Neutron 为 instance 提供了两种管理网络安全的方法: 安全组(Security Group)和虚拟防火墙. 安全组的原理是通过 iptables 对 instance 所在计算节点的网 ...
解决HubbleDotNet搜索引擎索引数据不全的问题
HubbleDotnet是国产.NET平台搜索引擎的翘楚,开放源代码,使用方便,不过我一直在非生产环境下使用.官方网页在HubbleDotNet开源全文搜索数据库项目--技术详解. 以前当数据库使用M ...

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

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

随机推荐

热门专题