Loading...

Tạo Khung Chứa Code Độc Đáo Ngộ Nghĩnh


Mẫu 1
.dt1 {
overflow:auto;width:520px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf5RPHUNCAcon9YT2P532-aVjGckquxEgVYR980IuIg-c5M7z7s2zTemLZ2zjhtBjgfapdrEP9-FYX14n2CsrfWcJ1nGMQD9UsGi-oQB44dGdjbiDuF6IY40bYbjVcmFOLrATiHeg6g2_x/s535/2.JPG) repeat-y top left;
border : 1px solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.dt1:hover{
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUHPyBmUB0tM7T_OA2xx3z18Eoqw2Aphy1Lg6LwvSgEimrmpSpb76DpZ2-FbqoAhPZlMmDmScT_MobCt_y_Ir_UDer2shzKjmfEPFnUIWUHh93XHBJ92U0Yrb02QT9iFBr7gukaUmce31N/s535/1.png) repeat-y top left;
color:#FEF9BF;
border : 1px solid #000;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}
Mãu 2
.dt2 {
overflow:auto;width:520px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#7A6417;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwURbdft1M5DQ_Qp8iVg_NRYs17DmAR7bqrbtRT-Ec7qqyBlwP_O-cliwTnKGF3IcumTpyn9hr2RUJksHF49bnuc029dgGt6Qcubx4-URYq-rk2a6u6UR66Qg4FuzSIPn2VA2Lww-pk7xF/s446/000.JPG) repeat-y top left;
border : 1px solid #D8C37D;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.dt2:hover{
border : 1px solid #D8C37D;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
Mẫu 3
.dt3 {
overflow:auto;width:250px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#000000;
margin : 15px 35px 15px 15px;
padding : 15px 5px 10px 165px;
clear : both;
list-style-type : none;
background : #ffffff url(https://lh3.googleusercontent.com/--6QIh4ymE5Y/UVRYmXcuv9I/AAAAAAAAUWQ/X1sxOBKbykc/s427/special-offer-01.jpg) repeat-y top left;
border : 1px solid #ffffff;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.dt3:hover{
background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3vJOhHS71ceOkH5IYPaFNGg2HpElMqH4H6G6dH7xPhy45yqOmbAoQOQ14ehUhLcM27UhQk6Ivm3rq27ksD9IjIqNzMv-eYX0nSCY6frIHTDdh4NHdbW5mppWIoTNLacfAncQE0zOvy-hb/s427/%5Bwww.gj37765.blogspot.com%5Dmd3.jpg) repeat-y top left;
color:#000000;
border : 1px solid #ffffff;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}
Mẫu 4
.dt4 {
overflow:auto;width:520px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 repeat-y top left;
border : 1px solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.dt4:hover{
overflow:auto;width:520px;
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBklDLVsuPxj_dVeJydsYXgb2sn6WXjiM6mMB0HRiv7cyjZBwskFOXsls52QEE6rLSpIqArXJ1WiINQDn7hesRTWjYtknaBI62dhnydp5Y17z8S75puCAAuYZobIf_6uPufGWA-1I5Y5II/s450/1+%281%29.JPG) repeat-y top left;
color:#eee;
text-shadow:1px 1px 1px #000;
text-transform: capitalize;
border : 1px solid #000000;
border-left:20px solid #CCC;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}
Mẫu 5
.dt5 {
overflow:auto;width:520px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 60px;
clear : both;
color:#000;
list-style-type : none;
background : #F5F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhXRxyGL8KbEy-nBPxc9CZWn9B0DP9-fLwAOkiOafwXOO1-3i9kG_Tcb6agvdvv9f-_BRDSJko2q15KV0EZAqFhZqV9Qps6WbSj6gZiEznomkkLkh_Szky0DE1KMK1I4I5Gk-Wvj_FGCdu/s383/1.JPG) repeat-y top left;
border : 1px solid #ccc;
border-right:15px solid rgba(0, 0, 0, .100);
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}
.dt5:hover{
overflow:auto;width:520px;height:auto;
background : #F5F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigTp0AgGa98vVTeALv3tT_1zFFlaY4oXt4vFV8g7uUpbsnDy1P42B80WQDBW5oSEFBc4JEscisuiYLHbA6h7XEzuy3tQ-IxsUVA2btCFwh7w32R5Lao4-Pnir4nhIo-FNW1YO6GquDe7wK/s383/1.JPG) repeat-y top left;
border : 1px solid #ccc;
border-right:15px solid rgba(0, 0, 0, .100);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}
Mẫu 6
.dt6 {
overflow:auto;width:520px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
color:000:
list-style-type : none;
background :#6D6C6A;
border : 1px solid #EEEEEE;
border-left:20px solid #000;
border-right:20px solid #000;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}
.dt6:hover{
background : #000;
color:#fff;
border : 1px solid #EEEEEE;
border-left:20px solid #6D6C6A;
border-right:20px solid #6D6C6A;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}
Mẫu 7
.dt7
{
color:#848176;
overflow:auto;width:520px;
background:black;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
border : 1px solid #000000;
border-left:10px solid #ccc;
border-right:10px solid #ccc;
list-style-type : none;
transition:width 2s;
text-position:fixed;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
box-shadow: 10px 10px 5px #888888;
}
.dt7:hover
{
width:520px;
color:#fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}
Mẫu 8
.dt8 {
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 35px;
background : #EEEEEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeCNvxJQQ9uQIEXAFBAq1RkdVOWa3T9SJThWFUjIfsGbAyCtpsnOFZG22yIlhmDH-8FJ77oCTzVwYY9tjoRq6ZHpsVj12SzeP7AoWhVTxPeOKaTRe36ac0gdm28Cfk3WQIu-zmWaSkkMij/s800/code+%28gj37765.blogspot.com.gif) repeat-y top left;
border-top : 1px solid #AAAAAA;
border-right : 1px solid #AAAAAA;
border-bottom : 1px solid #AAAAAA;
border-left : 1px solid #AAAAAA;
}
Mẫu 9
.dt9{
overflow:auto;width:520px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 15px 15px 15px;
padding : 20px 10px 0px 35px;
clear : both;
color:#ffffff;
list-style-type : none;
background : #F7F7F7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisyyomT_VzId4teupdr1JcShC7D3aqfWkq6eCOA-yUZ7wU88MK4SHtR1X2rFMFyL2OO-ykTI6PMciF3Wne0CrojJe1GN3OyrEuZ192dcJpg2WJuwOrx2RAuu0D_aa1ItEJbgj1OcRA37Tu/s613/copy-to-clipboard-cmd-3.png) repeat-y top left;
border : 1px solid #EEEEEE;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
}
.dt9:hover{
background : #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisyyomT_VzId4teupdr1JcShC7D3aqfWkq6eCOA-yUZ7wU88MK4SHtR1X2rFMFyL2OO-ykTI6PMciF3Wne0CrojJe1GN3OyrEuZ192dcJpg2WJuwOrx2RAuu0D_aa1ItEJbgj1OcRA37Tu/s613/copy-to-clipboard-cmd-3.png) repeat-y top left;
border : 1px solid #EEEEEE;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}

Không có nhận xét nào :

noel