Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on May 22nd, 2012  |  syntax: None  |  size: 3.10 KB  |  hits: 16  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Nice inset border in CSS3
  2. code, pre {
  3.   background-color: rgba(0, 0, 0, 0);
  4.   background-repeat: repeat-x;
  5.   background-image: -khtml-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0)));
  6.   /* Konqueror */
  7.  
  8.   background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  9.   /* FF 3.6+ */
  10.  
  11.   background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  12.   /* IE10 */
  13.  
  14.   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.15)), color-stop(100%, rgba(0, 0, 0, 0)));
  15.   /* Safari 4+, Chrome 2+ */
  16.  
  17.   background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  18.   /* Safari 5.1+, Chrome 10+ */
  19.  
  20.   background-image: -o-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  21.   /* Opera 11.10 */
  22.  
  23.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0, 0, 0, 0.15)', endColorstr='rgba(0, 0, 0, 0)', GradientType=0);
  24.   /* IE6 & IE7 */
  25.  
  26.   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0, 0, 0, 0.15)', endColorstr='rgba(0, 0, 0, 0)', GradientType=0)";
  27.   /* IE8+ */
  28.  
  29.   background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  30.   /* the standard */
  31.  
  32.   background-color: rgba(0, 0, 0, 0.3);
  33.   font-family: "Monaco", Courier New, monospace;
  34.   font-size: 12px;
  35.   font-weight: normal;
  36.   line-height: 20px;
  37.   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  38.   -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
  39.   -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
  40.   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
  41. }
  42. code {
  43.   padding: 3px 6px;
  44.   -moz-border-radius: 3px;
  45.   border-radius: 3px;
  46. }
  47. pre {
  48.   margin: 20px 0;
  49.   padding: 20px;
  50.   color: #fff;
  51.   -moz-border-radius: 6px;
  52.   border-radius: 6px;
  53.   white-space: pre-wrap;
  54. }
  55.        
  56. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25)
  57.        
  58. box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  59.        
  60. box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, 0.25);
  61.        
  62. body {
  63.   background: url('http://subtlepatterns.com/patterns/zigzag.png');
  64.   padding: 30px;
  65.   color: #fff;
  66.   text-rendering: optimizeLegibility;
  67.   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  68. }
  69.  
  70. p {
  71.   font-family: sans-serif;
  72.   margin: 10px 0px;
  73.   font-size: 14px;
  74. }
  75.  
  76. code {
  77.   font-family: monospace;
  78.   margin: 10px 0px;
  79. }
  80.  
  81. pre {
  82.   margin: 20px;
  83.   padding: 20px;
  84.   color: #fff;
  85.   border-radius: 6px;
  86.   white-space: pre-wrap;
  87.   background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  88.   background-color: rgba(0, 0, 0, 0.1);
  89.   font-family: "Monaco", Courier New, monospace;
  90.   font-size: 12px;
  91.   font-weight: normal;
  92.   line-height: 20px;
  93.   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  94.   box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, 0.25);
  95. }
  96.        
  97. -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
  98. -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
  99. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);