每位设计师都应该拥有的50个CSS代码片段(下)

26. 固定宽度的居中布局

1 #page-wrap {
2     width: 800px;
3     margin: 0 auto;
4 }

Code Source

我知道之前已经提到过怎样设置水平居中.在这里的代码是完美实现固定宽度的水平居中 .

27. CSS3 文本分列

1 #columns-3 {
2     text-align: justify;
3     -moz-column-count: 3;
4     -moz-column-gap: 12px;
5     -moz-column-rule: 1px solid #c4c8cc;
6     -webkit-column-count: 3;
7     -webkit-column-gap: 12px;
8     -webkit-column-rule: 1px solid #c4c8cc;
9 }

Code Source

CSS3分列在网站上看起来会非常不错, 现实的问题是我们如何把基于文本的内容分列显示. 通过上面的代码,为你的文本段落设置其中的列的数值,文本内容将会按你设定的值分成宽度相同的列.

28. CSS 固定的页脚

 1 #footer {
 2     position: fixed;
 3     left: 0px;
 4     bottom: 0px;
 5     height: 30px;
 6     width: 100%;
 7     background: #444;
 8 }
 9  
10 /* IE 6 */
11 * html #footer {
12     position: absolute;
13     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');
14 }

Code Source

这个实际用起来比听起来要有用的多, 为你的网站添加一个固定页脚是很简单的. 这些页脚不管页面如何滚动都是固定的,你可以包含一些帮助信息或是联系方式等等. 完美的为用户界面增加价值.

29. PNG 图片在 IE6下的透明度

 1 .bg {
 2     width:200px;
 3     height:100px;
 4     background: url(/folder/yourimage.png) no-repeat;
 5     _background:none;
 6     _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
 7 }
 8 
 9 
10 /* 1px gif method */
11 img, .png {
12     position: relative;
13     behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
14        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
15        this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
16        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
17        this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
18 }

Code Source

使用透明图片已经变成网站的最基本的实践. 开始的时候是gif图,现在都使用PNG透明图. 不幸的是一些IE老版的浏览器不支持这个透明度属性. 添加上上面的代码就能搞定这个问题.

30. 跨浏览器的最小高度

1 #container {
2     min-height: 550px;
3     height: auto !important;
4     height: 550px;
5 }

不得不使用min-height的开发者知道都是那些浏览器支持这个属性. 很多新的游览器都支持这个属性, 然而Internet Explorer 和 老版本的 Firefox对这个支持有问题. 上面的代码能解决这个Bug.

31. CSS3发光输入框

 

 1 input[type=text], textarea {
 2     -webkit-transition: all 0.30s ease-in-out;
 3     -moz-transition: all 0.30s ease-in-out;
 4     -ms-transition: all 0.30s ease-in-out;
 5     -o-transition: all 0.30s ease-in-out;
 6     outline: none;
 7     padding: 3px 0px 3px 3px;
 8     margin: 5px 1px 3px 0px;
 9     border: 1px solid #ddd;
10 }
11  
12 input[type=text]:focus, textarea:focus {
13     box-shadow: 0 0 5px rgba(81, 203, 238, 1);
14     padding: 3px 0px 3px 3px;
15     margin: 5px 1px 3px 0px;
16     border: 1px solid rgba(81, 203, 238, 1);
17 }

 Code Source

我真的喜欢这个基础的自定义CSS3类，这是因为它覆盖默认浏览器行为的方式。我所知道的Chrome & Safar用户对表单里的输入框轮廓很反感。将这些属性加到你的样式表，会给基本的输入框元素设置一个全新的设计。

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

 1 /* external links */
 2 a[href^="http://"] {
 3     padding-right: 13px;
 4     background: url('external.gif') no-repeat center right;
 5 }
 6  
 7 /* emails */
 8 a[href^="mailto:"] {
 9     padding-right: 20px;
10     background: url('email.png') no-repeat center right;
11 }
12  
13 /* pdfs */
14 a[href$=".pdf"] {
15     padding-right: 18px;
16     background: url('acrobat.png') no-repeat center right;
17 }

Code Source

相当晦涩的一段CSS代码，但我喜欢它的创造力！你可以决定使用CSS选择器的链接的文件类型，并以图标作为背景图片。这些可以包含不同的协议（HTTP, FTP, IRC, mailto）或简单的只是它们自己的文件类型（mp3, avi, pdf）。

33. 强制代码包装

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

Code Source

典型的pre标签是在布局中用来显示大块代码的。这是预编排的文本，就像你在Notepad或Textedit发现的那样，除非你经常看的是引起水平滚动条的一长段文字。这段CSS代码将强制所有pre标签为封装代码格式，不会跑到容器外面去。

34.强制可点击条目上显示手型光标

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

Code Source

有许多默认的可点击HTML元素并不总是显示手型的指针图标。使用这个CSS选择器设置，你可以对许多关键的元素以及任何使用 .pointer类的其它对象，强制指定指针的形状。

35. 网页顶端阴影

 

 1 body:before {
 2     content: "";
 3     position: fixed;
 4     top: -10px;
 5     left: 0;
 6     width: 100%;
 7     height: 10px;
 8 
 9     -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
10     -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
11     box-shadow: 0px 0px 10px rgba(0,0,0,.8);
12     z-index: 100;
13 }

 Code Source

除了一些令人愉悦的美感，开发者可能找不到它会有多大用处。但我确实享受这个效果，而且显然它是独一无二的！只需将这个CSS 代码附加到你的body元素，就能从你的页面顶部往下显示一个渐渐消退的阴影。

36. CSS3 对话气泡

 1 .chat-bubble {
 2     background-color: #ededed;
 3     border: 2px solid #666;
 4     font-size: 35px;
 5     line-height: 1.3em;
 6     margin: 10px auto;
 7     padding: 10px;
 8     position: relative;
 9     text-align: center;
10     width: 300px;
11     -moz-border-radius: 20px;
12     -webkit-border-radius: 20px;
13     -moz-box-shadow: 0 0 5px #888;
14     -webkit-box-shadow: 0 0 5px #888;
15     font-family: 'Bangers', arial, serif; 
16 }
17 .chat-bubble-arrow-border {
18     border-color: #666 transparent transparent transparent;
19     border-style: solid;
20     border-width: 20px;
21     height: 0;
22     width: 0;
23     position: absolute;
24     bottom: -42px;
25     left: 30px;
26 }
27 .chat-bubble-arrow {
28     border-color: #ededed transparent transparent transparent;
29     border-style: solid;
30     border-width: 20px;
31     height: 0;
32     width: 0;
33     position: absolute;
34     bottom: -39px;
35     left: 30px;
36 }

Code Source

每当讨论到对话气泡时，无数的用户界面用途就会浮现出来。这些可以用于处理讨论评述，或者创建公告版，或者显示引用文本。只需将下面的类加入你的样式表，你也可以从这贴 CSS3代码片段 找到相关的HTML代码。

37. 默认的 H1-H5 题头

 

 1 h1,h2,h3,h4,h5{
 2         color: #005a9c;
 3 }
 4 h1{
 5         font-size: 2.6em;
 6         line-height: 2.45em;
 7 }
 8 h2{
 9         font-size: 2.1em;
10         line-height: 1.9em;
11 }
12 h3{
13         font-size: 1.8em;
14         line-height: 1.65em;
15 }
16 h4{
17         font-size: 1.65em;
18         line-height: 1.4em;
19 }
20 h5{
21         font-size: 1.4em;
22         line-height: 1.25em;
23 }

 Code Source

我已经提供了许多常见的语法，包括浏览器CSS重置以及一些HTML元素重置。这个模板包含了所有从H1-H5的主要的题头元素的默认样式。你也许会想增加H6，但我却从未见过有网站使用所有六个嵌套的题头。

38.纯CSS背景噪声

1 body {
2     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
3     background-color: #0094d0;
4 }

Code Source

设计师已经看到网站中加入这个效果有很长时间了，虽然他们通常是使用具有透明度的重复的瓷砖图像。但是我们可以给CSS嵌入Base64编码来生成全新的图像。在上面代码片段的例子中，是在body背景上产生了一个小小的噪声纹理，你也可以在噪声纹理发生器创建一个自定义的噪声背景。

39. 继续列表排序

 

 1 ol.chapters {
 2     list-style: none;
 3     margin-left: 0;
 4 }
 5 
 6 ol.chapters > li:before {
 7     content: counter(chapter) ". ";
 8     counter-increment: chapter;
 9     font-weight: bold;
10     float: left;
11     width: 40px;
12 }
13 
14 ol.chapters li {
15     clear: left;
16 }
17 
18 ol.start {
19         counter-reset: chapter;
20 }
21 
22 ol.continue {
23         counter-reset: chapter 11;
24 }

 Code Source

我觉得这也许不是特别流行的代码段，但它在开发者中确实具有市场。可能有一种情况，你需要继续一个列表项目，而它却被分割为两个独立的 UL元素。查看上面的代码来找寻一个很好的纯CSS修复方案。

40. CSS悬停工具提示

 1 a { 
 2     border-bottom:1px solid #bbb;
 3     color:#666;
 4     display:inline-block;
 5     position:relative;
 6     text-decoration:none;
 7 }
 8 a:hover,
 9 a:focus {
10     color:#36c;
11 }
12 a:active {
13     top:1px; 
14 }
15  
16 /* Tooltip styling */
17 a[data-tooltip]:after {
18     border-top: 8px solid #222;
19     border-top: 8px solid hsla(0,0%,0%,.85);
20     border-left: 8px solid transparent;
21     border-right: 8px solid transparent;
22     content: "";
23     display: none;
24     height: 0;
25     width: 0;
26     left: 25%;
27     position: absolute;
28 }
29 a[data-tooltip]:before {
30     background: #222;
31     background: hsla(0,0%,0%,.85);
32     color: #f6f6f6;
33     content: attr(data-tooltip);
34     display: none;
35     font-family: sans-serif;
36     font-size: 14px;
37     height: 32px;
38     left: 0;
39     line-height: 32px;
40     padding: 0 15px;
41     position: absolute;
42     text-shadow: 0 1px 1px hsla(0,0%,0%,1);
43     white-space: nowrap;
44     -webkit-border-radius: 5px;
45     -moz-border-radius: 5px;
46     -o-border-radius: 5px;
47     border-radius: 5px;
48 }
49 a[data-tooltip]:hover:after {
50     display: block;
51     top: -9px;
52 }
53 a[data-tooltip]:hover:before {
54     display: block;
55     top: -41px;
56 }
57 a[data-tooltip]:active:after {
58     top: -10px;
59 }
60 a[data-tooltip]:active:before {
61     top: -42px;
62 }

 Code Source

有许多开源的基于jQuery的工具提示，你可以在你的网站上实施。但基于CSS的工具提示非常罕见，这个是我非常喜欢的代码段之一。只要复制到你的样式表，并使用新的HTML5数据属性，你就能通过data-tooltip设置工具提示文本。

41. 暗灰色的圆形按钮

 1 .graybtn {
 2     -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
 3     -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
 4     box-shadow:inset 0px 1px 0px 0px #ffffff;
 5     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
 6     background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
 7     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
 8     background-color:#ffffff;
 9     -moz-border-radius:6px;
10     -webkit-border-radius:6px;
11     border-radius:6px;
12     border:1px solid #dcdcdc;
13     display:inline-block;
14     color:#777777;
15     font-family:arial;
16     font-size:15px;
17     font-weight:bold;
18     padding:6px 24px;
19     text-decoration:none;
20     text-shadow:1px 1px 0px #ffffff;
21 }
22 .graybtn:hover {
23     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
24     background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
25     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
26     background-color:#d1d1d1;
27 }
28 .graybtn:active {
29     position:relative;
30     top:1px;
31 }

Code Source

作为又一个对web开发者有帮助的模板，我列入了这个简单的CSS3按钮类。我使用了 .graybtn的类名，显示了相应的颜色，但这不是说你不能改变样式适应你自己的网站。在色轮中查验十六进制数值，以便从不同的颜色范围找到匹配的近似色调。

42.在一个打印页面显示URLS

1 @media print   {  
2   a:after {  
3     content: " [" attr(href) "] ";  
4   }  
5 }

Code Source

如果你运行一个新闻网站或者管理有许多打印素材的资源，这可能是你能找到的最好的代码段之一了。页面中的锚链接将看上去与普通样子显示一致。但当打印时，你的用户将会看到链接文本具有超链接的URL。这对需要访问你链接的网页，但在特定的打印文档中却看不到URL的人来说，非常方便。

43. 禁用移动Webkit高亮

 

1 body {
2     -webkit-touch-callout: none;
3     -webkit-user-select: none;
4     -khtml-user-select: none;
5     -moz-user-select: none;
6     -ms-user-select: none;
7     user-select: none;
8 }

根据你从事移动方面的经验，这段代码也许不是非常有用。但当用 Safari或其它基于Webkit引擎的浏览器访问移动网站时，你会注意到你一点击它们就会有一个围绕着元素的灰色盒子。只要增加这些样式到你的网站，就可以移除所有原生的移动浏览器的高亮效果。

44. CSS3 带圆点的图案

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

 Code Source

最初在线发现这个代码段的时候，我有一点吃惊。但这真的是即兴创建纯CSS3的BG模式的有趣方法。我设置body元素为默认目标，但你可以将它引用到页面中的任何div容器。

45. CSS3 方格图案

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

Code Source

与上面圆点花纹类似，我们也可以创建一个天衣无缝的方格图案。这个方法运行起来需要更多的一点语法，但在所有支持CSS3的浏览器中它看上去完美无缺。同样你也可以改变黑与白的颜色数值，以便匹配你自己网站的配色方案。

46. Github Fork 缎带

 1 .ribbon {
 2     background-color: #a00;
 3     overflow: hidden;
 4     /* top left corner */
 5     position: absolute;
 6     left: -3em;
 7     top: 2.5em;
 8     /* 45 deg ccw rotation */
 9     -moz-transform: rotate(-45deg);
10     -webkit-transform: rotate(-45deg);
11     /* shadow */
12     -moz-box-shadow: 0 0 1em #888;
13     -webkit-box-shadow: 0 0 1em #888;
14 }
15 .ribbon a {
16     border: 1px solid #faa;
17     color: #fff;
18     display: block;
19     font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif;
20     margin: 0.05em 0 0.075em 0;
21     padding: 0.5em 3.5em;
22     text-align: center;
23     text-decoration: none;
24     /* shadow */
25     text-shadow: 0 0 0.5em #444;
26 }

Code Source

作为一个 Github大用户，这段基础代码令我印象深刻。你可以使用CSS3的转换属性，快速的创建Github 角落缎带。对开源插件或Github上有众多追随的代码包来说这非常完美。如果你有一个活跃的Github套件库的话，对托管的HTML/CSS/JS演示来说也很棒。

47. 压缩的 CSS 字体属性

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

Code Source

web开发者不经常使用这个压缩的字体属性的主要原因，在于不是所有设置都是需要的。但对这个速记方法有所理解可以使你在样式表上节省许多时间与空间。在你想要缩短你的字体样式格式的时候，使用这个代码片段。

48. 页面卷曲效果

 1 ul.box {
 2     position: relative;
 3     z-index: 1; /* prevent shadows falling behind containers with backgrounds */
 4     overflow: hidden;
 5     list-style: none;
 6     margin: 0;
 7     padding: 0; 
 8 }
 9 
10 ul.box li {
11     position: relative;
12     float: left;
13     width: 250px;
14     height: 150px;
15     padding: 0;
16     border: 1px solid #efefef;
17     margin: 0 30px 30px 0;
18     background: #fff;
19     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
20     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
21     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
22 }
23 
24 ul.box li:before,
25 ul.box li:after {
26     content: '';
27     z-index: -1;
28     position: absolute;
29     left: 10px;
30     bottom: 10px;
31     width: 70%;
32     max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
33     max-height: 100px;
34     height: 55%;
35     -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
36     -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
37     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
38     -webkit-transform: skew(-15deg) rotate(-6deg);
39     -moz-transform: skew(-15deg) rotate(-6deg);
40     -ms-transform: skew(-15deg) rotate(-6deg);
41     -o-transform: skew(-15deg) rotate(-6deg);
42     transform: skew(-15deg) rotate(-6deg); 
43 }
44 
45 ul.box li:after {
46     left: auto;
47     right: 10px;
48     -webkit-transform: skew(15deg) rotate(6deg);
49     -moz-transform: skew(15deg) rotate(6deg);
50     -ms-transform: skew(15deg) rotate(6deg);
51     -o-transform: skew(15deg) rotate(6deg);
52     transform: skew(15deg) rotate(6deg); 
53 }

Code Source

这个页面卷曲效果几乎可以应用于任何包含网站内容的容器。我立即会想到图像媒体和引用文本，但这个才能真正做到任何对象。查看这段代码的在线演示页 ，以便对这些页面如何实现卷曲功能有更好的理解。

49.发光锚链接

 1 a {
 2         color: #00e;
 3 }
 4 a:visited {
 5         color: #551a8b;
 6 }
 7 a:hover {
 8         color: #06e;
 9 }
10 a:focus {
11         outline: thin dotted;
12 }
13 a:hover, a:active {
14         outline: 0;
15 }
16 a, a:visited, a:active {
17         text-decoration: none;
18         color: #fff;
19         -webkit-transition: all .3s ease-in-out;
20 }
21 a:hover, .glow {
22         color: #ff0;
23         text-shadow: 0 0 10px #ff0;
24 }

源码

CSS3 的文本阴影提供了一个独特的网页排版制定方法。更确切的说，这个片段是非常好的制定富有创意的鼠标悬停发光特效的资源。虽然我并不认为这个特效可以毫无失调的融入大多数网站，但如果你有耐心调整它，你一定能够打动访问者。

50. 饶有特色的 CSS3 展示横条

 1 .featureBanner {
 2     position: relative;
 3     margin: 20px
 4 }
 5 .featureBanner:before {
 6     content: "Featured";
 7     position: absolute;
 8     top: 5px;
 9     left: -8px;
10     padding-right: 10px;
11     color: #232323;
12     font-weight: bold;
13     height: 0px;
14     border: 15px solid #ffa200;
15     border-right-color: transparent;
16     line-height: 0px;
17     box-shadow: -0px 5px 5px -5px #000;
18     z-index: 1;
19 }
20 
21 .featureBanner:after {
22     content: "";
23     position: absolute;
24     top: 35px;
25     left: -8px;
26     border: 4px solid #89540c;
27     border-left-color: transparent;
28     border-bottom-color: transparent;
29 }

源码

通常，要在其它浏览器复制这个效果，你需要设置一张背景图片，但在支持 CSS3 的浏览器终，我们可以配置 悬挂在文本封装边缘的动态横条，无需图片！这似乎能够很好的配合电子商务产品、图像缩略图、视频预览、或博客文章，用以列出了一些想法。

 

更多

 

这里有更多过去发表的你可能感兴趣的文章：

 

• CSS回到基础:术语解释
• 20个对初学者有用的CSS技巧
• 11大 CSS编辑器 – 回顾
• 如何保持你的CSS3代码标记苗条
• 回顾CSS样式优先级
• CSS3伪类指南

 

结语

 

网站的前端样式语言已经成长为互联网上的主要控制力量。 W3C 已经出版了HTML5和CSS3规范，相信它们应该是创建网站的默认语言。有经验的和新的开发者都应该喜爱这个集合，并有愿望找到一些有用的代码。

 

所有读者都应该能在没有需求的条件下复制和保存这些代码段。今天发布的大多数CSS代码都处于开源许可之下，免费提供，基于出版的。我不承诺提供每个你需要的CSS代码，但我希望我们已经非常接近！如果你有关于这个系列的想法或问题，在下面的评论讨论区随时与我们分享。

 

转自：C开源中国社区

转载于:https://www.cnblogs.com/bokebi520/p/4198253.html