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 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体 ...
随机推荐
- bzoj1072【SCOI2007】排列perm
1072: [SCOI2007]排列perm Time Limit: 10 Sec Memory Limit: 162 MB Submit: 1479 Solved: 928 [id=1072&q ...
- PHP array_merge()
定义和用法 array_merge() 函数把两个或多个数组合并为一个数组. 如果键名有重复,该键的键值为最后一个键名对应的值(后面的覆盖前面的).如果数组是数字索引的,则键名会以连续方式重新索引. ...
- Leet Code OJ 26. Remove Duplicates from Sorted Array [Difficulty: Easy]
题目: Given a sorted array, remove the duplicates in place such that each element appear only once and ...
- COCOS学习笔记--变速动作Speed和ActionEase
变速动作和复合动作类似.也是一种特殊的动作,它能够把不论什么动作依照改变后的速度运行.变速动作与复合动作最大的差别就是复合动作仅仅是单纯的组合一系列动作,而变速的做在组合一系列动作后还要去改变动作的运 ...
- Unicode不可见字符的显示
Unicode的学名是”Universal Multiple-Octet Coded Character Set”,简称为UCS 不可见字符”/u200b”为 Unicode Character ‘Z ...
- 从2月14号開始,上传AppStore会碰到:Failed to locate or generate matching signing assets
从2月14号開始,上传AppStore时可能会碰到这个问题: Failed to locate or generate matching signing assets Xcode attempted ...
- java有用的启动参数
三大类选项: 1. 标准选项: 功能是很稳定的,所有的标准选项都是以-开头,比如-version, -server等. 2. X选项:以-X开头,这类选项的功能还是很稳定,但官方的说法是它们的行为可能 ...
- 【转载】java学习线路
http://www.cnblogs.com/Leo_wl/p/5437059.html java基础(java编程思想) =>web开发(html/css/js servlet/jsp 数据 ...
- ios10--拳皇动画
/** 图片的两种加载方式: 1> imageNamed: a. 就算指向它的指针被销毁,该资源也不会被从内存中干掉, b. 放到Assets.xcassets的图片,默认就有缓存, c. 图片 ...
- The source was not found, but some or all event logs could not be searched. Inaccessible logs: Security.
EventLog.SourceExists https://stackoverflow.com/questions/9564420/the-source-was-not-found-but-some- ...