- Nice inset border in CSS3
- code, pre {
- background-color: rgba(0, 0, 0, 0);
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0)));
- /* Konqueror */
- background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
- /* FF 3.6+ */
- background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
- /* IE10 */
- 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)));
- /* Safari 4+, Chrome 2+ */
- background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
- /* Safari 5.1+, Chrome 10+ */
- background-image: -o-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
- /* Opera 11.10 */
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0, 0, 0, 0.15)', endColorstr='rgba(0, 0, 0, 0)', GradientType=0);
- /* IE6 & IE7 */
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0, 0, 0, 0.15)', endColorstr='rgba(0, 0, 0, 0)', GradientType=0)";
- /* IE8+ */
- background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
- /* the standard */
- background-color: rgba(0, 0, 0, 0.3);
- font-family: "Monaco", Courier New, monospace;
- font-size: 12px;
- font-weight: normal;
- line-height: 20px;
- text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
- }
- code {
- padding: 3px 6px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- }
- pre {
- margin: 20px 0;
- padding: 20px;
- color: #fff;
- -moz-border-radius: 6px;
- border-radius: 6px;
- white-space: pre-wrap;
- }
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25)
- box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, 0.25);
- body {
- background: url('http://subtlepatterns.com/patterns/zigzag.png');
- padding: 30px;
- color: #fff;
- text-rendering: optimizeLegibility;
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
- }
- p {
- font-family: sans-serif;
- margin: 10px 0px;
- font-size: 14px;
- }
- code {
- font-family: monospace;
- margin: 10px 0px;
- }
- pre {
- margin: 20px;
- padding: 20px;
- color: #fff;
- border-radius: 6px;
- white-space: pre-wrap;
- background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
- background-color: rgba(0, 0, 0, 0.1);
- font-family: "Monaco", Courier New, monospace;
- font-size: 12px;
- font-weight: normal;
- line-height: 20px;
- text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, 0.25);
- }
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);