超实用的css代码段_每个设计师都应该拥有的50条有用CSS代码段

每年都有如此多的新趋势在发展，要跟上行业发展可能是困难的。 网站设计师和前端开发人员已深入了解最新的CSS3属性 ，从而确定了最终的浏览器支持和怪异的技巧。 但是，也有一些精妙CSS2代码片段，这些片段在比较中并未得到回报。

对于本文，我想为任何Web专业人员介绍50个方便CSS2 / CSS3代码段 。 它们非常适合存储在您选择的开发IDE中，甚至可以保存在一个小CSS文件中。 无论哪种方式，我都确信设计师和开发人员可以在本系列的某些代码片段中找到一些用处。

1. CSS重置

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

p { font-size: 1.2em; line-height: 1.0em; color: #333; }

基本CSS浏览器重置是您可以在网上找到的一些最常见的摘要。 这是我本人根据Eric Meyer的重置代码定制的片段。 我为响应图像添加了一些内容，并将所有核心元素设置为border-box ，以确保页边距和填充尺寸正确对齐。

2.经典CSS Clearfix

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

在许多精明的Web开发人员中，这种clearfix代码已经在Web上流行了多年。 您应该将此类应用于包含浮动元素的容器。 这将确保之后出现的所有内容都不会浮动，而是会被按下并清除 。

3. 2011更新的Clearfix

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }

/* IE 6/7 */
.clearfix { zoom: 1; }

据我所知，此较新版本与经典版本之间的渲染没有太大区别。 这两个类都将有效清除浮动信息，并且它们应在所有现代浏览器甚至旧版Internet Explorer 6-8中都可以使用。

4.跨浏览器的透明度

.transparent {
    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}

一些较新CSS3属性使我们沉迷于认为它们可以在任何地方应用。 不幸的是，不透明就是一个这样的例子，其中CSS仍然需要一些小的更新。 附加filter属性应该可以优雅地处理IE的任何较旧版本。

5. CSS Blockquote模板

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}
blockquote p {
    display: inline;
}

并非每个人都需要在其网站内使用大引用。 但是我觉得这些是用于分隔博客或网页中引用或重复内容的优秀HTML元素。 CSS的这一基本块为您的块引用提供了默认样式，因此它们不会显得单调乏味。

6.个人圆角

#container {
    -webkit-border-radius: 4px 3px 6px 10px;
    -moz-border-radius: 4px 3px 6px 10px;
    -o-border-radius: 4px 3px 6px 10px;
    border-radius: 4px 3px 6px 10px;
}

/* alternative syntax broken into each line */
#container {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 10px;
    
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 10px;
}

大多数开发人员都熟悉CSS3圆角语法。 但是您将如何为每个角设置不同的值 ？ 保存此代码段，您再也不会遇到问题了！ 我提供了精简版和更长的底座，每个角半径都分解为不同的属性。

7.一般媒体查询

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
  /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}

这是一个很好的模板，您可以在CSS-Tricks上找到其他媒体查询的片段。 但是，我已完整复制了他们的示例，其中包括大量的真实移动设备。 这些代码甚至会使用min-device-pixel-ratio针对基于视网膜的设备。

8.现代字体栈

/* Times New Roman-based serif */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* A modern Georgia-based serif */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/*A more traditional Garamond-based serif */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/*The Helvetica/Arial-based sans serif */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

/*The Verdana-based sans serif */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

/*The Trebuchet-based sans serif */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

/*The heavier "Impact" sans serif */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

/*The monospace */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

为设计新网页而集思广益，很难集思广益。 我希望此片段可以减轻一些折磨，并为您提供一些入门模板。 如果要查找更多示例，请查看CSS字体堆栈 ，这是我最喜欢的资源之一。

9.自定义文本选择

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

一些较新的网络浏览器将允许您在网页上定义突出显示颜色。 默认情况下 ， 它设置为浅蓝色 ，但是您可以设置任何使您喜欢的颜色值。 此代码片段包括典型的::selection目标以及Webkit和Mozilla的供应商前缀。

10.隐藏H1文字作为徽标

h1 {
    text-indent: -9999px;
    margin: 0 auto;
    width: 320px;
    height: 85px;
    background: transparent url("images/logo.png") no-repeat scroll;
}

我首先注意到该技术已在旧的Digg布局上实现 。 您可以设置一个H1标签，该标签还以明文形式包含您的网站名称，以用于SEO。 但是，使用CSS我们可以移动此文本，使其不可见，然后将其替换为自定义徽标图片 。

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*/
}

应用此基本代码片段将使您可以在图像上实现.polaroid类。 这将创建带有大白色边框和一些轻微盒子阴影的旧照片风格效果 。 您需要更新宽度/高度值，以使其与图像尺寸和网站布局相匹配。

12.锚链接伪类

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

大多数CSS开发人员都知道锚链接样式和:hover效果。 但是我想把这个小的代码片段作为新手的参考。 这些是锚链接的四个默认状态，以及其他一些HTML元素。 保持方便，直到您可以记住一些更晦涩的地方。

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

拉引号与块引号的不同之处在于，它们出现在博客或新闻文章的侧面。 这些通常引用文章中引用的文本，因此它们看起来与块引用略有不同。 该默认类具有一些基本属性以及3种独特的字体系列供您选择。

14. CSS3的全屏背景

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

我应该注意，此代码在不支持CSS3语法的旧版浏览器中将无法正常工作。 但是，如果您正在寻找一种快速的解决方案并且不关心旧版支持，那么这是您会发现的最佳代码块！ 非常适合在您的网站背景中添加大型照片，同时在滚动时使它们可调整大小和固定 。

15.垂直居中的内容

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

使用margin：0自动技术，将内容嵌入到页面的水平中心非常容易。 但是，垂直内容要难得多，尤其是考虑滚动条和其他方法时。 但这是一个纯CSS解决方案，无需使用JavaScript就可以完美运行。

16.强制垂直滚动条

html { height: 101% }

当页面内容不能完全覆盖浏览器窗口的整个高度时，您最终就不会得到任何滚动条。 但是，调整大小将迫使它们出现，并在窗口的宽度上附加额外的10-15像素，从而将您的网页内容覆盖。 此代码段将确保您的HTML元素始终总是比浏览器高一点，从而迫使滚动条始终保持在原位。

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渐变是更新规范中另一个奇妙的部分。 许多供应商前缀很难记住，因此此代码段应为您节省每个项目的时间。

18. @ font-face模板

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

这是另一段最难记住CSS3代码。 使用@ font-face，您可以将自己的TTF / OTF / SVG / WOFF文件嵌入您的网站并生成自定义字体系列。 将此模板用作将来您自己的项目的基本示例。

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

20. CSS3斑马条纹

tbody tr:nth-child(odd) {
    background-color: #ccc;
}

可能最好的项目包括斑马条纹是在数据表中。 当用户要扫描40或50行以确定确切地将哪个单元格对齐到哪一行时，可能会很困难。 通过在默认情况下添加斑马条纹，我们可以更新具有不同背景颜色的奇数行。

21.花式“＆”号

.amp {
    font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
    font-style: italic;
    font-weight: normal;
}

此类将应用于页面内容中包裹在您的＆字符周围的一个span元素。 它将使用一些经典的衬线字体，并使用斜体来增强“＆”符号。 在演示网页上尝试一下，看看您如何喜欢设计。

22.首字下沉的段落

p:first-letter{
    display: block;
    margin: 5px 0 0 5px;
    float: left;
    color: #ff3366;
    font-size: 5.4em;
    font-family: Georgia, Times New Roman, serif;
}

通常，您会注意到大写字母出现在报纸和书籍等印刷媒体上。 但是，这在布局中有足够的额外空间的网页或博客中也可以起到很好的作用。 此CSS规则针对所有段落，但是您可以基于单个类或ID对此进行限制。

23.内部CSS3框阴影

#mydiv { 
    -moz-box-shadow: inset 2px 0 4px #000;
    -webkit-box-shadow: inset 2px 0 4px #000;
    box-shadow: inset 2px 0 4px #000;
}

box shadow属性为我们建立网站的方式提供了巨大的变化。 您可以在几乎任何元素上描绘框阴影，它们通常看起来都很棒。 这段代码将强制内部阴影，这很难设计，但是在正确的情况下，它看起来很原始。

24. CSS3外框阴影

#mydiv { 
    -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
    -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}

关于内部CSS3阴影，我还想展示一个外部阴影代码段。 请注意，语法中的第三个数字代表模糊距离，而第四个数字代表散布。 您可以从W3Schools了解有关这些值的更多信息。

25.三角列表项目符号

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
li:before { 
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}

信不信由你，实际上有可能仅在CSS3中生成三角形的子弹 。 这是一种非常酷的技术，在受人尊敬的浏览器中看起来确实很棒。 唯一的潜在问题是对后备方法的支持严重缺乏。

26.居中布局固定宽度

#page-wrap {
    width: 800px;
    margin: 0 auto;
}

我知道前面提到过如何设置水平定位。 我想通过此快速片段进行水平定位 ，非常适合在固定宽度的布局上使用。

27. CSS3列文本

#columns-3 {
    text-align: justify;
    -moz-column-count: 3;
    -moz-column-gap: 12px;
    -moz-column-rule: 1px solid #c4c8cc;
    -webkit-column-count: 3;
    -webkit-column-gap: 12px;
    -webkit-column-rule: 1px solid #c4c8cc;
}

CSS3列很容易在网站布局中看到，但是现实是我们如何根据列样式拆分文本。 使用此代码段将任意数量的列放置在您的段落中，其中文本将根据您的列号平均分配。

28. CSS固定页脚

#footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 30px;
    width: 100%;
    background: #444;
}
 
/* IE 6 */
* html #footer {
    position: absolute;
    top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

这实际上比听起来有用得多，但是在您的网站中添加固定页脚非常简单。 这些页脚将与用户一起滚动，并且可能包含有关您的网站的有用信息或唯一的联系方式。 理想情况下，只有在确实为用户界面增加价值的情况下才能实现此目的。

29. IE6的透明PNG修复

.bg {
    width:200px;
    height:100px;
    background: url(/folder/yourimage.png) no-repeat;
    _background:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}


/* 1px gif method */
img, .png {
    position: relative;
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
       this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
       this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}

在网站内部使用透明图像已成为一种非常普遍的做法。 这从gif图像开始，但已演变为透明的PNG。 不幸的是，较旧的Internet Explorer旧版本从来没有支持透明性。 添加此简短CSS代码段可以解决此问题。

30.跨浏览器的最小高度

#container {
    min-height: 550px;
    height: auto !important;
    height: 550px;
}

需要使用min-height开发人员了解所有有关黑幕支持的知识。 许多更新的浏览器都可以完美地解决此问题，但是Internet Explorer和旧版本的Firefox确实有麻烦。 这组代码应提供对任何相关错误的修复。

31. CSS3发光输入

input[type=text], textarea {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #ddd;
}
 
input[type=text]:focus, textarea:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid rgba(81, 203, 238, 1);
}

我真的很喜欢这个基本的自定义CSS3类，因为它会覆盖默认的浏览器行为。 Chrome和Safari的用户知道表格中令人讨厌的输入轮廓。 将这些属性添加到样式表中将为基本输入元素设置一个全新的设计。

32.基于文件类型的样式链接

/* external links */
a[href^="http://"] {
    padding-right: 13px;
    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: 18px;
    background: url('acrobat.png') no-repeat center right;
}

CSS有点晦涩，但是我喜欢创造力！ 您可以使用CSS选择器确定链接的文件类型，并将图标实现为背景图像。 这些可能包括各种协议（HTTP，FTP，IRC，mailto），或者仅仅是文件类型本身（mp3，avi，pdf）。

33.强制代码包装

pre {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

典型的pre标签用于布局中以显示大块代码。 这是预格式化的文本，就像在“记事本”或“文本编辑”中可以找到的一样，除了您经常会注意到长行会产生水平滚动条。 此CSS块将强制所有pre标签包装代码，而不是在容器外中断代码 。

34.在可点击项上强制使用光标

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
    cursor: pointer;
}

有许多默认的可单击HTML元素，它们并不总是显示手形指针图标。 使用这组CSS选择器，您可以将指针与.pointer类一起强制放在多个关键元素以及任何其他对象上。

35.网页顶盒阴影

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

除了一些令人愉悦的美学效果，开发人员可能没有找到其他用途。 但是我真的很喜欢这种效果，它绝对是独一无二的！ 只需添加针对您的body元素CSS代码， 即可显示从网页顶部逐渐消失的深色阴影 。

36. CSS3语音泡沫

.chat-bubble {
    background-color: #ededed;
    border: 2px solid #666;
    font-size: 35px;
    line-height: 1.3em;
    margin: 10px auto;
    padding: 10px;
    position: relative;
    text-align: center;
    width: 300px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
    font-family: 'Bangers', arial, serif; 
}
.chat-bubble-arrow-border {
    border-color: #666 transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
    height: 0;
    width: 0;
    position: absolute;
    bottom: -42px;
    left: 30px;
}
.chat-bubble-arrow {
    border-color: #ededed transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
    height: 0;
    width: 0;
    position: absolute;
    bottom: -39px;
    left: 30px;
}

在讨论气泡时，会想到许多用户界面目的。 这些在讨论评论中，创建公告栏或显示引用的文本时会很方便。 只需将以下类添加到样式表中，您就可以从此CSS3代码片段中找到相关HTML代码。

37.默认的H1-H5标头

h1,h2,h3,h4,h5{
	color: #005a9c;
}
h1{
	font-size: 2.6em;
	line-height: 2.45em;
}
h2{
	font-size: 2.1em;
	line-height: 1.9em;
}
h3{
	font-size: 1.8em;
	line-height: 1.65em;
}
h4{
	font-size: 1.65em;
	line-height: 1.4em;
}
h5{
	font-size: 1.4em;
	line-height: 1.25em;
}

我提供了许多常见的语法，包括浏览器CSS重置和一些HTML元素重置。 该模板包括H1-H5范围内所有主要标题元素的默认样式 。 您可能还考虑添加H6，但我从未见过使用所有六个嵌套标头的网站。

38.纯CSS背景噪声

body {
    background-image: url(data:image/png;base64,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);
    background-color: #0094d0;
}

尽管他们通常使用具有Alpha透明度的重复平铺图像，但设计师已经看到这种效果在网站上已经存在很长时间了。 但是，我们可以将Base64代码嵌入CSS中以生成全新的图像。 就像上面的代码段那样，它会在人体背景上方生成一个小的噪波纹理 ，或者您可以在NoiseTextureGenerator上创建自定义的噪波背景。

39.连续列表排序

ol.chapters {
    list-style: none;
    margin-left: 0;
}

ol.chapters > li:before {
    content: counter(chapter) ". ";
    counter-increment: chapter;
    font-weight: bold;
    float: left;
    width: 40px;
}

ol.chapters li {
    clear: left;
}

ol.start {
	counter-reset: chapter;
}

ol.continue {
	counter-reset: chapter 11;
}

我觉得这可能不是一个非常流行的代码段，但它确实在开发人员中占有一席之地。 在某些情况下，您需要继续列出项目但又分为两个单独的UL元素 。 查阅上面的代码，获得仅CSS的出色修复。

40. CSS工具提示悬停

a { 
    border-bottom:1px solid #bbb;
    color:#666;
    display:inline-block;
    position:relative;
    text-decoration:none;
}
a:hover,
a:focus {
    color:#36c;
}
a:active {
    top:1px; 
}
 
/* Tooltip styling */
a[data-tooltip]:after {
    border-top: 8px solid #222;
    border-top: 8px solid hsla(0,0%,0%,.85);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: "";
    display: none;
    height: 0;
    width: 0;
    left: 25%;
    position: absolute;
}
a[data-tooltip]:before {
    background: #222;
    background: hsla(0,0%,0%,.85);
    color: #f6f6f6;
    content: attr(data-tooltip);
    display: none;
    font-family: sans-serif;
    font-size: 14px;
    height: 32px;
    left: 0;
    line-height: 32px;
    padding: 0 15px;
    position: absolute;
    text-shadow: 0 1px 1px hsla(0,0%,0%,1);
    white-space: nowrap;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
a[data-tooltip]:hover:after {
    display: block;
    top: -9px;
}
a[data-tooltip]:hover:before {
    display: block;
    top: -41px;
}
a[data-tooltip]:active:after {
    top: -10px;
}
a[data-tooltip]:active:before {
    top: -42px;
}

您可以在网站上实现许多基于jQuery的开源工具提示。 但是基于CSS的工具提示非常少见，这是我最喜欢的摘录之一。 只需将其复制到样式表中，然后使用新HTML5数据属性，即可通过 data-tooltip 设置工具提示文本 。

41.深灰色圆形按钮

.graybtn {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
    background-color:#ffffff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}
.graybtn:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
    background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
    background-color:#d1d1d1;
}
.graybtn:active {
    position:relative;
    top:1px;
}

作为对Web开发人员有用的模板，我包括了这个简单CSS3按钮类。 我正在使用适合于颜色的类名称.graybtn ，但这并不是说您不能更改样式以匹配您自己的网站。 检查色轮内的十六进制值，以匹配不同颜色范围内的相似色调。

42.在打印的网页中显示URL

@media print   {  
  a:after {  
    content: " [" attr(href) "] ";  
  }  
}

如果您经营一个新闻网站或包含大量印刷材料的资源，这可能是您所能找到的最伟大的摘要之一。 网页中的锚链接将正常显示和显示。 但是，在打印时，您的用户将能够看到链接文本以及完整的超链接URL。 当访问者需要访问您链接的网页但看不到典型打印文档中的URL时，这非常方便。

43.禁用移动Webkit亮点

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

根据您在移动设备上的使用经验，此代码片段可能不会很有用。 但是，当在Safari和其他基于Webkit的引擎中访问移动网站时，您会发现在点击元素时会出现一个灰色框。 只要将这些样式添加到您的网站中，它就会删除所有本机移动浏览器的突出显示。

44. CSS3圆点图案

body {
    background: radial-gradient(circle, white 10%, transparent 10%),
    radial-gradient(circle, white 10%, black 10%) 50px 50px;
    background-size: 100px 100px;
}

最初在网上找到此代码段时，我有点后悔。 但这是一种非常有趣的方法，可以动态生成仅CSS3的BG模式。 我已将body元素作为默认目标，但是您可以将其应用于网页中的任何容器div。

45. CSS3格仔图案

body {
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 100px 100px;
    background-position: 0 0, 50px 50px;
}

类似于上面的圆点，我们还可以创建一个完整的无缝棋盘图案。 此方法需要更多的语法才能起作用，但在所有CSS3支持的浏览器中看起来都完美无缺。 您也可以将颜色值从白色和黑色更改为与您自己的网站配色方案相匹配的颜色。

46. Github叉子丝带

.ribbon {
    background-color: #a00;
    overflow: hidden;
    /* top left corner */
    position: absolute;
    left: -3em;
    top: 2.5em;
    /* 45 deg ccw rotation */
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    /* shadow */
    -moz-box-shadow: 0 0 1em #888;
    -webkit-box-shadow: 0 0 1em #888;
}
.ribbon a {
    border: 1px solid #faa;
    color: #fff;
    display: block;
    font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif;
    margin: 0.05em 0 0.075em 0;
    padding: 0.5em 3.5em;
    text-align: center;
    text-decoration: none;
    /* shadow */
    text-shadow: 0 0 0.5em #444;
}

作为Github上的大用户，这个基本代码片段令我震惊。 您可以使用CSS3转换属性在网页中快速生成Github角状功能区。 这对于在Github上具有受欢迎的追随者的开源插件或代码包来说是完美的。 如果您有一个活跃的Github存储库，也非常适合托管HTML / CSS / JS演示。

47.压缩CSS字体属性

p {
  font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;
}

Web开发人员不总是使用此压缩字体属性的主要原因是因为并非每个设置都需要。 但是，了解此速记可能会节省样式表中的大量时间和空间。 请随时使用此代码段，以防万一您要缩短字体样式的格式。

48.纸页卷曲效果

ul.box {
    position: relative;
    z-index: 1; /* prevent shadows falling behind containers with backgrounds */
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0; 
}

ul.box li {
    position: relative;
    float: left;
    width: 250px;
    height: 150px;
    padding: 0;
    border: 1px solid #efefef;
    margin: 0 30px 30px 0;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
}

ul.box li:before,
ul.box li:after {
    content: '';
    z-index: -1;
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 70%;
    max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
    max-height: 100px;
    height: 55%;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    -ms-transform: skew(-15deg) rotate(-6deg);
    -o-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg); 
}

ul.box li:after {
    left: auto;
    right: 10px;
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    -ms-transform: skew(15deg) rotate(6deg);
    -o-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg); 
}

此页面卷曲效果几乎可以应用于保存网站内容的任何容器。 我立刻想到了图像媒体和引用文字，但实际上这可能是任何东西。 查看代码段的实时演示页面 ，以更好地了解这些页面卷曲的功能。

49.发光的锚链接

a {
	color: #00e;
}
a:visited {
	color: #551a8b;
}
a:hover {
	color: #06e;
}
a:focus {
	outline: thin dotted;
}
a:hover, a:active {
	outline: 0;
}
a, a:visited, a:active {
	text-decoration: none;
	color: #fff;
	-webkit-transition: all .3s ease-in-out;
}
a:hover, .glow {
	color: #ff0;
	text-shadow: 0 0 10px #ff0;
}

CSS3文本阴影提供了一种样式独特的网页排版样式。 更具体地说，此代码段是自定义创意链接（具有发光的悬停效果 ）的绝佳资源。 我怀疑这种效果能否在大多数网站上完美实现，但是如果您有耐心使其外观漂亮，您一定会给访问者留下深刻印象。

50.特色CSS3显示横幅

.featureBanner {
    position: relative;
    margin: 20px
}
.featureBanner:before {
    content: "Featured";
    position: absolute;
    top: 5px;
    left: -8px;
    padding-right: 10px;
    color: #232323;
    font-weight: bold;
    height: 0px;
    border: 15px solid #ffa200;
    border-right-color: transparent;
    line-height: 0px;
    box-shadow: -0px 5px 5px -5px #000;
    z-index: 1;
}

.featureBanner:after {
    content: "";
    position: absolute;
    top: 35px;
    left: -8px;
    border: 4px solid #89540c;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

通常，您需要设置背景图片以在其他浏览器中复制此效果。 但是在CSS3支持的引擎中，我们可以生成动态横幅广告，这些横幅广告悬挂在您的内容包装器的边缘，而没有图像 ！ 这些看起来不错，可以附加在电子商务产品，图像缩略图，视频预览或博客文章上，仅列出一些想法。

更多

以下是您可能对通行证感兴趣的更多文章：

• CSS回归基础：术语解释
• 20个适合初学者CSS技巧
• 11位顶级CSS编辑器–已审核
• 如何使CSS3代码标记保持苗条
• 查看CSS样式优先级
• CSS3伪类指南

最后的想法

网站的前端样式语言已成长为万维网上的多数控制者。 W3C发布了HTML5和CSS3的公共规范，将其视为构建网站的默认语言。 无论是经验丰富的开发人员还是新开发人员，都应该能够喜欢这个系列，并希望找到一些有用的代码。

所有读者都应该能够复制并保存其中的任何摘录，而无需注明出处。 根据该出版物，大多数今天发布CSS代码都在开源许可证下持有，并免费提供。 我并没有声称会提供您可能想要的所有可能CSS代码，但是我希望我们能做到这些！ 如果您对此系列有任何想法或疑问，请在下面的评论讨论区中与我们分享。

• ＃01 （27-05-2013） –某些CSS代码错误将“底部”显示为“底部”。 这是由WordPress插件引起的。 我们已经（暂时）对其进行了修复，并将研究其他语法突出显示解决方案。 感谢报告错误的读者！

翻译自: https://www.hongkiat.com/blog/css-snippets-for-designers/