CSS3设计炫目字体
阴影
.text-shadow{
text-shadow:#FF0000 0 0 10px;
color:white;
font-size:60px
}

描边
<style>
.text-border{
text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
font-size:60px;
font-weight:bold;
color:white;
} .h1{
-webkit-text-stroke: 1.0px #000;
text-stroke: 1.0px #000;
color:white;
font-size:60px;
font-weight:bold;
}
</style>
<div class="h1">Hello World!</div>
<div class="text-border">Hello World!</div>

反射
<style>
.text-reflect{
font-size:35px;
float:left;
-webkit-box-reflect: below 10px
-webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.5));
} .text-reflect-base{
font-size:35px;
margin-right:30px;
float:left;
-webkit-box-reflect:below 10px;
} </style> <div class='text-reflect-base'>Hello World!</div>
<div class='text-reflect'>Hello World!</div>

艺术字
<style>
body{
background:black;
margin:50px;
}
h1{
color:white;
font-size: 100px;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
} h1#fire {
text-align: center;
margin: 200px auto;
font-family: "League-Gothic", Courier;
font-size: 200px;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}
</style> <h1>World War</h1> <h1 id="fire">World War</h1>

分栏
<style>
div{
column-count:;
-webkit-column-count:;
column-gap:30px;
-webkiy-column-gap:30px;
column-rule:1px dashed black;
-webkit-column-rule:1px dashed black;
} .container{
margin:auto;
width:700px;
}
</style>
<div class="container">JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。</div>

CSS3设计炫目字体的更多相关文章
- CSS SANS – 神奇!使用 CSS3 创建的字体
在我们的认识中,CSS 所能做的就是改变网页的排版布局,调整字间距等.然而,这里我们要介绍的则是使用 CSS3 制作字体.CSS SANS 可以通过 CSS 技术创建的A-Z字体,一起来围观下. 在线 ...
- CSS3的自定义字体@font-face:将图片ICON转为字体
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样.那么对于网站中用到的各种icon,我们就可以尝试使用font来实现, ...
- 采用CSS3设计的登录界面,动态效果(动画)
与上一篇的“采用CSS3设计的登陆界面”的相同,只是样式style添加了CSS3的动画元素. style内容如下: <style> html,body,div{ margin:0; pad ...
- css3文字与字体样式
css3使用服务器端字体: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- CSS3文本与字体
一.CSS3 换行 1.word-break(规定自动换行的处理方法) word-break: normal / break-all / keep-all; /* normal:使用浏览器默认的换行规 ...
- CSS3手机端字体不能小于12号的方法
CSS3手机端字体不能小于12号的方法 <pre> .xiaoyu12fontsize{ -webkit-transform-origin: 0% 0%; -webkit-transfor ...
- 3.css3文字与字体
1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...
- 网页设计之字体和 CSS 调整
调整 CSS 首先,我们先来看看问题的源头.CSS 的出现曾是技术的一大进步.你可以用一个集中式的样式表来装饰多个网页.如今很多 Web 开发者都会使用 Bootstrap 这样的框架. 这些框架当然 ...
- CSS3 使用自定义字体
CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体.通过 CSS3,web 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体 ...
随机推荐
- 上帝说:要约炮!于是有了XMPP
一.导入XMPP框架 下载 XMPPFramework 框架 GitHub: XMPPFramework 导入依赖框架 CocoaLumberjack : 日志框架 CocoaAsyncSocket ...
- 19、Java并发性和多线程-嵌套管程锁死
以下内容转自http://ifeve.com/nested-monitor-lockout/: 嵌套管程锁死类似于死锁, 下面是一个嵌套管程锁死的场景: 线程1获得A对象的锁. 线程1获得对象B的锁( ...
- vue2的简单Popup (Confirm,Alert)组件
github: https://github.com/longfei59418888/vui (记得给一个 start,以后有一起讨论,各种好组件) demo :http://60.205.20 ...
- Lua的面向对象程序设计
Account={balance=} function Account.withdraw(self,v) self.balance=self.balance-v end a={balance=,wit ...
- C#中类的详解
类定义的具体语法形式类的访问修饰符 修饰符 类名{ 类的成员} 类的访问修饰符:用于设定对类的访问权限,包括public.internal或者不写,用internal或者不写时代表只能在当前项目中访问 ...
- Python3基础(二) 基本数据类型
Python中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建.在Python中,变量就是变量,它没有类型,我们所说的"类型"是变量所指的内存中对象的类型 ...
- PHP移动互联网开发笔记(3)——运算符
原文地址:http://www.php100.com/html/php/rumen/2014/0326/6704.html 一.PHP的运算符 PHP中有丰富的运算符集,它们中大部分直接来自于C语言. ...
- poj 1190 生日蛋糕 , 强剪枝
题意: 制作一个体积为Nπ(N<=10000)的M(M<=20)层生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1 <= i <= M)层蛋糕是半径为Ri, 高度为Hi的圆 ...
- CodeForces 16B Burglar and Matches(贪心)
B. Burglar and Matches time limit per test 0.5 second memory limit per test 64 megabytes input stand ...
- android学习笔记:adb更换端口后成功启动
搭建手机开发环境,android ADT,android SDK,然后按照PhoneGap官网的指引,拷贝文件,修改代码,运行,进度条到了某个位置后就停止不动了. 停止不动,又是停止不动.你都不知道问 ...