文档章节

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

lotozhou
 lotozhou
发布于 2015/12/01 09:54
字数 421
阅读 41
收藏 1
点赞 0
评论 0

       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
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员
10个不错的CSS3表单教程

注:本文由敏捷翻译- 宋彩珺翻译自Jean-Baptiste Jung的博文。如需转载,请参照文章末尾处的声明。 CSS3的出现,为制作更好的网页表单带来无数新的可能。在本文中,我收集了10种运用新技术C...

随影求是 ⋅ 2012/03/15 ⋅ 0

如果你在找 CSS 学习资源,那就收藏这篇文章

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

伯乐在线 ⋅ 2014/11/07 ⋅ 0

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

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

罗马教堂的钟声 ⋅ 2015/12/02 ⋅ 0

分享一个CSS3实现的动态内容标签页切换效果教程

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

gbin1 ⋅ 2012/04/16 ⋅ 0

程序猿必备的15款web前端动画插件七

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

爱码农 ⋅ 01/08 ⋅ 0

程序猿必备的10款超炫酷HTML5 Canvas插件

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

爱前端 ⋅ 2017/12/04 ⋅ 0

最新的 Javascript 和 CSS 应用技巧荟萃

随着前端技术的发展,javascript和css在 网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过 的特效和动画,在今天...

gbin1 ⋅ 2012/07/10 ⋅ 12

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

圆角丝带效果 这段代码有点长,但是圆角丝带效果很奇特! HTML: <div class="wrapper"> <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div></div> CSS: .wrapp......

罗马教堂的钟声 ⋅ 2015/12/03 ⋅ 0

推荐11款jQuery开发的复选框和单选框美化插件

作者:Chris Spooner 翻译:Terry li - GBin1.com 英文: jQuery Plugins for Styling Checkbox & Radio Buttons web开发中所有的输入控件中复选框和单选框的样式是最难去设计的,因为不同的...

gbin1 ⋅ 2011/07/02 ⋅ 2

超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员 ⋅ 04/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud构建微服务架构—创建“服务注册中心”

创建一个基础的Spring Boot工程,命名为eureka-server,并在pom.xml中引入需要的依赖内容: <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-par......

itcloud ⋅ 11分钟前 ⋅ 0

拖动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>event</title> <style> #box { width: 100px; height: 100px; background-color: aquamarine; position: absolute; } </style......

fyliujj ⋅ 13分钟前 ⋅ 0

es6 polyfill array

polyfill之javascript函数的兼容写法——Array篇 1. Array.isArray(obj) if (!Array.isArray) { Array.isArray = function(arg) { return Object.prototype.toString.call(arg) === '[objec......

球球 ⋅ 15分钟前 ⋅ 0

kibana启动异常

检查一下:kibana.yml 每一对key:value中,冒号之后应有空格。

增删改查1 ⋅ 17分钟前 ⋅ 0

js修改img的src属性刷新图片时的图片缓存问题

问题:上传一张图片,通过js更新src属性刷新图片使其即时显示时, 当img的src当前的url与上次地址无变化时(只更改图片,名称不变,不同图片名称相同)图片不变化(仍显示原来的图片) 但通过...

HaierBrother ⋅ 17分钟前 ⋅ 0

Mysql

1.Jdbc Url 设置allowMultiQueries为true和false mysql的批量更新是要我们主动去设置的, 就是在数据库的连接url上设置一下,加上* &allowMultiQueries=true *即可。 参数名称 参数说明 缺省...

瑟青豆 ⋅ 21分钟前 ⋅ 0

mysql导出导入表结构与数据

当我们需要进行数据迁移时,mysql自带的mysqldump会是最好的方式。 1.导出某张表的结构和数据 首先,我们应当使用服务器,打开终端,连接到所需要导出的表所在的服务器上。执行命令: mysqld...

hengbao5 ⋅ 21分钟前 ⋅ 0

世界杯也走向“比拼”大数据的时代

《日本经济新闻》6月19日报道称,俄罗斯足球世界杯已于6月14日揭开战幕。作为第21次举办的足球世界杯,如何活用大数据有可能成为决定各支球队胜负的重要因素。从对阵球队的分析到战术建议,还...

加米谷大数据 ⋅ 21分钟前 ⋅ 0

金额转为千分制,金额转中文大写

金额转关为大写 js /** 数字金额大写转换(可以处理整数,小数,负数) */ function digitUppercase(n){ if(!n) reutrn "" let fraction = ['角', '分']; let digit = ['零', '壹', '贰', '叁', ...

YXMBetter ⋅ 24分钟前 ⋅ 0

开发利器JRebel部署SpringBoot项目

不要以为年纪轻轻就跌倒了人生谷底,未来还有更大的下降空间等着你。 idea下载和安装JRebel 激活JRebel 访问https://my.jrebel.com/ 使用facebook或twitter登录 勾选 Build project automati...

郑龙飞 ⋅ 30分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部