首页

关于

了解CSS3的文字阴影效果 - Text Shadow effects

了解CSS3的文字阴影效果 - Text Shadow effects

以往的CSS开发中,如果我们需要给文字添加阴影效果,基本只能将文字做成图片,而对于CSS3来说,我们只需要添加对应的text-shadow就可以实现。在今天我们带给大家的这篇文章中,我们将简单的介绍CSS3的text-shadow属性,看看我们能够制作什么样的文字特效。希望大家喜欢!

文字阴影CSS3属性

CSS3文字阴影可以应用于各种页面上的文字,首先这里我们介绍一下主要的属性:

  • xPosition: 这个属性定义了水平位置相对于文字本身的位移
  • yPosition:和xPosition类似,定义垂直的位移
  • blurSize:定义阴影的模糊效果
  • color:定义了阴影颜色,支持hex, rgb,rgba,hsl,hsla和颜色名称

我们可以定义如下的CSS3属性:

pre.gbin1Text{
  text-shadow: 1px 1px 2px #202020
}

上面CSS定义了一个向右下方移动1个像素的阴影,并且模糊为2个像素。颜色为灰色,效果如下:

GBin1…

标签: css3, 文字阴影效果, css3文字阴影, text shadow

阅读更多

分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容

日期:2011/12/20  来源:GBin1.com

分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容

在线演示  本地下载

这个教程将实现一个页面部分内容突出显示效果, 大家可能经常见到一些页面组成内容比较多,可能会分散用户的关注点,使用部分内容突出显示,而模糊其它内容会使得用户能够比较专著的阅读页面中自己关心或者感兴趣的内容,今天这个突出内容显示效果就是为了解决这个问题而设计的。

在这个教程中,我们使用了CSS3的transition属性,所以你需要使用现代浏览器来浏览效果,比如:Safari和Chrome。

HTML标签

以下HTML标签包含了页面中需要显示的众多内容块:

<section class="ib-container" id="ib-container">
<article>
<header>
<h3><a href="#">Some…

标签: HTML, CSS, Javascript, JQuery, css3悬浮模糊效果, jQuery模糊悬浮, 模糊, 动画, box阴影, 文字阴影, blur, css3, transition, jquery, box shadow, text shadow, articles, scale, transform, animation

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.