Công cụ tạo Css cho khung chứa code thêm Gradient Background

1_Công cụ tạo Css cho khung chứa code thêm Gradient Background

Code Frame Dimensions TTP © 2014
Height:	px (pixels) /***khi vượt quá chiều cao sẽ xuất hiện scrollbar**/
Width:	Percent Pixels
Styles
Background Color:	#   [ More Colors...]
Gradient Background:	> None Black 3D #1 Black 3D Brown Red 3D Brown 3D Grey Blue 3D Wax 3D #1 White 3D #2 Olive 3D #2 Wax Flat White 3D Thêm Gradient vào background
Text Size:	8pt 9pt 10pt 12pt 14pt 16pt 18pt 22pt
Text Style & Weight:	Italic Bold
Text Color:	#   [ More Colors...]
Text Alignment:	Left Center Right Justified
Font Family:	Arial Helvetica Verdana Tahoma Times Roman Georgia Garamond Cursive Consolas Monospace
Padding:	0px 5px 8px 10px 15px 20px
Border Width:	0 pixels 1 pixel 2 pixels 3 pixels 4 pixels 5 pixels 6 pixels 10 pixels
Border Style:	Solid Dashed Dotted Double Groove Ridge Inset Outset None
Border Color:	#   [ More Colors...]
Border Radius:	2px 5px 10px 15px None
Contents Code here( only for Demo):
Text on Code Frame:	/*****Code only Demo*****/ $(function() { $('a').click(function() { $('body').remove(); // Whaatt??!!!! }); });
Generated code: Copy and paste Css code into'style'tag. <!-- HTML Codes by Testtem... --> <style type="text/css"> code{ font-family:Consolas; } pre{ background: #45484d; /* Old browsers */ background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */ background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */; height:120px;width:95%; font-size:10pt;color:#FFFFFF; padding:10px;text-align:left; border:1px solid #d2d2d2; overflow:auto;white-space:pre } </style> <pre><code> /*****Code only Demo*****/ $(function() { $('a').click(function() { $('body').remove(); // Whaatt??!!!! }); }); </code></pre>

2_Gắn tag cho khung chứa code:

^↑Ảnh Demo

_Nếu muốn gắn tag cho khung chứa code như ảnh trên ta thêm <css> vào thẻ style:

Css

pre[rel] {
    padding-top: 32px;
}
pre[rel]:before {
    content: attr(rel);
    font: normal 12px/22px Arial, Sans-Serif;
    color: white;
    background-color: #369;
    padding: 0 10px;
    margin: 0 8px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

Và trong thẻ body ta dùng cấu trúc như bên dưới:

Html

<pre rel="Html"><code>
   Nội dung code
Nhập nội dung code đã dược mã hóa ở đây
</code></pre>

Html có thể thay thế bằng: Css , Javascript tùy nội dung code.
Hoặc bạn có thể dùng Công cụ  mã hóa và thêm "rel" tag