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

随机推荐

Servant：基于Web的IIS管理工具
Servant for IIS是个管理IIS的简单.自动化的Web管理工具.安装Servant的过程很简单,只要双击批处理文件Install Servant Service.bat,然后按照屏幕上的说 ...
Kotlin笔记
官网: http://kotlinlang.org/ http://kotlinlang.org/docs/reference/ 中文教程: http://kotlindoc.com/ Gradle: ...
NoSQL初探之人人都爱Redis：（2）Redis API与常用数据类型简介
一.Redis API For .Net 首先,不得不说Redis官方提供了众多的API开发包,但是目前Redis官方版本不支持.Net直接进行连接,需要使用一些第三方的开源类库.目前最流行的就是Se ...
iOS开发系列—Objective-C之内存管理
概述我们知道在程序运行过程中要创建大量的对象,和其他高级语言类似,在ObjC中对象时存储在堆中的,系统并不会自动释放堆中的内存(注意基本类型是由系统自己管理的,放在栈上).如果一个对象创建并使用后没 ...
探索c#之storm的TimeCacheMap
阅读目录: 概述算法介绍清理线程获取.插入.删除总结概述最近在看storm,发现其中的TimeCacheMap算法设计颇为高效,就简单分享介绍下. 思考一下如果需要一个带过期淘汰的缓存容器 ...
Oracle客户端连接远程Oracle服务中文乱码问题
在本机远程连接远程Oracle服务的时候,写了如下检索语句 select * from sys_employee 结果集中出现了中文乱码,但是远程服务器本身的PL/SQL检索出来没有问题解决方案: ...
.NET 的 Debug 和 Release build 对执行速度的影响
这篇文章发布于我的 github 博客:原文在真正开始讨论之前先定义一下 Scope. 本文讨论的范围限于执行速度,内存占用什么的不在评估的范围之内. 本文不讨论算法:编译器带来的优化基本上属于底层 ...
iOS-数据加密-MD5加密
数据加密 iOS开发中关于数据加密算法使用最多的就是MD5和Base64,但是开发者中最喜欢的也就是MD5,所以今天就简单介绍一下MD5在吗去使用, 当然关于数据加密还是看公司使用什么,公司使用什么我 ...
使用Ado.net执行SP很慢，而用SSMS执行很快
今天遇到一个问题,有用户反应,在site上打开报表,一直loading,出不来结果. 遇到这种问题,我立刻simulate用户使用Filter Condition,问题repro,看来不是偶然事件,通 ...
LINQ系列：Linq to Object分组操作符
分组是指根据一个特定的值将序列中的值或元素进行分组.LINQ只包含一个分组操作符:GroupBy. GroupBy 1>. 原型定义 public static IQueryable<IG ...

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

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

随机推荐

热门专题