文档章节

助你美化网站的实用css3技巧(1)

lotozhou
 lotozhou
发布于 2015/12/01 09:54
字数 421
阅读 43
收藏 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;

}






© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问
助你美化网站的实用css3技巧(2)

CSS3 calc() 的使用 calc() 用法类似于函数,能够给元素设置动态的值: .simpleBlock { width: calc(100% - 100px);} .complexBlock { width: calc(100% - 50% / 3); padding: 5px calc(3% -......

罗马教堂的钟声
2015/12/02
46
0
如果你在找 CSS 学习资源,那就收藏这篇文章

本文由伯乐在线 -伯小乐 翻译。未经许可,禁止转载! 英文出处:Grace Smith。欢迎加入翻译组。 如果你在寻找一些 CSS 基础和高级的指南或资源,那这篇文章应该有你要的 CSS 初级和高级指南:...

伯乐在线
2014/11/07
0
0
分享一个CSS3实现的动态内容标签页切换效果教程

日期:2012-4-14 来源:GBin1.com 在线演示 本地下载 在这篇教程中,我们将学习如何使用CSS3来实现一个动态的标签页切换效果。希望大家喜欢。 内容标签页在网站或者web开发中经常使用到,它对...

gbin1
2012/04/16
0
0
程序猿必备的15款web前端动画插件七

  1.超简易的SVG/CSS3 Loading加载动画图标   今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标,和之前分享的SVG实现的一组超华丽Loading加载动画相比,这组Loading动画...

爱码农
01/08
0
0
程序猿必备的10款超炫酷HTML5 Canvas插件

  1.超炫酷HTML5 Canvas 3D旋转地球动画   这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们...

爱前端
2017/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

进程管理利器Supervisor--centos7下安装与卸载

目录 概述 环境准备 检查python环境 在线安装 配置Supervisor 启动并验证 概述 Supervisor的安装可以有在线安装和离线安装两种方式。安装方式取决于服务器是否联网,联网的话可采用在线安装,...

java_龙
9分钟前
1
0
spring系列汇总

spring spring-基于可扩展Schema的特性自定义标签 springmvc-同一个访问资源,多种视图解析方式 spring cache 配置使用aspectj模式织入 基于注解的spring缓存,轻松无侵入解决cache问题 spri...

细肉云吞
10分钟前
0
0
vsftpd搭建ftp

12月10日任务 14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp exportfs命令 在nfs运行后的一段时间内,如果需要添加共享目录,这时需要修改exports文件,并...

robertt15
12分钟前
1
0
numpy常用操作

水平合并数组 import numpy as npa = [1,2,3]b = [4,5,6]np.hstack((a,b))# array([1, 2, 3, 4, 5, 6])c = [a,['a','b','c']]d = [b,['d','e','f']]np.hstack((c,d))#array([['1'......

datadev_sh
29分钟前
2
0
四种检测异常值的常用技术简述

摘要: 本文介绍了异常值检测的常见四种方法,分别为Numeric Outlier、Z-Score、DBSCAN以及Isolation Forest 在训练机器学习算法或应用统计技术时,错误值或异常值可能是一个严重的问题,它们...

阿里云官方博客
32分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部