Monday, March 26, 2012

CSS Only, Zebra Striped PRE Tag

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;
}

Labels: ,

4 Comments:

At Monday, March 26, 2012 at 12:13:00 PM GMT+7, Blogger Putra said...

copas bg+fontnya aah :D

 
At Tuesday, March 27, 2012 at 3:38:00 PM GMT+7, Blogger Unknown said...

copas idenya ah ! XD

 
At Thursday, April 5, 2012 at 10:51:00 AM GMT+7, Blogger Rudy Azhar said...

Aneh, kok mirip seperti punya ane ya ? x@

Bleh tau ngggak ide tersebut diambil darimana?

 
At Thursday, April 5, 2012 at 2:06:00 PM GMT+7, Blogger Taufik Nurrohman said...

@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