助你美化网站的10+实用 CSS3 技巧

最新推荐文章于 2024-11-06 20:56:04 发布

Alone_S_H_Y

最新推荐文章于 2024-11-06 20:56:04 发布

阅读量262

点赞数

分类专栏： css 文章标签： css

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

助你美化网站的10+实用 CSS3 技巧

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

本文转载于慕课网https://www.imooc.com/article/2439

黑白图像

下面的 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://google.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%;  /* Hacky */
  height: 301%; /* Hacky */
  z-index: 3;
}
.test3 span input:focus {
  background: transparent;
  border: 0;
  z-index: 1;
}

CSS实现三角形

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

/* 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() 用法类似于函数，能够给元素设置动态的值：

/* 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 能够很简单就实现：

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 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

.disabled { 
        pointer-events: none; 
}

盒子效果

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

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 也提供了设置滚动条的属性：

::-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);
}

简单但很漂亮的文本模糊效

模糊文本

果，简单又好看！

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

圆角丝带效果

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

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

CSS:

.wrapper {
    margin: 50px auto;
    width: 280px;
    height: 370px;
    background: white;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
    box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
    position: relative;
    z-index: 90;
}

.ribbon-wrapper-green {
    width: 85px;
    height: 88px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
}

.ribbon-green {
    font: bold 15px Sans-Serif;
    color: #333;
    text-align: center;
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
    position: relative;
    padding: 7px 0;
    left: -5px;
    top: 15px;
    width: 120px;
    background-color: #BFDC7A;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
    background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
    color: #6a6340;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
    box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
    content: "";
    border-top:   3px solid #6e8900;  
    border-left:  3px solid transparent;
    border-right: 3px solid transparent;
    position:absolute;
    bottom: -3px;
}

.ribbon-green:before {
    left: 0;
}
.ribbon-green:after {
    right: 0;
}

助你美化网站的10+实用 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://google.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%;  /* Hacky */
  height: 301%; /* Hacky */
  z-index: 3;
}
.test3 span input:focus {
  background: transparent;
  border: 0;
  z-index: 1;
}

CSS实现三角形

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

/* 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() 用法类似于函数，能够给元素设置动态的值：

/* 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 能够很简单就实现：

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 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

.disabled { 
        pointer-events: none; 
}

盒子效果

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

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 也提供了设置滚动条的属性：

::-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);
}

模糊文本

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

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

圆角丝带效果

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

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

CSS:

.wrapper {
    margin: 50px auto;
    width: 280px;
    height: 370px;
    background: white;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
    box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
    position: relative;
    z-index: 90;
}

.ribbon-wrapper-green {
    width: 85px;
    height: 88px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
}

.ribbon-green {
    font: bold 15px Sans-Serif;
    color: #333;
    text-align: center;
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
    position: relative;
    padding: 7px 0;
    left: -5px;
    top: 15px;
    width: 120px;
    background-color: #BFDC7A;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
    background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
    color: #6a6340;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
    box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
    content: "";
    border-top:   3px solid #6e8900;  
    border-left:  3px solid transparent;
    border-right: 3px solid transparent;
    position:absolute;
    bottom: -3px;
}

.ribbon-green:before {
    left: 0;
}
.ribbon-green:after {
    right: 0;
}