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 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体 ...
随机推荐
- - > 动规讲解基础讲解一——01背包(模板)
作为动态规划的基础,01背包的思想在许多动规问题中会经常出现,so,熟练的掌握01背包的思路是极其重要的: 有n件物品,第i件物品(I = 1,2,3…n)的价值是vi, 重量是wi,我们有一个能承重 ...
- redis sentinel集群配置及haproxy配置
ip分布情况: sentinel-1/redis 主 10.11.11.5 sentinel-2/redis 从 10.11.11.7 sentinel-3/redis 从 10.11.11.8 ha ...
- 【sql技巧】mysql修改时,动态指定要修改的字段 update `table` set (case when ....) = 1 where id = xx
如果你点进了这篇帖子,那么你一定遇到了跟我一样的问题.别看题目的set case when...,我一开始也是第一反应是用case when但是发现并不好使. 问题呢,说得高大上一点:动态指定要修改的 ...
- Android: 关于百度地图缩放级别
18 ~ 3 {"50m","100m","200m","500m","1km","2km ...
- git 手动操作
git 手动操作 以下所有的情况都需要在上面那个目录下: 查看改动: git status // 所有改动都在这里. 提交代码: git add <file_name> // 把代码放到 ...
- 有用 .htaccess 使用方法大全
这里收集的是各种有用的 .htaccess 代码片段,你能想到的使用方法差点儿全在这里. 免责声明: 尽管将这些代码片段直接复制到你的 .htaccess 文件中,绝大多数情况下都是好用的,但也有极个 ...
- 进销存管理系统, 刚学C++
各位大神们.有什么补充的能够评论一下吗? #include<iostream> #include<string> using namespace std; int G=0;// ...
- Parallel and Perpendicular
题目链接 题意: 输入n,求正n边形中的对角线1和对角线2的个数(对角线1:至少与其它一个对角线平行:对角线2:至少与其它一个对角线垂直).对角线不能是多边形的边 (4 ≤ n ≤ 10e5) 分析: ...
- coffeescript的上下文
CoffeeScript代码中,变量,甚至函数前面有时会带上一个@符号,那么翻译到 javascript里,就是 "this." 这就涉及到运行过程中的上下文. 这个this指什么 ...
- AngularJS2.0 hello world例子——引入这么多额外的依赖库真是很忧伤啊
初识Angular2 写一个Angular2的Hello World应用相当简单,分三步走: 1. 引入Angular2预定义类型 import {Component,View,bootstrap} ...