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:3;
    -webkit-column-count:3;
    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>

时间: 2024-11-08 17:38:42

CSS3设计炫目字体的相关文章

HTML5 移动开发(CSS3设计移动页面样式)

1.如何创建CSS样式表 2.CSS3的卓越特性 3.基于设备属性改变样式的媒体查询 4.如何使用属性改变元标签创建更美观移动页面   层叠样式表是移动WEB开发中的一个重要组成部分,本次分享将学到如何编写CSS并用它为移动页面定制样式,其中包括媒体查询为特定设备定制样式表.此外还将了解一些影响移动设备内容显示的元标签 创建好的样式,可通过三种方法附加到样式表里 1.内联到标签中   [建议在测试的时候这么做] 2.内嵌于HTML的开头 3.放在一个独立文档中作为样式表  [推荐的做法]*能够提

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

大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样.那么对于网站中用到的各种icon,我们就可以尝试使用font来实现,本文将详细讲解这种用法. 为什么要将icon做成字体? 在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求.那么我们就要将这些小图标输出为多种尺寸.颜色和文件格式,比如png8 alpha透明或者png8 index透明等. 比如,t

CSS3 Web嵌入字体

CSS3嵌入Web字体一直以来Web设计师在设计网页时都想为Web页面添加一些优雅的字体,但浏览器仅限于使用用户在其系统上安装的字体呈现文本,这样一来让大部分网站受限于字体数量的不足.多年来一直都是使用图片替换文本的方式来解决页面上使用优雅字体,但这种对于频繁更换文本的网站来说是一件不切实际的事,以致于我们坚持使用这些少量的Web字体.随着技术的不断发展,出现在Web页面中 使用Flash和JavaScript技术来弥补这一不足.虽然这些方法已经是不错的应急措施, 允许包含自己的字体,但是它们拥

CSS3 使用自定义字体

CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体.通过 CSS3,web 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上.您“自己的”的字体是在 CSS3 @font-face 规则中定义的. Firefox.Chrome.Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenTyp

css3 设计多色边框

CSS3中有关于Border的属性一共有三个:设计圆角border-radius,设计边框背景border-image,设计多色边框border-color. 现在我们来说一说设计多色边框border-color属性:那么在CSS3中这个属性又有什么不同之处呢?又将如何使用呢?在CSS2中,我们可以把border-color同时应用到不同的边框上,也可以分别在各边上色,如: border-color: <color>/*其中可以上一个值,也可以是多个值,具体我在这里不多说了,大家用到的也特别多

关于css3的自定义字体

css3的@font-face属性打破了中文页面字体一成不变的格局,但今天本菜在用的时候并不那么爽.开始各种引用外部ttf文件失败.下了300M+的字体文件,苦逼的试了一下午.终于有一个ttf引用成功了.于是本菜就好奇为啥其他文件引用不好使,度了一下午无果.就又傻逼的再试了一遍那300M+的ttf文件,结果还是就哪一个可以用.那个文件真的好神奇,(此处忽略本菜的内心纠结)终于发现那个可以使用的ttf文件是体积最小的一个.难道@font-face引用字体跟文件大小有关? 于是本菜特意找了几个体积在

CSS3属性+iconfont字体图标的使用方法

CSS3属性文本阴影:text-shadow:水平阴影 垂直阴影 模糊度 颜色: 可以多组值共同存在,用逗号隔开多层文本阴影的设置:text-shadow:第一层,第二层,第三层: 文本换行: 在单词内部换行: word-wrap:: normal:默认值,不允许在单词内部换行. break-word:允许单词内部换行. word-break:: break-all 允许在单词内部换行 keep-all 允许在换行点换行,单词内部不换行盒子阴影: box-shadow:水平阴影 垂直阴影 模糊度

CSS3中的字体rem

rem和em都是相对单位,em相对父元素的font-size来计算,而rem是根据文档根元素(html)的font-size大小来计算的 通常将html的字体大小设为62.5%(等于10px),当然也可以根据需要任意调整(最好是百分比形式), 除了给html设定字体大小外,我们也可以给body设定默认字体大小,如果设了,没设字体的元素就继承body的字体,而继承body字体的元素字体大小不会随html字体大小的改变而改变,否则就继承html字体

css3中的字体样式

text-overform:ellipsis省略号/clip裁剪. overform:hidden溢出隐藏文字. 但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下: text-overflow:ellipsis;  overflow:hidden;  white-space:no