Trik CSS Lainnya yang Mungkin Belum Anda Tahu

Friday, July 6, 2012, 11:03

Trik-trik berikut ini mungkin jarang digunakan, tetapi tak ada salahnya untuk mencobanya:

Menandai sebuah link kosong.

a[href = ""] {
  background: red;
  color: white;
  font-size: x-large;
}

Lihat sample: http://jsfiddle.net/2LuuK/

Menambahkan style berbeda untuk link relatif dan absolut.

a[href ^= "http"] {
    display: inline-block;
    color: green;
    -webkit-transform: rotate(180deg);
}

Lihat sample: http://jsfiddle.net/j9hV2/

Anda bisa juga menambahkan styling untuk link yang mengarah ke luar dengan selector :not().

a[href ^= 'http']:not([href *= 'rumahdot.']) {
  background: transparent url(arrow.png) no-repeat center right;
  padding-right: 16px;
}

Lihat sample: http://jsfiddle.net/pSDVq/

Tahukah Anda bahwa elemen head dan semua elemen di dalamnya bisa ditampilkan?

head {
  display: block;
  border-bottom: 5px solid red;
}
script, style, link {
  display: block;
  white-space: pre;
  font-family: monospace;
}

Anda bisa juga menyisipkan konten dengan fungsi attr pada CSS

style:before {
  content: "<style type=\"" attr(type) "\">";
}
style:after {
  content: "< /style>";
}

link:before {
  content: "<link rel=\"" attr(rel) "\" type=\"" attr(type) "\" href=\"" attr(href) "\" />";
}

Lihat sample: http://jsfiddle.net/FsTEq/

Sumber: html5rocks.com

Heri Setiawan

Web designer dan front-end developer muda yang belum terlalu jelas dari spesies mana dia berasal. Pada sebuah eksperimen, dia mampu bertahan di dalam air selama 323,007645 detik, dan bisa melayang di udara dengan ketinggian mencapai 15,23 meter. Karena sering berpindah habitat, kini ia memutuskan untuk berada di darat dan menekuni dunia Web Design, HTML5, CSS, dan jQuery.

Follow me on Twitter

2 komentar di “Trik CSS Lainnya yang Mungkin Belum Anda Tahu”

iwan says:

July 9, 2012 at 20:24

its greats bro

Reply
ino putro says:

December 3, 2012 at 11:02

sedikit bingung mas..
tapi tak coba dulu..
thanks

Reply