助你美化网站的实用css3技巧(1)
博客专区 > lotozhou 的博客 > 博客详情
助你美化网站的实用css3技巧(1)
lotozhou 发表于2年前
助你美化网站的实用css3技巧(1)
  • 发表于 2年前
  • 阅读 40
  • 收藏 1
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

       CSS3 规范让前端开发人员能够创建出各种复杂的视觉效果,使网站更好看,更能够吸引用户访问。这篇文章中,我收集了一组实用的 CSS3 技巧,能够帮助你美化您的网站,并给它一个更专业的外观和感觉。

黑白图像

下面的 CSS 代码能够把彩色图像转变成黑白风格:

    img.desaturate { 

        filter: grayscale(100%);

        -webkit-filter: grayscale(100%);

        -moz-filter: grayscale(100%);

        -ms-filter: grayscale(100%);

        -o-filter: grayscale(100%);

    }

页面顶部阴影

下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果:

    body:before {

          content: "";

          position: fixed;

          top: -10px;

          left: 0;

          width: 100%;

          height: 10px;

          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

          box-shadow: 0px 0px 10px rgba(0,0,0,.8);

          z-index: 100;

    }

检测鼠标双击

不管您相信与否,使用 CSS 就能够检测出元素是否被双击:

HTML

    <div class="test3">

      <span><input type="text" value=" " readonly="true" />

      <a href="http://www.baidu.com">Double click me</a></span>

    </div>

CSS

    .test3 span {

      position: relative;

    }

    .test3 span a { 

      position: relative;

      z-index: 2; 

    }

    .test3 span a:hover, .test3 span a:active { 

      z-index: 4; 

    }

    .test3 span input { 

      background: transparent; 

      border: 0; 

      cursor: pointer; 

      position: absolute; 

      top: -1px; 

      left: 0; 

      width: 101%; 

      height: 301%; 

      z-index: 3; 

    }

    .test3 span input:focus { 

      background: transparent; 

      border: 0; 

      z-index: 1; 

    }

css实现三角形

这其实是一个古老的技巧,不需要用到 CSS3 新特性就能实现:

    div.arrow-up {

      width:0px; 

      height:0px; 

      border-left:5px solid transparent;

      border-right:5px solid transparent; 

      border-bottom:5px solid #2f2f2f; 

      font-size:0px;

      line-height:0px;

    }

    div.arrow-down {

      width:0px; 

      height:0px; 

      border-left:5px solid transparent;

      border-right:5px solid transparent;

      border-top:5px solid #2f2f2f;

      font-size:0px;

      line-height:0px;

    }

    div.arrow-left {

      width:0px; 

      height:0px; 

      border-bottom:5px solid transparent;

      border-top:5px solid transparent; 

      border-right:5px solid #2f2f2f;

      font-size:0px;

      line-height:0px;

    }

div.arrow-right {

  width:0px; 

  height:0px; 

  border-bottom:5px solid transparent;  

  border-top:5px solid transparent; 

  border-left:5px solid #2f2f2f; 

  font-size:0px;

  line-height:0px;

}






共有 人打赏支持
粉丝 8
博文 51
码字总数 51524
×
lotozhou
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: