CSS Gradient文字效果


你想創建的標題沒有渲染和Photoshop每個標題嗎?這里是一個簡單的CSS技巧向您展示如何創建漸變文字效果,PNG圖像(純CSS,沒有Javascript或Flash)。你所需要的是一個空的< span >標記的標題和應用使用CSS背景圖像疊加 position:absolute。這種方法已經在大多數瀏覽器測試:Firefox、Safari、Opera,甚至Internet Explorer 6。繼續閱讀本文找出。
 

VIEWDemos

DOWNLOADDemo ZIP

 

好處
這是純CSS技巧,沒有Javascript或閃光。它可以工作在大多數瀏覽器包括IE6(PNG黑客需要)。
它是完美的設計標題。你不必用Photoshop呈現每個標題。這將節省你的時間和帶寬。
您可以使用任何web字體和字體大小是可伸縮的。
 
這是如何工作的呢?
關鍵是非常簡單的。基本上我們只是添加一個1 px梯度PNG(alpha透明度)在文本。
 

HTML

<h1><span></span>CSS Gradient Text</h1>

CSS

這里的關鍵是:h1 { position: relative}和h1 span{ position: absolute}
h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}
這是它!你是做。點擊這里查看我的演示頁面。
 
使它在IE6上工作
自IE6 PNG-24呈現不正常,需要以下黑客為了顯示透明PNG(添加<head>標記之間的任何地方):
!--[if lt IE 7]>

<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->
jQuery預謀版本(語義愛好者)
如果你不想空< span >標記的標題,您可以使用Javascript預謀< span >標記。下面是一個示例使用jQuery預謀的方法:
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  //prepend span tag to H1
  $("h1").prepend("<span></span>");
    
});
</script>

原文地址:http://webdesignerwall.com/tutorials/css-gradient-text-effect

轉載注明:http://www.cnblogs.com/leejersey/p/3478096.html


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: