Selamat Hari Raya Idul Fitri 1432 H
<ul class="shift">
<li><a href="#">Sorot ini</a></li>
<li><a href="#">Sorot tautan ini</a></li>
</ul>
.shift {
list-style: none;
display: inline-block;
}
.shift li {
background: orangered;
width: 0%;
display: block;
-webkit-transition: all 0.125s ease-in-out;
-moz-transition: all 0.125s ease-in-out;
transition: all 0.125s ease-in-out;
}
.shift li:hover {
width: 100%;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.shift li a {
text-transform: uppercase;
display: block;
color: #000;
font-size: 1em;
margin: 0.5em;
padding: 0.5em;
text-decoration: none;
white-space: nowrap;
}
<ul class="shift">
<li><a href="#">Sorot ini</a></li>
<li><a href="#">Sorot tautan ini</a></li>
</ul>
.shift {
list-style: none;
display: inline-block;
}
.shift li {
background: orangered;
width: 0%;
display: block;
-webkit-transition: all 0.125s ease-in-out;
-moz-transition: all 0.125s ease-in-out;
transition: all 0.125s ease-in-out;
}
.shift li:hover {
width: 100%;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.shift li a {
text-transform: uppercase;
display: block;
color: #000;
font-size: 1em;
margin: 0.5em;
padding: 0.5em;
text-decoration: none;
white-space: nowrap;
}
<data:postCommentMsg/>
<img border="0" src="http://urlgambar.com/gambarcomment.jpg" />
<data:postCommentMsg/>
<img border="0" src="http://urlgambar.com/gambarcomment.jpg" />
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
.
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.
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>
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:
#element2 h2:before
dengan properti yang sama. Kemudian ganti kode yang berwarna merah (bottom:0;
) dengan top:0;
.top:0;
left:0;
border-left:1px solid #c3c3c3;
border-right:1px solid #f1f1f1;
height:100%;
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>
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>
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>
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).
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
.
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.
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>
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:
#element2 h2:before
dengan properti yang sama. Kemudian ganti kode yang berwarna merah (bottom:0;
) dengan top:0;
.top:0;
left:0;
border-left:1px solid #c3c3c3;
border-right:1px solid #f1f1f1;
height:100%;
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>
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>
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>
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).
<span><a expr:href='"https://www.blogger.com/comment.g?blogID=ID-BLOG-MU&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;'>Reply</a></span>2. Cari ID blog anda. Dari dashboard, buka halaman design, comment, post, atau yang lainnya. Lihat ke kotak url di bagian atas browser. Lihat bagian belakang url. Di bagian itu akan terlihat ID blog.
http://www.blogger.com/post-create.g?blogID=3293775847481849705Di bagian berwarna merah itulah ID blog anda. Copy angka ID blog tersebut. Jangan sampai ada kekeliruan dalam meng-copy.
<data:commentPostedByMsg/>
<img src='http://urlgambar.com/gambar.jpg' />Selengkapnya, copy kode berikut:
<span><a expr:href='"https://www.blogger.com/comment.g?blogID=ID-BLOG-MU&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'><img border="0" src='http://urlgambar.com/gambar.jpg' style='float:right;padding:4px;' title="Balas Komentar Ini"/></a></span>Ganti dengan url gambar tombol/icon reply untuk blog.
<span><a expr:href='"https://www.blogger.com/comment.g?blogID=ID-BLOG-MU&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;'>Reply</a></span>2. Cari ID blog anda. Dari dashboard, buka halaman design, comment, post, atau yang lainnya. Lihat ke kotak url di bagian atas browser. Lihat bagian belakang url. Di bagian itu akan terlihat ID blog.
http://www.blogger.com/post-create.g?blogID=3293775847481849705Di bagian berwarna merah itulah ID blog anda. Copy angka ID blog tersebut. Jangan sampai ada kekeliruan dalam meng-copy.
<data:commentPostedByMsg/>
<img src='http://urlgambar.com/gambar.jpg' />Selengkapnya, copy kode berikut:
<span><a expr:href='"https://www.blogger.com/comment.g?blogID=ID-BLOG-MU&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'><img border="0" src='http://urlgambar.com/gambar.jpg' style='float:right;padding:4px;' title="Balas Komentar Ini"/></a></span>Ganti dengan url gambar tombol/icon reply untuk blog.
0 comments:
Post a Comment