10个不可忽视的CSS代码片段
使用教程 | 作者：走猫步的鱼 | 2014-11-27 10:14:09| 阅读 1181次 有用 (2) 评论 (0) 收藏
概述：本文介绍10个非常有用的CSS代码片段，绝对不容忽视。包括在整个容器中垂直对齐、元素拉伸为全屏高度、跨浏览器图像灰度、动画背景等，使用平率高，经常无法完全达到想要效果。现在有了这10个CSS代码片段，我们可以将这些效果做得更好。
- 10个不可忽视的CSS代码片段
- 6款CSS预处理器 你值得拥有!
1、垂直对齐
在使用CSS的时候，你可能会出现疑问，我如何在容器中将文本或元素垂直对齐。现在使用CSS3 Transforms，我们可以更有效解决这问题，如下：
|
1
2
3
4
5
6
7
|
.verticalcenter{
position
:
relative
;
top
:
50%
;
-webkit-transform: translateY(
-50%
);
-o-transform: translateY(
-50%
);
transform: translateY(
-50%
);
}
|
使用这个技术，文本、段落等都可以垂直对齐，CSS3 Transform 支持Chrome 4, Opera 10, Safari 3, Firefox 3, Internet Explorer 9。
2、元素拉伸为全屏高度
一般来说，你可能会想要把元素拉伸为全屏高度，问本元素调整只会调整容器的大小，因此元素跨越整个窗口高度就需要在html 、 body上做文章。
|
1
2
3
4
|
html,
body {
height
:
100%
;
}
|
任何元素100%高度，如下：
|
1
2
3
|
div {
height
:
100%
;
}
|
3、根据文件格式引用不同样式
有时候你可能需要将特定的链接以不同颜色展现出来，来让他更容易被区分。下面的CSS片段将会为文本、链接添加图标，如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
padding-right
:
20px
;
background
:
url
(external.gif)
no-repeat
center
right
;
}
/* emails */
a[href^=
"mailto:"
]{
padding-right
:
20px
;
background
:
url
(email.png)
no-repeat
center
right
;
}
/* pdfs */
a[href$=
".pdf"
]{
padding-right
:
20px
;
background
:
url
(pdf.png)
no-repeat
center
right
;
}
|
效果如下：
width="100%" height="300" src="http://jsfiddle.net/agusesetiyono/3sL1r0mw/embedded/" frameborder="0">
5、跨浏览器图像灰度
灰度可以为网站提供更深的基调使其看起来更优雅简约。这里我们使用SVG为图片添加一个慧都过滤器。
|
1
2
3
4
5
|
<filter id=
"grayscale"
>
<feColorMatrix type=
"matrix"
values=
"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"
/>
</filter>
</svg>
|
使用 filter属性跨浏览器：
|
1
2
3
4
5
|
img {
filter:
url
(filters.svg#grayscale);
/* Firefox 3.5+ */
filter:
gray
;
/* IE6-9 */
-webkit-filter: grayscale(
1
);
/* Google Chrome, Safari 6+ & Opera 15+ */
}
|
6、动画背景
CSS最诱人的功能之一—添加动画效果。我们可以将背景颜色、透明度、大小等做成动画效果。但是梯度效果却不行。现在我们可以使用以下代码来实现。
|
1
2
3
4
5
6
7
8
9
|
button {
background-image
: linear-gradient(
#5187c4
,
#1c2f45
);
background-
size
:
auto
200%
;
background-position
:
0
100%
;
transition: background-position
0.5
s;
}
button:hover {
background-position
:
0
0
;
}
|
效果：
width="100%" height="300" src="http://jsfiddle.net/agusesetiyono/gw46dk27/1/embedded/" frameborder="0">
6、CSS 列表自动宽度
表格调整列宽时间麻烦的事情。不过也可以轻松解决，在td元素中使用white-space: nowrap：
|
1
2
3
|
td {
white-space
:
nowrap
;
}
|
效果：
width="100%" height="300" src="http://jsfiddle.net/agusesetiyono/1uotj8wv/3/embedded/" frameborder="0" allowfullscreen="allowfullscreen">
7、显示阴影
想要添加阴影，那就试试这个代码吧，可以在任意边添加阴影。要完成此项，首相，确定盒子的长宽，使用:after 伪元素，放置到正确位置，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.box-shadow {
background-color
:
#FF8020
;
width
:
160px
;
height
:
90px
;
margin-top
:
-45px
;
margin-left
:
-80px
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
}
.box-shadow:after {
content
:
""
;
width
:
150px
;
height
:
1px
;
margin-top
:
88px
;
margin-left
:
-75px
;
display
:
block
;
position
:
absolute
;
left
:
50%
;
z-index
:
-1
;
-webkit-box-shadow:
0px
0px
8px
2px
#000000
;
-moz-box-shadow:
0px
0px
8px
2px
#000000
;
box-shadow:
0px
0px
8px
2px
#000000
;
}
|
效果：
width="100%" height="300" src="http://jsfiddle.net/agusesetiyono/1kwhsfvo/embedded/" frameborder="0">
8、长文本封装
如果你的文本内容比容器还长，那下面这个代码就对你很有帮助了。
使用CSS适应容器宽度：
|
1
2
3
4
|
pre
{
white-space
: pre-line;
word-wrap: break-word;
}
|
效果
9、模糊文本
想让文本有模糊效果？就这两步： color transparent、添加text-shadow ：
|
1
2
3
4
|
.blurry-text {
color
:
transparent
;
text-shadow
:
0
0
5px
rgba(
0
,
0
,
0
,
0.5
);
}
|
width="100%" height="300" src="http://jsfiddle.net/agusesetiyono/n5uh4s0j/embedded/" frameborder="0">
10、使用CSS制作动画省略号
在加载的时候来个动画效果如何？
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.loading:after {
overflow
:
hidden
;
display
: inline-
block
;
vertical-align
:
bottom
;
animation: ellipsis
2
s infinite;
content
:
"\2026"
;
/* ascii code for the ellipsis character */
}
@keyframes ellipsis {
from {
width
:
2px
;
}
to {
width
:
15px
;
}
}
|
效果：
width="100%" height="300" src="http://jsfiddle.net/agusesetiyono/MDzsR/69/embedded/" frameborder="0">
英文：10 Simple & Smart CSS Snippets
转载请注明：文章转载自：慧都控件网
原文地址：10个不可忽视的CSS代码片段
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
