DTE :]

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:

  • copas bg+fontnya aah :D

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

  • copas idenya ah ! XD

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

  • Aneh, kok mirip seperti punya ane ya ? x@

    Bleh tau ngggak ide tersebut diambil darimana?

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

  • @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

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

Post a Comment



<< Home