9 Style PRE source code CSS tutorial

Nah berikut ini adalah sembilan tampilan style pre source code (kode sumber) yang bisa anda manfaatkan untuk mempercantik tampilan dari pre anda supaya lebih gaya.... dalam postingan anda hehe he :)smile... silahkan di pilih monggo brada and sista, untuk penjelasan singkat mengenai PRE dan juga untuk cara mengunakannya, dan cara membuatnya silahkan lihat tutorial sebelumnya KLIK DI SINI.

seep ...

KLIK Pada Gambar untuk melihat detail tampilan

Stlye PRE 1

1. Tampilan pre standart :

    pre { overflow: auto; padding: 0.1em; background-color: #C0C0C0; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 1px solid #DCDCDC; margin: 5px; padding: 20px; }

Style PRE 2

2. Tampilan pre gradien/gradasi

• Gradien Biru

pre { overflow: auto; padding: 0.1em; background: -moz-linear-gradient(top,                  rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)),                 color-stop(100%,rgba(125,185,232,0)));
                background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%);
                background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%);
                background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%);
                background: linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=0 );
                  -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 1px solid #DCDCDC; margin: 5px; padding: 20px; }

• Gradien Silver

pre { overflow: auto; padding: 0.1em; background: rgb(245,245,245);
background: -moz-radial-gradient(center, ellipse cover,  rgba(245,245,245,1) 0%, rgba(216,216,216,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(245,245,245,1)), color-stop(100%,rgba(216,216,216,1)));
background: -webkit-radial-gradient(center, ellipse cover,  rgba(245,245,245,1) 0%,rgba(216,216,216,1) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgba(245,245,245,1) 0%,rgba(216,216,216,1) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgba(245,245,245,1) 0%,rgba(216,216,216,1) 100%);
background: radial-gradient(center, ellipse cover,  rgba(245,245,245,1) 0%,rgba(216,216,216,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#d8d8d8',GradientType=1 );
                  -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 1px solid #DCDCDC; margin: 5px; padding: 20px; }

• Gradien Orange

pre { overflow: auto; padding: 0.1em; background: rgb(247,200,113);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3Yzg3MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNzk2MjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(247,200,113,1) 0%, rgba(247,150,33,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(247,200,113,1)), color-stop(100%,rgba(247,150,33,1)));
background: -webkit-linear-gradient(left,  rgba(247,200,113,1) 0%,rgba(247,150,33,1) 100%);
background: -o-linear-gradient(left,  rgba(247,200,113,1) 0%,rgba(247,150,33,1) 100%);
background: -ms-linear-gradient(left,  rgba(247,200,113,1) 0%,rgba(247,150,33,1) 100%);
background: linear-gradient(left,  rgba(247,200,113,1) 0%,rgba(247,150,33,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7c871', endColorstr='#f79621',GradientType=1 ); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 1px solid #DCDCDC; margin: 5px; padding: 20px; }

• Gradien Hijau

pre { overflow: auto; padding: 0.1em; background: rgb(201,222,150);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M5ZGU5NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzhhYjY2YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzOTgyMzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(201,222,150,1) 0%, rgba(138,182,107,1) 44%, rgba(57,130,53,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,222,150,1)), color-stop(44%,rgba(138,182,107,1)), color-stop(100%,rgba(57,130,53,1)));
background: -webkit-linear-gradient(top,  rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%);
background: -o-linear-gradient(top,  rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%);
background: -ms-linear-gradient(top,  rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%);
background: linear-gradient(top,  rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=0 ); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 1px solid #DCDCDC; margin: 5px; padding: 20px; }

Style PRE 3

3. Tampilan pre dengan background gambar

• PRE Style pic 1

pre { overflow: auto; padding: 0.1em; background-color: #C0C0C0; background-image: url('http://i827.photobucket.com/albums/zz194/depalpiss/favicon/blog-icon-depalpiss.png'); background-repeat: repeat-y; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 1px solid #DCDCDC; margin: 5px; padding: 20px 20px 20px 45px; }

• PRE Style pic 2

pre { overflow: auto; padding: 0.1em; background-color: #C0C0C0; background-image: url('http://i827.photobucket.com/albums/zz194/depalpiss/codex1.png'); background-repeat: no-repeat; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 1px solid #DCDCDC; margin: 5px; padding: 20px 20px 20px 45px; }

• PRE Style pic 3

pre { overflow: auto; padding: 0.1em; background-color: #C0C0C0; background-image: url('http://i827.photobucket.com/albums/zz194/depalpiss/codex2.png'); background-repeat: no-repeat; background-position:center top; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 1px solid #DCDCDC; margin: 5px; padding: 42px 15px 15px 15px; }

• PRE Style pic 4

pre { overflow: auto; padding: 0.1em; background-color: #C0C0C0; background-image: url('http://i827.photobucket.com/albums/zz194/depalpiss/codex5.png'); background-repeat: repeat-y; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 1px solid #DCDCDC; margin: 5px; padding: 20px 20px 20px 45px; }