Mecha versi 2.6.4 sudah dirilis!

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]

Unknown

Mantapp ijin borkmark ya .. :)

Anonim

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

Unknown

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

Erdin Maulana

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

Komentar telah ditutup.