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

4 Komentar

  • Putra

    copas bg+fontnya aah :D

  • Unknown

    copas idenya ah ! XD

  • Rudy Azhar

    Aneh, kok mirip seperti punya ane ya ? x@

    Bleh tau ngggak ide tersebut diambil darimana?

  • Taufik Nurrohman

    @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

Komentar telah ditutup.