纯css3艺术文字样式效果代码
效果:http://hovertree.com/texiao/css3/1/
本效果主要使用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>
参考:
- 你需要知道的三个CSS技巧
- 纯CSS3邮件、旗帜、音乐、文件和眼睛的...
- CSS热门知识点总结
- 井号后带三位数字或者字母表示的颜色
- css3改变选择文本背景颜色
- CSS3实现背景颜色渐变
- pre强制换行代码
- 纯CSS3漂亮的房子不错的天气
- CSS3径向渐变旋转的圆球
- css3 transition属性实现3d动画效果
- css3 3d展示中rotate()介绍与简单实...
- CSS学习笔记之定位position属性
- CSS选择器多样应用
- css8种选择器详解
- CSS3的text-overflow
- CSS3女神图片旋转木马
- 用CSS让文字居于div的底部
- CSS transform中的rotate的旋转中心
- css3给div加阴影
- css强制换行
- WEB前端面试题
- CSS3画圆
- CSS怎样取消两个块状元素之间空隙
- 使用CSS实现图片磨砂玻璃效果
- 使用CSS在移动端禁用长按选中文本功能
- a:link,a:visited,a:hover,a:active
- 多种方法用 css-实现元素垂直居中对齐
- CSS3鼠标悬停360度旋转效果
- CSS导入使用及引用的两种方法
- 使用DIV+CSS开发一个简单漂亮的登录页...
- css hover鼠标悬停图片显示标注
- CSS3立体3D文字样式
- CSS3的background-size: cover;
- css3鼠标悬停(hover)打开打火机代码
更多:http://www.cnblogs.com/roucheng/p/texiao.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 "-/ ...
随机推荐
- ASP.NET MVC Module
ASP.NET MVC Module 前言 在ASP.NET中管道模型是怎么来实现的?在请求处理流程一文中大概的讲述了Http Module和HttpApplication之间的关系,而并没有涉及到H ...
- C语言 · 2的次幂表示
问题描述 任何一个正整数都可以用2进制表示,例如:137的2进制表示为10001001. 将这种2进制表示写成2的次幂的和的形式,令次幂高的排在前面,可得到如下表达式:137=2^7+2^3+2^0 ...
- java 反编译利器JD-JUI
下载地址: http://download.csdn.net/download/suixingbugai/4145221
- 2013 duilib入门简明教程 -- XML基础类(7)
现在大家应该对XML描述界面不那么陌生了,那么我们做进一步介绍. 前面的教程我们写了很多代码,为的是让大家了解下基本流程,其实duilib已经对常用的操作做了很好的包装,正式使用时无需像前面的教程那样 ...
- iOS-多线程基础
进程与线程: 1> 一个应用程序对应一个进程,一个进程帮助程序占据一块存储空间 2> 要想在进程中执行任务,就必须开启线程,一条线程就代表一个任务 3> 一个进程中允许开 ...
- OpenGL学习进程(13)第十课:基本图形的底层实现及算法原理
本节介绍OpenGL中绘制直线.圆.椭圆,多边形的算法原理. (1)绘制任意方向(任意斜率)的直线: 1)中点画线法: 中点画线法的算法原理不做介绍,但这里用到最基本的画0<=k ...
- MongoDB 维护Replica Set
在每个MongoDB(版本 3.2.9) Instance中,都有一个本地数据库(local),用于存储 Replication 进程的信息和本地数据.local 数据库的特性是:位于local数据库 ...
- ExtJs布局详解
序言 1.百度百科上说:ExtJs功能丰富,无人能出其右.无论是界面之美,还是功能之强,extjs都高居榜首. 2.呵呵,界面之美当是少不了布局的,这篇文章我写layout的七种布局.(extjs是4 ...
- Java 超简单实现发送邮件(可动态控制发送人数)
发送邮件的实现 需要事先引入以下几个架包,最重要的架包是jodd-3.7这个 以上架包下载地址:http://pan.baidu.com/s/1kVs7Tyv 提取密码:h22x 新建一个Util类 ...
- ASP.NET Core的配置(3): 将配置绑定为对象[下篇]
我们在<读取配置信息>通过实例的形式演示了如何利用Options模型以依赖注入的方式直接获取由指定配置节绑定生成的Options对象,我们再次回顾一下当初我们编写的程序.如下面的代码片段所 ...