前端笔记:帮助你美化网站的10+实用 CSS3 技巧

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

黑白图像

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

1
2
3
4
5
6
7
img.desaturate {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

  在线演示

 

页面顶部阴影

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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:

1
2
3
4
<div class="test3">
  <span><input type="text" value=" " readonly="true" />
  <a href="http://google.com">Double click me</a></span>
</div>

  CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.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%/* Hacky */
  height: 301%; /* Hacky */
  z-index: 3;
}
.test3 span input:focus {
  background: transparent;
  border: 0;
  z-index: 1;
}

  在线演示

 

CSS 实现三角形

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* create an arrow that points up */
div.arrow-up {
  width:0px;
  height:0px;
  border-left:5px solid transparent/* left arrow slant */
  border-right:5px solid transparent; /* right arrow slant */
  border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}
 
/* create an arrow that points down */
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;
}
 
/* create an arrow that points left */
div.arrow-left {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent/* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-right:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}
 
/* create an arrow that points right */
div.arrow-right {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent/* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-left:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

  在线演示

 

CSS3 calc() 的使用

calc() 用法类似于函数,能够给元素设置动态的值:

1
2
3
4
5
6
7
8
9
10
11
/* basic calc */
.simpleBlock {
  width: calc(100% - 100px);
}
 
/* calc in calc */
.complexBlock {
  width: calc(100% - 50% / 3);
  padding: 5px calc(3% - 2px);
  margin-left: calc(10% + 10px);
}

  在线演示

 

文本渐变

文本渐变效果很流行,使用 CSS3 能够很简单就实现:

1
2
3
4
5
6
7
8
9
10
11
h2[data-text] {
  position: relative;
}
h2[data-text]::after {
  content: attr(data-text);
  z-index: 10;
  color: #e3e3e3;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));

  在线演示

 

禁用鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件,例如,一个连接如果设置了下面的样式就无法点击了。

1
.disabled { pointer-events: none; }

  点击试试

 

盒子效果

下面的代码可以实现一个漂亮的盒子效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
p {
  padding: 5px 10px;
  margin: 10px;
  background: #ff0030;
  color: #fff;
  font-size: 21px;
  line-height: 1.3em;
  border: 2px dashed #fff;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
  text-shadow: -1px -1px #aa3030;
}

  在线演示

 

自定义滚动条

过去一直都只有 IE 才能设置滚动条样式,现在好了,Webkit 也提供了设置滚动条的属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
::-webkit-scrollbar {
  width: 12px;
}
 
::-webkit-scrollbar-track {
  background: none;
}
 
::-webkit-scrollbar-thumb {
  background: -webkit-linear-gradient(left, #547c90, #002640);
  border: 1px solid #333;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
}

  在线演示

 

模糊文本

简单但很漂亮的文本模糊效果,简单又好看!

1
2
3
4
.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

  在线演示

 

圆角丝带效果

这段代码有点长,但是圆角丝带效果很奇特!

1
2
3
<div class="wrapper">
       <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>

  CSS:

  在线演示

您可能感兴趣的相关文章

 

本文链接:分享10个帮助你美化网站的 CSS3 技巧【附源码】

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

posted @   梦想天空(山边小溪)  阅读(10528)  评论(7编辑  收藏  举报
点击右上角即可分享
微信分享提示