阴影

.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设计炫目字体的更多相关文章

  1. CSS SANS – 神奇!使用 CSS3 创建的字体

    在我们的认识中,CSS 所能做的就是改变网页的排版布局,调整字间距等.然而,这里我们要介绍的则是使用 CSS3 制作字体.CSS SANS 可以通过 CSS 技术创建的A-Z字体,一起来围观下. 在线 ...

  2. CSS3的自定义字体@font-face:将图片ICON转为字体

    大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样.那么对于网站中用到的各种icon,我们就可以尝试使用font来实现, ...

  3. 采用CSS3设计的登录界面,动态效果(动画)

    与上一篇的“采用CSS3设计的登陆界面”的相同,只是样式style添加了CSS3的动画元素. style内容如下: <style> html,body,div{ margin:0; pad ...

  4. css3文字与字体样式

    css3使用服务器端字体: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  5. CSS3文本与字体

    一.CSS3 换行 1.word-break(规定自动换行的处理方法) word-break: normal / break-all / keep-all; /* normal:使用浏览器默认的换行规 ...

  6. CSS3手机端字体不能小于12号的方法

    CSS3手机端字体不能小于12号的方法 <pre> .xiaoyu12fontsize{ -webkit-transform-origin: 0% 0%; -webkit-transfor ...

  7. 3.css3文字与字体

    1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...

  8. 网页设计之字体和 CSS 调整

    调整 CSS 首先,我们先来看看问题的源头.CSS 的出现曾是技术的一大进步.你可以用一个集中式的样式表来装饰多个网页.如今很多 Web 开发者都会使用 Bootstrap 这样的框架. 这些框架当然 ...

  9. CSS3 使用自定义字体

    CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体.通过 CSS3,web 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体 ...

随机推荐

  1. CH上的Think Bear#1模拟赛

    题目:http://www.contesthunter.org/contest/CH%20Round%20%2352%20%20Thinking%20Bear%20%231%20(NOIP%E6%A8 ...

  2. java实现WebService 以及客户端不同的调用方式

    java 实现WebService 以及不同的调用方式 webservice:    就是应用程序之间跨语言的调用    wwww.webxml.com.cn    1.xml    2.    ws ...

  3. v$log and v$logfiles

    v$log has one row for each group. v$logfile has one row for each file. There is a status column for ...

  4. TI C66x DSP 系统events及其应用 - 5.11(中断控制寄存器)

    C66x DSP运行中断的简要流程: 1.使能了全局中断和子中断.假设硬件检測到中断发生,那么CPU就要跳转. 2.软件把CPU内部的A,B类寄存器的值等推入堆栈保存,把当前PC寄存器的值放入IRP寄 ...

  5. PowerDesigner12.5和15.1的破解

    不要相信网上盛传的powerdesigner的 license key注冊码,试了好多都无论用,不废话了,直接献上PowerDesigner12.5.PowerDesigner15.1的破解方法. P ...

  6. javascript 中文与Unicode相互转化

      javascript 中文与Unicode相互转化 CreateTime--2018年3月30日11:26:50 Author:Marydon /** * 中文与Unicode的相互转换 */ v ...

  7. C++与C的那些差异

    虽说C++是向后兼容C的,但C++与C还是存在许多差异.这里举了几个例子,也是我们很容易忽略的地方.如果你还知道其他的更多的Differences,或者发现什么错误,可以评论告诉我,大家一起学习进步. ...

  8. LeetCode 977. Squares of a Sorted Array (有序数组的平方)

    题目标签:Array 题目给了我们一组 从小到大的 integers,让我们平方数字 并且 也排序成 从小到达. 因为有负数在里面,平方后,负数在array的位置会变动. 可以设left 和 righ ...

  9. LeetCode 350. Intersection of Two Arrays II (两个数组的相交之二)

    Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...

  10. Java课程设计——人事管理系统

    主界面代码: package PersonSystem; import java.awt.*; import java.awt.event.*; import javax.swing.*; impor ...