CSS Only, Zebra Striped PRE Tag

Senin, 26 Maret 2012

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 Komentar

Putra

Senin, 26 Maret 2012 12:13 PM

copas bg+fontnya aah :D

Unknown

Selasa, 27 Maret 2012 03:38 PM

copas idenya ah ! XD

Rudy Azhar

Kamis, 05 April 2012 10:51 AM

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