Web开发者的福利 30段超实用CSS代码

来源:互联网 发布:什么叫做关系型数据库 编辑:程序博客网 时间:2024/03/29 22:28

原文地址:http://blog.csdn.net/lzb2512/article/details/8997963

 

Web开发者的福利30段超实用CSS代码。上周,发表了一篇《Web开发者不容错过的20段CSS代码》,大家一致觉得很实用。该文是笔者对后30个的翻译,希望对大家有帮助。

  1.花式连字符(&)

  这个类应该在span元素里使用,并且里面包括&字符。它使用经典的serif字体和斜体来增强&符号。

[css] view plaincopyprint?
  1. .amp {  
  2.     font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;  
  3.     font-styleitalic;  
  4.     font-weightnormal;  
  5. }  


 

2.段落首字符下沉

  通常,这种效果会出现在印刷媒体上,如报纸或书籍。同样,如果网页布局合理,它也可以使用在Web页面上,它仅针对段落使用,但你也可以与单个元素绑定。

[css] view plaincopyprint?
  1. p:first-letter{  
  2.     displayblock;  
  3.     margin5px 0 0 5px;  
  4.     floatleft;  
  5.     color#ff3366;  
  6.     font-size5.4em;  
  7.     font-family: Georgia, Times New Roman, serif;  
  8. }  


 

3.内层CSS3盒阴影

  盒阴影(box shadow)属性几乎可以运用在任何元素上,它们看起来都非常好看。下面这段代码主要聚焦内层阴影的设计。

[css] view plaincopyprint?
  1. #mydiv {   
  2.     -moz-box-shadow: inset 2px 0 4px #000;  
  3.     -webkit-box-shadow: inset 2px 0 4px #000;  
  4.     box-shadow: inset 2px 0 4px #000;  
  5. }  


 

4.外层CSS3盒阴影

  下面介绍一段外层阴影代码设计,注意,代码里的第三个参数表示模糊距离(blur distance),而第四个参数表示铺开的(spread)距离。关于这些值的设计,你可以前往 W3Schools学习。

[css] view plaincopyprint?
  1. #mydiv {   
  2.     -webkit-box-shadow: 0 2px 2px -2px rgba(0000.52);  
  3.     -moz-box-shadow: 0 2px 2px -2px rgba(0000.52);  
  4.     box-shadow: 0 2px 2px -2px rgba(0000.52);  
  5. }  


 

5.三角形列表符号

  该符号只能在CSS3里生成,在主流浏览器中,这是一项非常酷的技术。而其唯一的潜在问题是缺乏对后退方法的支持。 

[css] view plaincopyprint?
  1. ul {  
  2.     margin0.75em 0;  
  3.     padding0 1em;  
  4.     list-stylenone;  
  5. }  
  6. li:before {   
  7.     content"";  
  8.     border-colortransparent #111;  
  9.     border-stylesolid;  
  10.     border-width0.35em 0 0.35em 0.45em;  
  11.     displayblock;  
  12.     height0;  
  13.     width0;  
  14.     left: -1em;  
  15.     top: 0.9em;  
  16.     positionrelative;  
  17. }  


6.居中对齐并设置固定宽度

[css] view plaincopyprint?
  1. #page-wrap {  
  2.     width800px;  
  3.     margin0 auto;  
  4. }  


 7.CSS3列文本

[css] view plaincopyprint?
  1. #columns-3 {  
  2.     text-alignjustify;  
  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. }  


 

8.固定页脚

  在网页里添加固定的页脚其实非常简单,并且也很实用。有些网站的页脚设计得很漂亮,可以给网站呈现出一个完美的结尾。

[css] view plaincopyprint?
  1. #footer {  
  2.     positionfixed;  
  3.     left: 0px;  
  4.     bottom: 0px;  
  5.     height30px;  
  6.     width100%;  
  7.     background#444;  
  8. }  
  9. /* IE 6 */  
  10. * html #footer {  
  11.     positionabsolute;  
  12.     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');  
  13. }  


 

9.IE 6下修复PNG格式的透明度

  在网站里使用透明的图像已成为一种很普遍的做法,其始于.gif图片格式,但现在也涉及到.png图片格式。而一些老版本的IE不支持透明度,下面这段代码会很好地解决这一问题。

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


 

 10.跨浏览器设置最小高度

  有时开发者需要对HTML元素设置最小高度,然而,这个效果却无法兼容IE和老版本的Firefox,下面这段代码可以修复这个问题。

[css] view plaincopyprint?
  1. #container {  
  2.     min-height550px;  
  3.     heightauto !important;  
  4.     height550px;  
  5. }  


 

11. CSS3发光输入框

  下面的这段代码重写了浏览器的默认行为,可以让Chrome和Safari浏览器下普通的表单输入框产生发光效果。

[css] view plaincopyprint?
  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.     outlinenone;  
  7.     padding3px 0px 3px 3px;  
  8.     margin5px 1px 3px 0px;  
  9.     border1px solid #ddd;  
  10. }  
  11. input[type=text]:focus, textarea:focus {  
  12.     box-shadow: 0 0 5px rgba(812032381);  
  13.     padding3px 0px 3px 3px;  
  14.     margin5px 1px 3px 0px;  
  15.     border1px solid rgba(812032381);  
  16. }  


 

12.基于文件类型来创建链接样式

  下面这段代码通过使用CSS选择器和图像图标来实现各种类型的链接样式,可能会用到各种协议(HTTP、FTP、IRC,mailto),或者是文件本身的类型(mp3、avi、pdf)。

[css] view plaincopyprint?
  1. /* external links */  
  2. a[href^="http://"] {  
  3.     padding-right13px;  
  4.     backgroundurl('external.gif'no-repeat center right;  
  5. }   
  6. /* emails */  
  7. a[href^="mailto:"] {  
  8.     padding-right20px;  
  9.     backgroundurl('email.png'no-repeat center right;  
  10. }  
  11. /* pdfs */  
  12. a[href$=".pdf"] {  
  13.     padding-right18px;  
  14.     backgroundurl('acrobat.png'no-repeat center right;  
  15. }  


 

13.pre标签封装代码

  pre标签常用来对代码进行布局,可以解决因为行太多带来的滚动条问题。下面这段代码就使用pre来封装代码,让内容直接显示在页面中。

[css] view plaincopyprint?
  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. }  


 

14.鼠标指向时变成手型

  网页中有许多item在点击时,鼠标不会变成小手的形状。这套CSS选择器会强迫鼠标越过一些关键元素和其他对象一起来使用.pointer这个类。

[css] view plaincopyprint?
  1. a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {  
  2.     cursorpointer;  
  3. }  


 

15.页面顶部阴影

  简单地把下面这段代码拷贝到页面里,它会在body元素之前产生黑色的,渐渐变淡的阴影。这种效果通常用来给一个文本框或网页元素加阴影。

[css] view plaincopyprint?
  1. body:before {  
  2.     content"";  
  3.     positionfixed;  
  4.     top: -10px;  
  5.     left: 0;  
  6.     width100%;  
  7.     height10px;  
  8.     -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
  9.     -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
  10.     box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
  11.     z-index100;  
  12. }  


 

16.气泡引用效果

  这种效果常出现在论坛、创建公告牌或者是文本引用上。你只需把下面这段代码拷贝到样式表文件即可。这里(需翻墙)提供了许多关于语音泡泡的代码片段和使用技巧,欢迎去围观。

[css] view plaincopyprint?
  1. .chat-bubble {  
  2.     background-color#ededed;  
  3.     border2px solid #666;  
  4.     font-size35px;  
  5.     line-height1.3em;  
  6.     margin10px auto;  
  7.     padding10px;  
  8.     positionrelative;  
  9.     text-aligncenter;  
  10.     width300px;  
  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-stylesolid;  
  20.     border-width20px;  
  21.     height0;  
  22.     width0;  
  23.     positionabsolute;  
  24.     bottom: -42px;  
  25.     left: 30px;  
  26. }  
  27. .chat-bubble-arrow {  
  28.     border-color#ededed transparent transparent transparent;  
  29.     border-stylesolid;  
  30.     border-width20px;  
  31.     height0;  
  32.     width0;  
  33.     positionabsolute;  
  34.     bottom: -39px;  
  35.     left: 30px;  
  36. }  


 

17.指定标题样式

 

  该模板提供了所有头元素的主要样式,从H1到H5。

[css] view plaincopyprint?
  1. h1,h2,h3,h4,h5{  
  2.     color#005a9c;  
  3. }  
  4. h1{  
  5.     font-size2.6em;  
  6.     line-height2.45em;  
  7. }  
  8. h2{  
  9.     font-size2.1em;  
  10.     line-height1.9em;  
  11. }  
  12. h3{  
  13.     font-size1.8em;  
  14.     line-height1.65em;  
  15. }  
  16. h4{  
  17.     font-size1.65em;  
  18.     line-height1.4em;  
  19. }  
  20. h5{  
  21.     font-size1.4em;  
  22.     line-height1.25em;  
  23. }  


 

18.利用CSS生成纹理图案背景

 

  通过CSS来为背景图片添加噪点,从而形成漂亮的纹理图案。你可以使用 NoiseTextureGenerator生成器自定义噪点的纹理图案。

[css] view plaincopyprint?
  1. body {  
  2.     background-imageurl(data:image/png;base64,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);  
  3.     background-color#0094d0;  
  4. }  


 

19.List Ordering

  你可能会遇到这种列表情况,需要把这个列表拆分成两个UL元素,你不妨看看下面这段代码。

[css] view plaincopyprint?
  1. ol.chapters {  
  2.     list-stylenone;  
  3.     margin-left0;  
  4. }  
  5.    
  6. ol.chapters > li:before {  
  7.     contentcounter(chapter) ". ";  
  8.     counter-increment: chapter;  
  9.     font-weightbold;  
  10.     floatleft;  
  11.     width40px;  
  12. }  
  13.    
  14. ol.chapters li {  
  15.     clearleft;  
  16. }  
  17.    
  18. ol.start {  
  19.     counter-reset: chapter;  
  20. }  
  21.    
  22. ol.continue {  
  23.     counter-reset: chapter 11;  
  24. }  


 

20.为文本添加悬停提示框

  把这段代码拷贝到样式表中,使用新的HTML5数据属性,通过使用data-tooltip你就可以给文本添加悬停提示框了。

[css] view plaincopyprint?
  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-top8px solid #222;  
  19.     border-top8px solid hsla(0,0%,0%,.85);  
  20.     border-left8px solid transparent;  
  21.     border-right8px solid transparent;  
  22.     content"";  
  23.     displaynone;  
  24.     height0;  
  25.     width0;  
  26.     left: 25%;  
  27.     positionabsolute;  
  28. }  
  29. a[data-tooltip]:before {  
  30.     background#222;  
  31.     background: hsla(0,0%,0%,.85);  
  32.     color#f6f6f6;  
  33.     contentattr(data-tooltip);  
  34.     displaynone;  
  35.     font-familysans-serif;  
  36.     font-size14px;  
  37.     height32px;  
  38.     left: 0;  
  39.     line-height32px;  
  40.     padding0 15px;  
  41.     positionabsolute;  
  42.     text-shadow0 1px 1px hsla(0,0%,0%,1);  
  43.     white-spacenowrap;  
  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.     displayblock;  
  51.     top: -9px;  
  52. }  
  53. a[data-tooltip]:hover:before {  
  54.     displayblock;  
  55.     top: -41px;  
  56. }  
  57. a[data-tooltip]:active:after {  
  58.     top: -10px;  
  59. }  
  60. a[data-tooltip]:active:before {  
  61.     top: -42px;  
  62. }  


 

21.创建暗灰色的按钮样式

  下面这段代码创建了CSS3按钮类,并根据按钮颜色命名为.graybtn。当然你也可以根据自己的网站风格对颜色进行更改。

[css] view plaincopyprint?
  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 topleft 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 topleft 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. }  


 

22.打印的页面上显示URL

  这条规则会使打印出来的页面在超链接文字后面加上URL,URL会被放在一组括号里面,前后各留一个空格。

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


 

23.屏蔽Webkit移动浏览器中元素高亮效果

  在访问移动网站时,你会发现,在选中的元素周围会出现一些灰色的框框,而下面这段代码即可屏蔽这种样式。

[css] view plaincopyprint?
  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. }  


 

24.利用CSS生成小圆点图案

  通过下面的代码,可以让你的网站背景上产生一些小圆点装饰图案。默认情况下,它是使用在body元素上,但你也可以把它使用在网页里的其他容器上。

[css] view plaincopyprint?
  1. body {  
  2.     background: radial-gradient(circlewhite 10%transparent 10%),  
  3.     radial-gradient(circlewhite 10%black 10%50px 50px;  
  4.     background-size100px 100px;  
  5. }  


 

25.CSS3棋盘格效果

 

和上面的小圆点设计一样,这个效果需要一些额外的语法才可以工作,它需要在支持CSS3的浏览器上运行,效果很艳丽。当然,你可以根据需要自定义颜色。

[css] view plaincopyprint?
  1. body {  
  2.     background-colorwhite;  
  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-size100px 100px;  
  6.     background-position0 050px 50px;  
  7. }  


 

26.Github Fork红丝带

 

  下面这段代码是利用CSS3的transform属性生成Fork me on Github红丝带效果。

[css] view plaincopyprint?
  1. .ribbon {  
  2.     background-color#a00;  
  3.     overflowhidden;  
  4.     /* top left corner */  
  5.     positionabsolute;  
  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.     border1px solid #faa;  
  17.     color#fff;  
  18.     displayblock;  
  19.     fontbold 81.25% 'Helvetiva Neue'HelveticaArialsans-serif;  
  20.     margin0.05em 0 0.075em 0;  
  21.     padding0.5em 3.5em;  
  22.     text-aligncenter;  
  23.     text-decorationnone;  
  24.     /* shadow */  
  25.     text-shadow0 0 0.5em #444;  
  26. }  


 

27.字体压缩

  在样式表里使用如下代码能够帮你节省许多网页空间。

[css] view plaincopyprint?
  1. p {  
  2.   fontitalic small-caps bold 1.2em/1.0em ArialTahomaHelvetica;  
  3. }  


 

28.纸页面卷曲效果

  这种效果可以被广泛的使用在多种容器中,查看 demo page页面来更好地掌握该函数的使用吧。

[css] view plaincopyprint?
  1. ul.box {  
  2.     positionrelative;  
  3.     z-index1/* prevent shadows falling behind containers with backgrounds */  
  4.     overflowhidden;  
  5.     list-stylenone;  
  6.     margin0;  
  7.     padding0;   
  8. }  
  9.    
  10. ul.box li {  
  11.     positionrelative;  
  12.     floatleft;  
  13.     width250px;  
  14.     height150px;  
  15.     padding0;  
  16.     border1px solid #efefef;  
  17.     margin0 30px 30px 0;  
  18.     background#fff;  
  19.     -webkit-box-shadow: 0 1px 4px rgba(0000.27), 0 0 40px rgba(0000.06inset;  
  20.     -moz-box-shadow: 0 1px 4px rgba(0000.27), 0 0 40px rgba(0000.06inset;   
  21.     box-shadow: 0 1px 4px rgba(0000.27), 0 0 40px rgba(0000.06inset;   
  22. }  
  23.    
  24. ul.box li:before,  
  25. ul.box li:after {  
  26.     content'';  
  27.     z-index-1;  
  28.     positionabsolute;  
  29.     left: 10px;  
  30.     bottom: 10px;  
  31.     width70%;  
  32.     max-width300px/* avoid rotation causing ugly appearance at large container widths */  
  33.     max-height100px;  
  34.     height55%;  
  35.     -webkit-box-shadow: 0 8px 16px rgba(0000.3);  
  36.     -moz-box-shadow: 0 8px 16px rgba(0000.3);  
  37.     box-shadow: 0 8px 16px rgba(0000.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. }  


 

29.发光的锚链接

  下面这段代码可以创建自定义的锚链接,鼠标悬浮在上面会发光。

[css] view plaincopyprint?
  1. a {  
  2.     color#00e;  
  3. }  
  4. a:visited {  
  5.     color#551a8b;  
  6. }  
  7. a:hover {  
  8.     color#06e;  
  9. }  
  10. a:focus {  
  11.     outlinethin dotted;  
  12. }  
  13. a:hover, a:active {  
  14.     outline0;  
  15. }  
  16. a, a:visited, a:active {  
  17.     text-decorationnone;  
  18.     color#fff;  
  19.     -webkit-transition: all .3s ease-in-out;  
  20. }  
  21. a:hover, .glow {  
  22.     color#ff0;  
  23.     text-shadow0 0 10px #ff0;  
  24. }  


 

30.创建CSS3 Banner

  在支持CSS3的浏览器中,下面的代码可以生成漂亮的纯CSS图案。这种效果常见于电子商务网站的产品图片、缩略图、视频预览等。

[css] view plaincopyprint?
  1. .featureBanner {  
  2.     positionrelative;  
  3.     margin20px  
  4. }  
  5. .featureBanner:before {  
  6.     content"Featured";  
  7.     positionabsolute;  
  8.     top: 5px;  
  9.     left: -8px;  
  10.     padding-right10px;  
  11.     color#232323;  
  12.     font-weightbold;  
  13.     height0px;  
  14.     border15px solid #ffa200;  
  15.     border-right-colortransparent;  
  16.     line-height0px;  
  17.     box-shadow: -0px 5px 5px -5px #000;  
  18.     z-index1;  
  19. }  
  20. .featureBanner:after {  
  21.     content"";  
  22.     positionabsolute;  
  23.     top: 35px;  
  24.     left: -8px;  
  25.     border4px solid #89540c;  
  26.     border-left-colortransparent;  
  27.     border-bottom-colortransparent;  
  28. }