Styling menggunakan CSS pseudo-element

Pada posting terdahulu, kita juga pernah membicarakan tentang CSS pseudo-element ini, namun hanya terbatas pada “styling ordered dan unordered list”. Selain itu, mungkin kita pernah melihat bentuk teks di dalam elemen atau image berbentuk pita (ribbon), kemudian garis (border) yang memiliki efek tenggelam (press), bentuk melipat di sudut sebuah elemen & mirror text effect (efek cermin pada teks). Semua dapat dilakukan juga dengan menggunakan CSS pseudo-element :before dan/atau :after.

Credit

Untuk penggunaan ribbon & border ber-efek tenggelam dapat Anda baca selengkapnya di blog Rudy Azhar. Dan salah satu nilai plus—pada form komentar ditambahkan oleh Ardianzzz—yang di coding dengan demikian menarik menggunakan CSS pseudo-element (demo ribbon).

Sedangkan untuk membuat efek cermin pada teks, penulis lupa (alpa) dengan link kreditnya. Silakan kontak penulis jika Anda mengklaim bahwa tulisan tentang “efek cermin pada teks” diambil dari sumber Anda & penulis akan segera melakukan update pada link kredit ini.

Indeks Konten

Ribbon

Pada elemen ini Anda melihat sub judul “Ribbon” dalam sebuah pita (ribbon). Adapun CSS yang digunakan seperti yang tampak di bawah ini.

.element {
background:#e1e1e1;
padding:1.5em 2em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
border-radius:1em
}
.element h2 {
background:#f90;
border-bottom:.05em solid #666;
/*-- Rounded corner kiri atas --*/
-moz-border-radius:.25em 0 0 0;
-webkit-border-radius:.25em 0 0 0;
border-radius:.25em 0 0 0;
display:block;
left:-1.75em;
padding:.25em 0 .25em 1.75em;
position:relative;
width:60%
}
/* Mulai membentuk ribbon */
.element h2:after, .element h2:before {
content:" ";
display:block;
position:absolute
}
/* Ribbon kanan */
.element h2:after {
top:0;
right:0;
border-top:.85em solid #f90;
border-right:.75em solid #e1e1e1;
border-bottom:.80em solid #f90;
border-left:.75em solid #f90
box-shadow:0 .05em 0 #666;
}
/* Ribbon kiri */
.element h2:before {
bottom:-.25em;
left:0;
border-top:none;
border-right:none;
border-bottom:.25em solid #666;
border-left:.40em solid #666;
/*-- Rounded corner kiri bawah --*/
-moz-border-radius:0 0 0 .25em;
-webkit-border-radius:0 0 0 .25em;
border-radius:0 0 0 .25empx;
z-index:1
}

Dan berikut kode HTML yang menyertainya.

<div class="element">
<h2>Ribbon</h2> <p>Pada elemen ini Anda melihat sub judul “Ribbon” dalam sebuah pita (ribbon). Adapun CSS yang digunakan seperti yang tampak di bawah ini…</p>
</div>

Kembali ke indeks konten

Border/line press effect

Di bawah sub judul “Border/line press effect”, Anda melihat sebuah border yang tampak seperti ditekan. Untuk membuat border tersebut, kita dapat menggunakan kode CSS sebagai berikut.

.element2 h2 {
padding:0 0 0.25em;
position:relative;
width:100%
}
.element2 h2:after {
content:" ";
position:absolute;
bottom:0;
left:0;
border-top: 1px solid #c3c3c3; /* Warna seharusnya lebih tua dari background */
border-bottom: 1px solid #f1f1f1; /* Warna seharusnya lebih muda dari background */
width:100%
}

Catatan:

  • Atribut width (warna biru) tidak harus 100%. Artinya jika width bernilai 80% maka left bernilai 10% (letak garis di tengah elemen).
  • Apabila ingin menambahkan border press di atas h2, tambahkan #element2 h2:before dengan properti yang sama. Kemudian ganti kode yang berwarna merah (bottom:0;) dengan top:0;.
  • Pada kasus lain, mungkin kita ingin meletakkan border di kanan atau kiri elemen.
    • Kiri elemen:
      top:0;
      left:0;
      border-left:1px solid #c3c3c3;
      border-right:1px solid #f1f1f1;
      height:100%;
    • Kanan elemen:
      top:0;
      right:0;
      border-left:1px solid #c3c3c3;
      border-right:1px solid #f1f1f1;
      height:100%;

Sedangkan kode HTML pada elemen ini adalah sebagai berikut.

<div class="element2">
<h2>Border/line press effect</h2> <p>Di bawah sub judul “Border/line press effect”, Anda melihat sebuah border yang tampak seperti ditekan. Untuk membuat border tersebut, kita dapat menggunakan kode CSS sebagai berikut…</p>
</div>

Kembali ke indeks konten

Folding angle

Anda tentu melihat efek melipat yang tepat berada di sudut kanan atas elemen ini. Adapun pengkodean CSS-nya seperti yang tampak di bawah ini.

.element3 {
background:-webkit-gradient(linear, right top, left center, from(#e1e1e1), to(#fff));
background:-moz-linear-gradient(right, #e1e1e1, #fff);
border:1px solid #c3c3c3;
padding:1.5em 2em;
position:relative
}
.element3:before, .element3:after {
content:" ";
display:block;
position:absolute;
/*-- Memutar elemen 45 derajat (searah jarum jam) --*/
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg)
}
/* Menutup sudut kiri atas elemen berbentuk segitiga */
.element3:after {
top:-2em;
right:-2em;
/*-- Warna border sama dengan warna body (di luar elemen) --*/
border-top:2em solid #fff;
border-right:2em solid #fff;
border-bottom:2em solid #fff;
border-left:2em solid #fff
}
/* Membuat segitiga efek melipat */
.element3:before {
top:0.75em;
right:0.75em;
/*-- Warna border sama dengan warna elemen (kecuali border atas, lebih tua/gelap) --*/
border-top:2em solid #c3c3c3;
border-right:2em solid #e1e1e1;
border-bottom:2em solid #e1e1e1;
border-left:2em solid #e1e1e1;
z-index:1
}

Di bawah ini merupakan kode HTML-nya.

<div class="element3">
<h2>Folding angle</h2> <p>Anda tentu melihat efek melipat yang tepat berada di sudut kanan atas elemen ini. Adapun pengkodean CSS-nya seperti yang tampak di bawah ini…</p>
</div>

Kembali ke indeks konten

Mirror Text

Untuk sub judul “Mirror Text” sengaja penulis perbesar agar efek cermin kelihatan jelas. Adapun CSS pseudo-element membuat efek cermin pada teks tersebut adalah sebagai berikut.

.element4 h2 {
font-size:2em;
font-weight:bold;
position: relative
}
.element4 h2:before, .element4 h2:after {
display:block;
position:absolute;
bottom:-0.75em; /* You should change this value to fit your font */
left:0;
right:0
}
.element4 h2:before {
content: "Mirror Text";
opacity:.4;
/* This is how the text is flipped vertically */
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1)
}
.element4 h2:after {
/* Fading using CSS gradient */
/* Don't forget to change the colors to your background color */
background: -webkit-gradient(linear, left top, left center, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
/* I left out the `filter` property,
because IE doesn't know `:before` and `:after` pseudo-elements anyway */
content: " ";
height:0.75em
}

Catatan:
Beberapa kode informasi (antara /*…*/) sengaja tidak dirubah/dihapus untuk memudahkan—pelacakan—klaim link kredit nantinya. Background elemen ini bernilai #eeeeee sama dengan rgb(238,238,238) sama dengan rgba(238,238,238,1).

Adapun kode HTML yang menyertainya adalah sebagai berikut.

<div class="element4">
<h2>Mirror Text</h2> <p>Untuk sub judul “Mirror Text” sengaja penulis perbesar agar efek cermin kelihatan jelas. Adapun CSS pseudo-element membuat efek cermin pada teks tersebut adalah sebagai berikut…</p>
</div>

Kembali ke indeks konten

Generalisasi

Styling menggunakan CSS pseudo-element :before dan/atau :after di atas, mungkin hanya sebagian kecil dari gaya-gaya pengkodean lain. Namun tidak ada salahnya jika kita mengenal & mengetahui—gaya seperti apa—yang mampu didukung oleh CSS pseudo-element tersebut. Apalagi penggunaannya bersih dari penambahan elemen baru. Yah, hanya dengan melakukan kustomisasi pada satu elemen, kita seakan-akan membentuk 2–3 elemen.

Note:
Sampai tulisan ini diterbitkan CSS pseudo-element :before dan/atau :after belum didukung oleh peramban IE (Internet Explorer).

115 komentar untuk “Styling menggunakan CSS pseudo-element”

  1. Terima kasih atas informasinya,
    Sukses selalu...

    BalasHapus
  2. saya bru ketemu hari ini cara bikin pita sperti diatas. lumayan nih buat rancang template. hhe..

    Nice share sob..

    BalasHapus
  3. @Armin:
    Baru nemu, gan. Alhamdulillah, walaupun artikel tersebut bukan berita yang fresh, tapi bisa memberikan input kepada orang lain. Bisa juga dibaca melalui link creditnya, gan :)

    BalasHapus
  4. Selamat malam sobat thank's atas infonya yg diberikan kepada temen termasuk saya. semoga dengan artikel ini kita bisa mengambil segi positifnya, semoga sukses selalu maju terus blogwalking.

    BalasHapus
  5. aduuhh masih newbie bgt saya kenal sama blog, ternyata perjalanan saya masih panjang..
    mksih bnyak infonya, pasti sangat berguna buat nanti, :)

    BalasHapus
  6. wahh ternyata masih banyak yang harus yang pelajari nich buat ngotak ngatik blog,,
    thanks ya jadi terinspirasi nich

    BalasHapus
  7. hmmm cukup rumit juga tuh.... thanks ya dah share ilmunya....

    BalasHapus
  8. Wah patut di coba tuh... Langsung praktek... Makasih gan infonya...

    BalasHapus
  9. ikut nyobain gan kode2 nya he2xx

    BalasHapus
  10. wahhh keren banget nich postingannya.. tapi sayangnya ilmu ku masih dibawah nich tentang css....

    BalasHapus
  11. boleh juga nich ilmu pengetahuannya,, thanks ya sangat bermanfaat sekali nich

    BalasHapus
  12. @Prasetyo, terima kasih Mas..

    Sebelumnya saya mohon maaf kalau tautan-tautan tersebut saya non-aktifkan.

    BalasHapus
  13. ikutan lihat dunk,,, nyimak bljar,,, baru beljar nie,,

    BalasHapus
  14. OB makin lama makin keren tutorialnya, gak kalah sama blog-blog tutorial lainnya, emang gua yakin blogger Indonesia bisa ngalahin blogger asing

    BalasHapus
  15. IE8 mendukung pseudo element :before dan :after

    Riboon bukan adrianzz yang buat ada itu linknya di tahun 2010.

    Tapi memang mantap :before dan :after ini, bisa di kreasikan, dar penempatan relative dan absolute klo untuk kreasi, berlaku apa saja.

    Gua suka yang pakai :after bisa buat background, nah klo background absolute bisa malapetaka.

    BalasHapus
  16. Wah, lumayan buat nambah ilmu CSS. Ijin copy ya bro.

    BalasHapus
  17. info yng sangat bermanfaat nih
    hehe

    BalasHapus
  18. @Hendro Prayitno — Iya, IE8 telah mendukung pseudo elemen ini, makanya di coret (del) kata “tidak”nya, bang.
    Nanti dikoreksi (update) dah untuk kata/kalimat/paragraf yang dimaksud. Thank you, bang. :)

    BalasHapus
  19. mantap nie info nya sangat bagus dan menarik nie gan...........

    BalasHapus
  20. thanks sharenya gan.. sangat bermnfaat dan membantu..

    BalasHapus
  21. aku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu

    BalasHapus
  22. makasih info nya sangat menarik dan sangat bagus nie........

    BalasHapus
  23. Thanks for Sharing such valuable codes. this is a big help

    BalasHapus
  24. Tips dan Info menarik, boleh dicoba, Semoga berhasil

    BalasHapus
  25. Setelah membuka Wibesite ini, saya menemukan Artikel yang Amazing dan infonya boleh dicoba. Sukses selalu

    BalasHapus
  26. Saya menemukan Artikel hebat di wibesite ini jadi ingin coba Tipsnya. Semoga berhasil

    BalasHapus
  27. Artikel Menarik terutama Infonya, boleh dicoba. Salam sukses

    BalasHapus
  28. Saya senang setelah membaca Tips dan Artikelnya, harus dicoba.Semoga berhasil

    BalasHapus
  29. Info dan Tulisannya Amazing, boeh dicoba. Sukses selalu

    BalasHapus
  30. Tipsnya sangat Infomatif, wajib dicoba salam sukses

    BalasHapus
  31. Informasinya keren sekali, sangat bermanfaat.sukses selalu

    BalasHapus
  32. Terimakasih Banyak Tips dan Artikelnya, boleh dicoba. Salam sukses

    BalasHapus
  33. Terimakasih Artikelnya bermanfaat dan Infonya menambah Ilmu pengetahuan. Harus dicoba. Semoga berhasil

    BalasHapus
  34. Ilmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses

    BalasHapus
  35. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus
  36. Saat membaca Artikel dan Tipsnya yang benar benar menarik. Jadi ingin mencoba. Salam sukses selalu

    BalasHapus
  37. Wibesite yang menarik di dalamnya banyak Artikel dan Tips yang mengandung Ilmu Pengetahuan, Harus dicoba.Terimakasih

    BalasHapus
  38. Saya senang membaca Info dan Artikel yang di buat di Wibesite ini. Patut dicoba. Salam Sukses selalu.

    BalasHapus
  39. Terima Kasih, Tulisan yang sangat membantu. Salam Sukses!

    BalasHapus
  40. Setelah membaca Info dan Artikel, saya jadi ingin mencoba. Salam Sukses

    BalasHapus
  41. Terima kasih untuk tipsnya, saya mau coba semoga juga.

    BalasHapus
  42. Info menarik dan boleh sekali dicoba, Makasih buat infonya dan sukses selalu.

    BalasHapus
  43. I read your article..Thanks for sharing information.

    sseo honullu

    BalasHapus
  44. Ilmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses

    BalasHapus
  45. Artikel Menarik terutama Infonya, boleh dicoba. Salam sukses

    BalasHapus
  46. Terimakasih Tulisan dan Info yang bermanfaat. wajib dicoba. salam sukses selalu.

    BalasHapus
  47. Ilmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses

    BalasHapus
  48. Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

    BalasHapus
  49. Artikel yang Amazing, boleh dicoba. sukses selalu

    BalasHapus
  50. Terimaksih untuk Tips dan Artikel yang sangat Infomatif,m boleh dicoba.sukses selalu.

    BalasHapus
  51. Setelah membaca Info dan Tipsnya saya jadi ingin coba,semoga berhasil

    BalasHapus
  52. Artikel yang sangat Keren sekali banyak Tipsnya, boleh dicoba.salam sukses

    BalasHapus
  53. Tipsnya sangat Infomatif, wajib dicoba salam sukses

    BalasHapus
  54. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus
  55. Artikel Menarik terutama Infonya, boleh dicoba. Salam sukses

    BalasHapus
  56. Cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. terimaksih

    BalasHapus
  57. Wibesite yang menarik di dalamnya banyak Artikel dan Tips yang mengandung Ilmu Pengetahuan, Harus dicoba.Terimakasih

    BalasHapus
  58. Tulisan dan Tipsnya sangat bermanfaat dan Infomatif. wajib dicoba. sukses selalu.

    BalasHapus
  59. Saya senang setelah membaca Tips dan Artikelnya, harus dicoba.Semoga berhasil

    BalasHapus
  60. Tips yang cerdas cuma di Wibesite ini banyak kumpulan Artikel bagus. harus dicoba. salam sukses

    BalasHapus
  61. Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

    BalasHapus
  62. Artikel yang sangat Innovatif dan banyak Tipsnya. jadi ingin coba. semoga berhasil

    BalasHapus
  63. Terima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba

    BalasHapus
  64. Cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. terimakasih

    BalasHapus
  65. Terima kasih untuk tipsnya, saya mau coba semoga juga.

    BalasHapus
  66. Saya cari dibeberapa website dan dapat tipsnya di website ini, terima kasih, mau dicoba oleh saya.

    BalasHapus
  67. Amazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil

    BalasHapus
  68. Terima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba

    BalasHapus
  69. Dahsyat !!! nguntit lagi ach!!!

    BalasHapus
  70. wah ini yg miror text persisi kayak d photoshop :)

    BalasHapus
  71. Yang namanya @foredi kok banyak banget ya?

    BalasHapus
  72. @Rudy Azhar: He-eh, tapi fredi-nya beda-, mas. :) Tuh ada juga yang ejakulasi dini

    BalasHapus
  73. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus
  74. Saya cari dibeberapa website dan dapat tipsnya di website ini, terima kasih, mau dicoba oleh saya.

    BalasHapus
  75. Amazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil

    BalasHapus
  76. Terima Kasih, Tulisan yang sangat membantu. Salam Sukses!

    BalasHapus
  77. Terima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba

    BalasHapus
  78. aku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu

    BalasHapus
  79. Setelah membaca Info dan Artikel, saya jadi ingin mencoba. Salam Sukses

    BalasHapus
  80. Terima kasih atas Artikel dan Info yang selalu menambah wawasan.semoga sukses

    BalasHapus
  81. Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

    BalasHapus
  82. Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

    BalasHapus
  83. Cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. terimakasih

    BalasHapus
  84. Artikel yang sangat Innovatif dan banyak Tipsnya. jadi ingin coba. semoga berhasil

    BalasHapus
  85. Tulisan dan Tipsnya sangat bermanfaat dan Infomatif. wajib dicoba. sukses selalu.

    BalasHapus
  86. Tips yang cerdas cuma di Wibesite ini banyak kumpulan Artikel bagus. harus dicoba. salam sukses

    BalasHapus
  87. Saya senang setelah membaca Tips dan Artikelnya, harus dicoba.Semoga berhasil

    BalasHapus
  88. Info dan Tulisannya Amazing, boeh dicoba. Sukses selalu

    BalasHapus
  89. Tipsnya sangat Infomatif, wajib dicoba salam sukses

    BalasHapus
  90. Terimakasih Banyak Tips dan Artikelnya, boleh dicoba. Salam sukses

    BalasHapus
  91. Terimakasih Artikelnya bermanfaat dan Infonya menambah Ilmu pengetahuan. Harus dicoba. Semoga berhasil

    BalasHapus
  92. Ilmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses

    BalasHapus
  93. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus
  94. Saat membaca Artikel dan Tipsnya yang benar benar menarik. Jadi ingin mencoba. Salam sukses selalu

    BalasHapus
  95. Ide cemerlang saya dapat dari Artikel yang di buat di Wibesite ini, Wajib dicoba Tipsnya. Semoga berhasil

    BalasHapus
  96. Wibesite yang menarik di dalamnya banyak Artikel dan Tips yang mengandung Ilmu Pengetahuan, Harus dicoba.Terimakasih

    BalasHapus
  97. Saya senang membaca Info dan Artikel yang di buat di Wibesite ini. Patut dicoba. Salam Sukses selalu.

    BalasHapus
  98. Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

    BalasHapus
  99. Artikel yang benar benar sangat infomantif dan Kreatif. boleh dicoba, sukses selalu

    BalasHapus
  100. Terimakasih Info dan Artikelnya. Wajib dicoba

    BalasHapus
  101. Tipsnya boleh dicoba, Artikelnya sanagt bermanfaat.

    BalasHapus
  102. saya sangat senang membaca Artike ini amazingharus dicoba

    BalasHapus
  103. benar2 bermutu...ane coba pelan2 deh

    BalasHapus
  104. Blog yang sangat menarik, sangat berguna untuk menambah pengetahuan saya dan banyak orang ..
    terima kasih

    BalasHapus
  105. Lofty bye, considerate soul mate :)

    BalasHapus
  106. Good bye, sweet alternative other :)

    BalasHapus
  107. salam kenal gan..,ijin baca sampai selesai.tq

    BalasHapus