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 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体 ...
随机推荐
- 单例模式解决RabbitMQ超出最大连接问题
今天在项目稳定性测试过程中遇到一个情景:通过工具jMeter一直请求消息转发服务器,消息转发服务器再向rabbitMQ发送数据,在这期间出现了问题.MQ意外宕机. 1. 查看rabbitMQ管理界面. ...
- codevs——1436 孪生素数 2
1436 孪生素数 2 时间限制: 2 s 空间限制: 1000 KB 题目等级 : 白银 Silver 题解 题目描述 Description 如m=100,n=6 则将输出100 ...
- ubuntu 图形界面搜索软件Catfish (鲶鱼)
Catfish(鲶鱼)是一款Linux桌面图形软件,可以在桌面图形化的搜索文件. 在Ubuntu下可以用 : sudo apt-get install catfish 安装
- 寒城攻略:Listo 教你用 Swift 写IOS UI 项目生活记事本
刚才用 Swift 写了一个记事本的应用,仅仅是简单的 UI 方向的开发,先来上产品的界面: 如今 Listo 给分享源码: 共同进步,开源中国.转载请声明出处
- Android数据存储之IO
Android开发中免不了数据本地的存储,今天我们来说一说怎样利用IO流来进行数据存储. 这里我们通过模拟一个QQ登陆界面的小demo来实际操作IO流. 功能描写叙述:点击button能够保存用户输入 ...
- 关于linux的用户
1 linux支持多个用户 2 每个登陆用户有自己的shell,自己的home目录 3 可以将用户分组 4 用户对文件有各自的权限,从而将用户分割 5 用户对应属于它的一批进程 6 可以执行addus ...
- UITextView获取光标位置
UITextRange *range = textView.selectedTextRange; //光标位置 CGRect rect = [textView caretRectForPositio ...
- HDU4336:Card Collector
题意 有n张卡片,每一次 有pi的概率买到第i张卡.求买到所有卡的期望购买次数. n<=20 解析 Solution 1:大力状压(就是步数除以方案数) #include<iostream ...
- atcoder 076
日本人的比赛 C:如果两个数差了大于1无解,否则分类讨论 #include<bits/stdc++.h> using namespace std; typedef long long ll ...
- MSP430 PIN 操作寄存器
1.P口端口寄存器: (1).PxDIR 输入/输出方向寄存器 (0:输入模式 1:输出模式) (2).PxIN 输入寄存器 输入寄存器是只读寄存器,用户不能对其写入,只能通过读取该寄 ...