《每个设计师都应该掌握的50个css代码段》11~20段

2019独角兽企业重金招聘Python工程师标准>>>

11.胶卷边框

img.polaroid {background:#000; /*Change this to a background image or remove*/border:solid #fff;border-width:6px 6px 20px 6px;box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */-webkit-box-shadow:1px 1px 5px #333;-moz-box-shadow:1px 1px 5px #333;height:200px; /*Set to height of your image or desired div*/width:200px; /*Set to width of your image or desired div*/ }

Code Source

应用这个小片段能让你在的图像上使用.polaroid类。它会产生老式照片的效果。你会产生重新设置宽/高值以适应图片尺寸和网站布局的冲动。

12.锚链接伪类

a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; }

Code Source

大多数的css开发人员知道锚链接样式和:hover效果。但是我想加入这条代码段作为新手的参考。这是锚链接和其他一些html元素默认的4种状态。在你能记住一些更多的复杂方法之前&＃xff0c;尽管使用这种方便的用法。

13.奇妙的css3行内引用

.has-pullquote:before {/* Reset metrics. */padding: 0;border: none;/* Content */content: attr(data-pullquote);/* Pull out to the right, modular scale based margins. */float: right;width: 320px;margin: 12px -140px 24px 36px;/* Baseline correction */position: relative;top: 5px;/* Typography (30px line-height equals 25% incremental leading) */font-size: 23px;line-height: 30px; }.pullquote-adelle:before {font-family: "adelle-1", "adelle-2";font-weight: 100;top: 10px !important; }.pullquote-helvetica:before {font-family: "Helvetica Neue", Arial, sans-serif;font-weight: bold;top: 7px !important; }.pullquote-facit:before {font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;font-weight: bold;top: 7px !important; }

Code Source

出现在你的博客或者新文章中的行内引用和块引用是不同的。行内引用常在文章中引用文本&＃xff0c;所以他们表现的和块引用有些许不同。这些引用有一些基本的属性&＃xff1a;可选的3种独特的字体类型。

14.css3全屏背景

html { background: url(&＃39;images/bg.jpg&＃39;) no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; }

Code Source

这段代码在不支持css3语法的老式浏览器中无法正确的表达。当然如果你在寻找一个快捷的方案同时不必考虑老旧的系统支持&＃xff0c;这段代码就是你所需要的&＃xff01;在你的网站添加一张大照片&＃xff0c;它们可调整、在你滚动页面的时候也能固定不动&＃xff0c;这一定很棒。

15.垂直居中

.container {min-height: 6.5em;display: table-cell;vertical-align: middle; }

Code Source

使用margin&＃xff1a;0 auto&＃xff1b;方法很容易使文本水平居中。然而垂直方向的文本会有点困难啊&＃xff0c;尤其在页面含有滚动条和其他一些方法的时候。这是一段完美实现垂直居中纯css代码。

16.垂直滚动条

html { height: 101% }

当你的页面内容无法填满浏览器剩余的高度时&＃xff0c;就不会有滚动条。当然&＃xff0c;改变尺寸会使滚动条出现&＃xff0c;同时会有10~15个像素填入到页面中&＃xff0c;使窗口宽度增加。这段代码可以确保html元素总是比浏览器大一点点&＃xff0c;从而使滚动条始终保持不动。

17.css3渐变模板

#colorbox {background: #629721;background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));background-image: -webkit-linear-gradient(top, #83b842, #629721);background-image: -moz-linear-gradient(top, #83b842, #629721);background-image: -ms-linear-gradient(top, #83b842, #629721);background-image: -o-linear-gradient(top, #83b842, #629721);background-image: linear-gradient(top, #83b842, #629721); }

css3渐变是新规范中另一奇妙的部分。很多特定的前缀很难记忆&＃xff0c;所以这段代码可以帮你在每项工程中节省时间。

18.&＃64;font-face&＃xff08;服务器端字体&＃xff09;模板

&＃64;font-face {font-family: &＃39;MyWebFont&＃39;;src: url(&＃39;webfont.eot&＃39;); /* IE9 Compat Modes */src: url(&＃39;webfont.eot?#iefix&＃39;) format(&＃39;embedded-opentype&＃39;), /* IE6-IE8 */url(&＃39;webfont.woff&＃39;) format(&＃39;woff&＃39;), /* Modern Browsers */url(&＃39;webfont.ttf&＃39;) format(&＃39;truetype&＃39;), /* Safari, Android, iOS */url(&＃39;webfont.svg#svgFontName&＃39;) format(&＃39;svg&＃39;); /* Legacy iOS */ }body {font-family: &＃39;MyWebFont&＃39;, Arial, sans-serif; }

Code Source

又是一段不怎么好记的css3代码。使用&＃64;fant-face可以在站点插入你自己的TTF/OTF/SVG/WOFF文件&＃xff0c;生成自定义字体类型。以该模板为例子&＃xff0c;你可以在以后的项目中使用。

19.封装css3元素

p {position:relative;z-index:1;padding: 10px;margin: 10px;font-size: 21px;line-height: 1.3em;color: #fff;background: #ff0030;-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);-moz-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);-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; }p:before {content: "";position: absolute;z-index: -1;top: 3px;bottom: 3px;left :3px;right: 3px;border: 2px dashed #fff; }p a {color: #fff;text-decoration:none; }p a:hover, p a:focus, p a:active {text-decoration:underline; }

Code Source