CSS Only, Zebra Striped PRE Tag
pre {
display:block;
font:normal 12px/22px Monaco,Monospace !important;
color:#CFDBEC;
background-color:#2f2f2f;
background-image:-webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:-moz-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:-ms-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:-o-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
padding:0em 1em;
overflow:auto;
}
4 Comments:
copas bg+fontnya aah :D
copas idenya ah ! XD
Aneh, kok mirip seperti punya ane ya ? x@
Bleh tau ngggak ide tersebut diambil darimana?
@Rudy Azhar Ya, Saya sempat melihat :\ Padahal dulu setahu Saya pak Rudy menggunakan tag <pre> dengan motif kertas kotak-kotak. Saya mendapatkan ide dari penjabaran posting ini saja http://hompimpaalaihumgambreng.blogspot.com/2012/01/css3-gradient-warning-line.html dan melihat dari motif tag <pre> yang sudah ada, tapi yang menggunakan background-image. Selain itu, perbedaannya adalah pak Rudy menggunakan background-size:
pre {
background-color: #444;
background-image: -webkit-linear-gradient(#444 50%, #505050 50%);
background-image: -moz-linear-gradient(#444 50%, #505050 50%);
background-image: -ms-linear-gradient(#444 50%, #505050 50%);
background-image: -o-linear-gradient(#444 50%, #505050 50%);
background-image: linear-gradient(#444 50%, #505050 50%);
background-position: 0 1px;
background-repeat: repeat;
background-size: 48px 48px; /* background-size */
border-radius: 5px;
color: #f6f6f6;
line-height: 24px;
padding: 24px;
}
sedangkan Saya menggunakan repeating-linear-gradient
Post a Comment
<< Home