Tag PRE pada CSS-Tricks

Tabel Konten
  1. HTML 
  2. CSS 
Tag PRE pada CSS Tricks
CSS-Tricks

Tentang bagaimana Chris Coyier menyisipkan judul pada masing-masing tag <pre> secara otomatis. Beliau hanya menggunakan pseudo-element dengan content berupa atribut rel yang berasal dari masing-masing tag <pre>:

HTML 

<pre rel="CSS">Kode Anda di sini...</pre>

CSS 

pre {
  background-color:#333;
  font:normal 12px/14px Monaco,Monospace;
  color:#ccc;
  padding:10px 15px;
  margin:0px 0px 10px;
  position:relative;
}

pre[rel] {
  padding-top:32px;
}

pre[rel]:before {
  content:attr(rel);
  font:bold 12px/22px Arial,Sans-Serif;
  color:white;
  background-color:#39f;
  padding:0px 10px;
  position:absolute;
  top:0px;
  right:0px;
  left:0px;
}

Lihat Demo

11 Komentar

  • Unknown

    DI situ fungsi rel untuk di jadiin title nya ya mas ?

  • Unknown

    Wahhhhhhhhhh Bener Juga Bang iya Ya Kenapa gak pernah mikir pantes aja dari dulu aku bingung gimana cara ngasi judul otomatis pada kode CSS wahhhh keren bang mantappppp

  • Taufik Nurrohman

    @Syndicate OS Sebenarnya sih bukan itu tujuan sebenarnya. Atribut rel digunakan untuk menyatakan relasi/keterkaitan sebuah elemen terhadap suatu kelompok. Mungkin begitu maksudnya (misal <a rel="nofollow" href="#"> untuk menyatakan bahwa tautan tersebut tidak akan diindeks oleh Google). Mengenai valid atau tidaknya atribut rel diletakkan pada tag <pre> Saya tidak tahu. Saya tempe :p Ada salah satu pembaca di sini yang tahu tentang atribut rel dengan baik? :(
    Tapi untuk kasus ini, nilai dari atribut rel bisa digunakan sebagai konten untuk pseudo-element yang kita bangun. Selain itu bisa juga menggunakan atribut title, tapi Saya rasa tooltip yang akan tampil pada tag <pre> setiap kali elemen tersebut disentuh karena atribut title hanya akan mengganggu pembaca:

    pre[rel]:before {
    content:attr(title);
    ...
    ...
    }

    [note]Lebih jauh tentang CSS Pseuro-Element http://hompimpaalaihumgambreng.blogspot.com/2011/09/css-pseudo-element-tahap-pertama.html[/note]

  • Taufik Nurrohman

    @system of blog Semua orang di dunia ini keren bagi Saya :Q

  • Unknown

    Mantapp ijin borkmark ya .. :)

  • Anonim

    Mas , Kasih Template blog yang keren kayak gini donk... ;)

  • Taufik Nurrohman

    @Dimas Okaisy Enak aja! Hehe... :D

  • Unknown

    @Taufik Nurrohman jadi gitu ya mas, saya jadi lumayan ngerti :D

  • Unknown

    Tutorial disini sangat lengkap, asyik nieh dapet ilmu baru banyak, owh iya sebagian tutorial telah saya praktekkan pada blog saya.

  • -x-Code-x-

    Berhasil sob hatur nuhun :)

  • Erdin Maulana

    :-bd Kren Gan. klo scrollnya dipinggir bisa gk ? :D

Komentar telah ditutup.