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 (membuat pita)
- Border/line press effect (membuat border/garis tenggelam)
- Folding angle (melipat sudut)
- Mirror effect on the text (efek cermin pada teks)
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>
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;
) dengantop: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%;
- Kiri elemen:
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>
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>
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>
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).
Terima kasih atas informasinya,
BalasHapusSukses selalu...
saya bru ketemu hari ini cara bikin pita sperti diatas. lumayan nih buat rancang template. hhe..
BalasHapusNice share sob..
@Armin:
BalasHapusBaru nemu, gan. Alhamdulillah, walaupun artikel tersebut bukan berita yang fresh, tapi bisa memberikan input kepada orang lain. Bisa juga dibaca melalui link creditnya, gan :)
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.
BalasHapusaduuhh masih newbie bgt saya kenal sama blog, ternyata perjalanan saya masih panjang..
BalasHapusmksih bnyak infonya, pasti sangat berguna buat nanti, :)
wahh ternyata masih banyak yang harus yang pelajari nich buat ngotak ngatik blog,,
BalasHapusthanks ya jadi terinspirasi nich
hmmm cukup rumit juga tuh.... thanks ya dah share ilmunya....
BalasHapusWah patut di coba tuh... Langsung praktek... Makasih gan infonya...
BalasHapusikut nyobain gan kode2 nya he2xx
BalasHapuswahhh keren banget nich postingannya.. tapi sayangnya ilmu ku masih dibawah nich tentang css....
BalasHapusboleh juga nich ilmu pengetahuannya,, thanks ya sangat bermanfaat sekali nich
BalasHapusWah, keren nih mantap :D
BalasHapus@Prasetyo, terima kasih Mas..
BalasHapusSebelumnya saya mohon maaf kalau tautan-tautan tersebut saya non-aktifkan.
ikutan lihat dunk,,, nyimak bljar,,, baru beljar nie,,
BalasHapusOB makin lama makin keren tutorialnya, gak kalah sama blog-blog tutorial lainnya, emang gua yakin blogger Indonesia bisa ngalahin blogger asing
BalasHapusIE8 mendukung pseudo element :before dan :after
BalasHapusRiboon 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.
Wah, lumayan buat nambah ilmu CSS. Ijin copy ya bro.
BalasHapusinfo yng sangat bermanfaat nih
BalasHapushehe
@Hendro Prayitno — Iya, IE8 telah mendukung pseudo elemen ini, makanya di coret (del) kata “tidak”nya, bang.
BalasHapusNanti dikoreksi (update) dah untuk kata/kalimat/paragraf yang dimaksud. Thank you, bang. :)
makasih infonya
BalasHapusnice share gan
BalasHapusmantap nie info nya sangat bagus dan menarik nie gan...........
BalasHapusthanks sharenya gan.. sangat bermnfaat dan membantu..
BalasHapusaku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu
BalasHapusmakasih info nya sangat menarik dan sangat bagus nie........
BalasHapusThanks for Sharing such valuable codes. this is a big help
BalasHapusTips dan Info menarik, boleh dicoba, Semoga berhasil
BalasHapusSetelah membuka Wibesite ini, saya menemukan Artikel yang Amazing dan infonya boleh dicoba. Sukses selalu
BalasHapusSaya menemukan Artikel hebat di wibesite ini jadi ingin coba Tipsnya. Semoga berhasil
BalasHapusArtikel Menarik terutama Infonya, boleh dicoba. Salam sukses
BalasHapusSaya senang setelah membaca Tips dan Artikelnya, harus dicoba.Semoga berhasil
BalasHapusInfo dan Tulisannya Amazing, boeh dicoba. Sukses selalu
BalasHapusTipsnya sangat Infomatif, wajib dicoba salam sukses
BalasHapusInformasinya keren sekali, sangat bermanfaat.sukses selalu
BalasHapusTerimakasih Banyak Tips dan Artikelnya, boleh dicoba. Salam sukses
BalasHapusTerimakasih Artikelnya bermanfaat dan Infonya menambah Ilmu pengetahuan. Harus dicoba. Semoga berhasil
BalasHapusIlmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses
BalasHapussetelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu
BalasHapusSaat membaca Artikel dan Tipsnya yang benar benar menarik. Jadi ingin mencoba. Salam sukses selalu
BalasHapusWibesite yang menarik di dalamnya banyak Artikel dan Tips yang mengandung Ilmu Pengetahuan, Harus dicoba.Terimakasih
BalasHapusSaya senang membaca Info dan Artikel yang di buat di Wibesite ini. Patut dicoba. Salam Sukses selalu.
BalasHapusTerima Kasih, Tulisan yang sangat membantu. Salam Sukses!
BalasHapusSetelah membaca Info dan Artikel, saya jadi ingin mencoba. Salam Sukses
BalasHapusTerima kasih untuk tipsnya, saya mau coba semoga juga.
BalasHapusInfo menarik dan boleh sekali dicoba, Makasih buat infonya dan sukses selalu.
BalasHapusI read your article..Thanks for sharing information.
BalasHapussseo honullu
Ilmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses
BalasHapusArtikel Menarik terutama Infonya, boleh dicoba. Salam sukses
BalasHapusTerimakasih Tulisan dan Info yang bermanfaat. wajib dicoba. salam sukses selalu.
BalasHapusIlmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses
BalasHapusMenarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses
BalasHapusArtikel yang Amazing, boleh dicoba. sukses selalu
BalasHapusTerimaksih untuk Tips dan Artikel yang sangat Infomatif,m boleh dicoba.sukses selalu.
BalasHapusSetelah membaca Info dan Tipsnya saya jadi ingin coba,semoga berhasil
BalasHapusArtikel yang sangat Keren sekali banyak Tipsnya, boleh dicoba.salam sukses
BalasHapusTipsnya sangat Infomatif, wajib dicoba salam sukses
BalasHapussetelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu
BalasHapusArtikel Menarik terutama Infonya, boleh dicoba. Salam sukses
BalasHapusCemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. terimaksih
BalasHapusWibesite yang menarik di dalamnya banyak Artikel dan Tips yang mengandung Ilmu Pengetahuan, Harus dicoba.Terimakasih
BalasHapusTulisan dan Tipsnya sangat bermanfaat dan Infomatif. wajib dicoba. sukses selalu.
BalasHapusSaya senang setelah membaca Tips dan Artikelnya, harus dicoba.Semoga berhasil
BalasHapusTips yang cerdas cuma di Wibesite ini banyak kumpulan Artikel bagus. harus dicoba. salam sukses
BalasHapusMenarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses
BalasHapusArtikel yang sangat Innovatif dan banyak Tipsnya. jadi ingin coba. semoga berhasil
BalasHapusTerima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba
BalasHapusCemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. terimakasih
BalasHapusTerima kasih untuk tipsnya, saya mau coba semoga juga.
BalasHapusSaya cari dibeberapa website dan dapat tipsnya di website ini, terima kasih, mau dicoba oleh saya.
BalasHapusAmazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil
BalasHapusTerima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba
BalasHapusDahsyat !!! nguntit lagi ach!!!
BalasHapusJadi tambah ilmu nih, trim
BalasHapuswah ini yg miror text persisi kayak d photoshop :)
BalasHapusYang namanya @foredi kok banyak banget ya?
BalasHapus@Rudy Azhar: He-eh, tapi fredi-nya beda-, mas. :) Tuh ada juga yang ejakulasi dini
BalasHapussetelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu
BalasHapusSaya cari dibeberapa website dan dapat tipsnya di website ini, terima kasih, mau dicoba oleh saya.
BalasHapusAmazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil
BalasHapusTerima Kasih, Tulisan yang sangat membantu. Salam Sukses!
BalasHapusTerima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba
BalasHapusaku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu
BalasHapusSetelah membaca Info dan Artikel, saya jadi ingin mencoba. Salam Sukses
BalasHapusTerima kasih atas Artikel dan Info yang selalu menambah wawasan.semoga sukses
BalasHapusMenarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses
BalasHapusMenarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses
BalasHapusCemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. terimakasih
BalasHapusArtikel yang sangat Innovatif dan banyak Tipsnya. jadi ingin coba. semoga berhasil
BalasHapusTulisan dan Tipsnya sangat bermanfaat dan Infomatif. wajib dicoba. sukses selalu.
BalasHapusTips yang cerdas cuma di Wibesite ini banyak kumpulan Artikel bagus. harus dicoba. salam sukses
BalasHapusSaya senang setelah membaca Tips dan Artikelnya, harus dicoba.Semoga berhasil
BalasHapusInfo dan Tulisannya Amazing, boeh dicoba. Sukses selalu
BalasHapusTipsnya sangat Infomatif, wajib dicoba salam sukses
BalasHapusTerimakasih Banyak Tips dan Artikelnya, boleh dicoba. Salam sukses
BalasHapusTerimakasih Artikelnya bermanfaat dan Infonya menambah Ilmu pengetahuan. Harus dicoba. Semoga berhasil
BalasHapusIlmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses
BalasHapussetelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu
BalasHapusSaat membaca Artikel dan Tipsnya yang benar benar menarik. Jadi ingin mencoba. Salam sukses selalu
BalasHapusIde cemerlang saya dapat dari Artikel yang di buat di Wibesite ini, Wajib dicoba Tipsnya. Semoga berhasil
BalasHapusWibesite yang menarik di dalamnya banyak Artikel dan Tips yang mengandung Ilmu Pengetahuan, Harus dicoba.Terimakasih
BalasHapusSaya senang membaca Info dan Artikel yang di buat di Wibesite ini. Patut dicoba. Salam Sukses selalu.
BalasHapusMenarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses
BalasHapusArtikel yang benar benar sangat infomantif dan Kreatif. boleh dicoba, sukses selalu
BalasHapusTerimakasih Info dan Artikelnya. Wajib dicoba
BalasHapusTipsnya boleh dicoba, Artikelnya sanagt bermanfaat.
BalasHapussaya sangat senang membaca Artike ini amazingharus dicoba
BalasHapusThanks :)
BalasHapusbenar2 bermutu...ane coba pelan2 deh
BalasHapusBlog yang sangat menarik, sangat berguna untuk menambah pengetahuan saya dan banyak orang ..
BalasHapusterima kasih
Lofty bye, considerate soul mate :)
BalasHapusGood bye, sweet alternative other :)
BalasHapussalam kenal gan..,ijin baca sampai selesai.tq
BalasHapusgreat info... :)
BalasHapusterima kasih... :)
BalasHapus