10个不可忽视的CSS代码片段

原创|使用教程|编辑:龚雪|2014-11-27 10:14:09.000|阅读 1720 次

概述:本文介绍10个非常有用的CSS代码片段,绝对不容忽视。包括在整个容器中垂直对齐、元素拉伸为全屏高度、跨浏览器图像灰度、动画背景等,使用平率高,经常无法完全达到想要效果。现在有了这10个CSS代码片段,我们可以将这些效果做得更好。

相关链接:

10个不可忽视的CSS代码片段

1、垂直对齐

在使用CSS的时候,你可能会出现疑问,我如何在容器中将文本或元素垂直对齐。现在使用CSS3 Transforms,我们可以更有效解决这问题,如下:

开发工具限时抢购,已经有人拿到大礼了


【年终大促 巅峰盛"慧" 】促销火热进行中 iPhone 6 Plus、 iPhone 6、iPad Air等你拿 点我查看

慧都联合葡萄城产品年终大惠,第二套起,买一送一!11月17日-12月31日,机会不容错过!点我查看

FastReport VCL 5新版发布会,2014-12-9 15:00网络直播,免费参加 立即报名参加者买FastReport旗下所有产品<6折>

.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上做文章。

html,
body {
height: 100%;
}

任何元素100%高度,如下:

div {
height: 100%;
}

3、根据文件格式引用不同样式

有时候你可能需要将特定的链接以不同颜色展现出来,来让他更容易被区分。下面的CSS片段将会为文本、链接添加图标,如下:

a[href^="http://"]{
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;
}

效果如下:

5、跨浏览器图像灰度

灰度可以为网站提供更深的基调使其看起来更优雅简约。这里我们使用SVG为图片添加一个慧都过滤器。

<svg xmlns="http://www.w3.org/2000/svg">
<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属性跨浏览器:

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最诱人的功能之一—添加动画效果。我们可以将背景颜色、透明度、大小等做成动画效果。但是梯度效果却不行。现在我们可以使用以下代码来实现。

button {
background-image: linear-gradient(#5187c4, #1c2f45);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
button:hover {
background-position: 0 0;
}

效果:

6、CSS 列表自动宽度

表格调整列宽时间麻烦的事情。不过也可以轻松解决,在td元素中使用white-space: nowrap:

td {
white-space: nowrap;
}

效果:

<iframe width="100%" height="300" src="http://jsfiddle.net/agusesetiyono/1uotj8wv/3/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

7、显示阴影

想要添加阴影,那就试试这个代码吧,可以在任意边添加阴影。要完成此项,首相,确定盒子的长宽,使用:after 伪元素,放置到正确位置,代码如下:

.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;
}

效果:

8、长文本封装

如果你的文本内容比容器还长,那下面这个代码就对你很有帮助了。

css长文本封装

使用CSS适应容器宽度:

pre {
white-space: pre-line;
word-wrap: break-word;
}

效果

css长文本封装效果

9、模糊文本

想让文本有模糊效果?就这两步: color transparent、添加text-shadow :

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

10、使用CSS制作动画省略号

在加载的时候来个动画效果如何?

.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}

效果:

英文:10 Simple & Smart CSS Snippets

转载请注明:文章转载自:慧都控件网 
原文地址:10个不可忽视的CSS代码片段



标签:CSS3

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat