zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    类的加载与ClassLoader的理解
    反射:获取Class 类的实例(四种方法)
    磁盘调度算法
    死锁检测算法
    银行家算法
    最低松弛度调度算法模拟
    多级反馈队列调度算法
    内存中:请求调页存储管理方式的模拟
    内存的动态分区分配方式的模拟
    “短进程优先”调度算法
  • 原文地址:https://www.cnblogs.com/leejersey/p/3478096.html
Copyright © 2011-2022 走看看