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://lh6.googleusercontent.com/-1oONyQjMTI8/UVB3_xHdEyI/AAAAAAAAUCo/GvZ7Q6BpjWA/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://lh3.googleusercontent.com/-kfNhbWoNgwU/UVB3V0AayBI/AAAAAAAAUCc/mp3-n-aXwG4/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://lh3.googleusercontent.com/-faaAXYGG-sw/UVEcBASVsoI/AAAAAAAAUEU/99BLaAKVhes/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://lh3.googleusercontent.com/-9U-y9jw5164/UVEXoqo-c7I/AAAAAAAAUDM/3Sqibg7Rxqo/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://lh3.googleusercontent.com/-TUS5qlYD6s8/UVEbhK6SYCI/AAAAAAAAUEI/rqlfBY25iko/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://lh4.googleusercontent.com/-_Kg2lxdOjCQ/UVEbOWd5jgI/AAAAAAAAUD8/E0oQxNbu_Bs/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://lh6.googleusercontent.com/-bvmuPs5Mu-U/UVEa1sUc8mI/AAAAAAAAUDw/68u8KNL9ol4/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://lh6.googleusercontent.com/-sqGlkFFUsZs/UVEabYzQrnI/AAAAAAAAUDk/mwQlpdQhrac/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://lh4.googleusercontent.com/-MjZF1SVgztA/UVEZvkCA6II/AAAAAAAAUDY/oRT9SHyySfE/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://lh4.googleusercontent.com/-MjZF1SVgztA/UVEZvkCA6II/AAAAAAAAUDY/oRT9SHyySfE/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