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

随机推荐

如何在没有域的环境中搭建AlwaysOn（二）
对DBA而言,不需要域就可以搭建SQL Server AlwaysOn是Windows Server 2016中最令人兴奋的功能了,它不仅可以降低搭建的成本,而且还减少了部署和运维的工作量. 上篇博客 ...
Linux 挂载管理(mount)
标签:mount,umount 概述在上一章增加linux操作系统空间中已经使用过了mount命令对分区进行挂载,这一章详细介绍挂载管理,该命令涉及的知识点也挺多的而且也还比较重要,是需要掌握的一个 ...
SQL Server对比两字段的相似度（函数算法）
相似度函数概述比较两个字段的相似度最近有人问到关于两个字段求相似度的函数,所以就写了一篇关于相似度的函数,分别是“简单的模糊匹配”,“顺序匹配”,“一对一位置匹配”.在平时的这种函数 ...
Tomcat的目录结构
bin:该目录下存放的是二进制可执行文件,如果是安装版,那么这个目录下会有两个exe文件:tomcat6.exe.tomcat6w.exe,前者是在控制台下启动Tomcat,后者是弹出UGI窗口启动T ...
[Hadoop大数据]——Hive初识
Hive出现的背景 Hadoop提供了大数据的通用解决方案,比如存储提供了Hdfs,计算提供了MapReduce思想.但是想要写出MapReduce算法还是比较繁琐的,对于开发者来说,需要了解底层的h ...
ASP.NET MVC Routing学习笔记（一）
Routing在ASP.NET MVC中是非常核心的技术,属于ASP.NET MVC几大核心技术之一,在使用Routing之前,得先引入System.Web.Routing,但其实不用这么麻烦,因为在 ...
Npoi导出Excel 实战篇（Webform）
开篇语废话不多说,直接上遇到的问题需求:在这个界面点击导出,导出页面数据,苦于没有做过webfrom项目,弄了半天还是没想到原生态的好方法,所以在网上看了下有没有导出的好例子,结果发现有人推荐使用 ...
MVC4做网站后台:模块管理1、修改模块信息
网站可能会包含一些模块:像文章.产品.图片.留言等. 栏目模块主要实现功能,启用或禁用模块,模块权限设置,模块上传设置等. 权限设置和上传设置以后专门考虑,先来显示或禁用模块. 1.在顶部导航栏添加管 ...
Android 如何制作九宫格图片（.9.png）
对于编程人员来说,尤其是前端设计设计师,九宫格图片是必须的(.9.png),对于初学者来说不知道这个九宫格图片有什么用,其实这个九宫格图片实际常用在Android的button组件.要上下拉升的背景图 ...
.NET平台开源项目速览(8)Expression Evaluator表达式计算组件使用
在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,给大家初步介绍了一下Expression Evaluator验证组件.那里只是概述了一下,并没有对其使用和强大功能做 ...

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

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

随机推荐

热门专题