Membuat Style pada Link dengan CSS3

Sepertinya sudah lama saya tidak membuat postingan disini, kali ini saya memberikan trick menggunakan CSS3 untuk link saat di sorot (hover efek). Sebenarnya sudah ada beberapa yang sempat saya bagikan di blog saya dengan judul <a href="http://rudyazhar.com/2011/macam-efek-link-dengan-css3/">Macam Efek Link Dengan CSS3</a>, dan kali ini saya coba memberikan sesuatu yang baru.<br /><br /><a name='more'></a><br /><br /><br /><br />Kita buat Mark-up HTML terlebih dahulu :<br /><br /><br /><br /><pre><ul class="shift"><br /> <li><a href="#">Sorot ini</a></li><br /> <li><a href="#">Sorot tautan ini</a></li><br /></ul><br /></pre><br /><br />Sesudah itu mari kita buat CSS-nya :<br /><br /><br /><br /><pre>.shift {<br /> list-style: none;<br /> display: inline-block;<br />}<br /><br />.shift li {<br /> background: orangered;<br /> width: 0%;<br /> display: block;<br /> -webkit-transition: all 0.125s ease-in-out;<br /> -moz-transition: all 0.125s ease-in-out;<br /> transition: all 0.125s ease-in-out;<br />}<br /><br />.shift li:hover {<br /> width: 100%;<br /> -webkit-transition: all 0.25s ease-in-out;<br /> -moz-transition: all 0.25s ease-in-out;<br /> transition: all 0.25s ease-in-out;<br />}<br /><br />.shift li a {<br /> text-transform: uppercase;<br /> display: block;<br /> color: #000;<br /> font-size: 1em;<br /> margin: 0.5em;<br /> padding: 0.5em;<br /> text-decoration: none;<br /> white-space: nowrap;<br />}<br /></pre><br /><br />Berikut hasilnya yang sudah jadi, coba sorot tulisan 'Sorot ini' lalu lihat efeknya :<br /><br /><br /><br /><ul class="shift"> <li><a href="#">Sorot ini</a></li><br /> <li><a href="#">Sorot tautan ini</a></li><br /></ul><br /><br /><style type='text/css'><br />.shift {<br /> list-style: none;<br /> display: inline-block;<br />}<br /><br />.shift li {<br /> background: orangered;<br /> width: 0%;<br /> display: block;<br /> -webkit-transition: all 0.125s ease-in-out;<br /> -moz-transition: all 0.125s ease-in-out;<br /> transition: all 0.125s ease-in-out;<br />}<br /><br />.shift li:hover {<br /> width: 100%;<br /> -webkit-transition: all 0.25s ease-in-out;<br /> -moz-transition: all 0.25s ease-in-out;<br /> transition: all 0.25s ease-in-out;<br />}<br /><br />.shift li a {<br /> text-transform: uppercase;<br /> display: block;text-shadow:none;<br /> color: #000;<br /> font-size: 1em;<br /> margin: 0.5em;<br /> padding: 0.5em;<br /> text-decoration: none;<br /> white-space: nowrap;<br />}<br /></style><br /><br /><br /><br />Keren kan, cocok untuk membuat efek pada sidebar ataupun footer blog kita. Ada tanggapan ?<br /><br />

Posted by Hii Sekai

Styling menggunakan CSS pseudo-element

<p>Pada posting terdahulu, kita juga pernah membicarakan tentang CSS pseudo-element ini, namun hanya terbatas pada “<a href="http://optimasi-blog.blogspot.com/2011/07/styling-unordered-ordered-lists.html">styling ordered dan unordered list</a>”. Selain itu, mungkin kita pernah melihat bentuk teks di dalam elemen atau image berbentuk pita (<em>ribbon</em>), kemudian garis (<em>border</em>) yang memiliki efek tenggelam (<em>press</em>), bentuk melipat di sudut sebuah elemen <span class="amp">&</span> mirror text effect (efek cermin pada teks).<a name='more'></a> Semua dapat dilakukan juga dengan menggunakan <abbr title="Cascading Style Sheets">CSS</abbr> pseudo-element <mark><code>:before</code></mark> dan/atau <mark><code>:after</code></mark>.</p> <h1>Credit</h1> <p>Untuk penggunaan <a href="http://rudyazhar.com/2011/buat-3d-ribbon-dengan-css">ribbon</a> <span class="amp">&</span> <a href="http://rudyazhar.com/2011/garis-dua-warna-dengan-css3/"><em>border</em> ber-efek <em>tenggelam</em></a> dapat Anda baca selengkapnya di blog <strong>Rudy Azhar</strong>. Dan salah satu nilai plus—pada form komentar ditambahkan oleh <a href="http://ardianzzz.com/">Ardianzzz</a>—yang di <em>coding</em> dengan demikian menarik menggunakan CSS pseudo-element (<a href="http://ardianzzz.com/files/me.html" title="Demo ribbon by Ardian Trimurti">demo ribbon</a>).</p> <p>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 <span class="amp">&</span> penulis akan segera melakukan update pada link kredit ini.</p> <h1 id="index-content">Indeks Konten</h1> <ul><li><a href="#element1"><em>Ribbon</em> (membuat pita)</a></li> <li><a href="#element2"><em>Border/line press effect</em> (membuat border/garis tenggelam)</a></li> <li><a href="#element3"><em>Folding angle</em> (melipat sudut)</a></li> <li><a href="#element4"><em>Mirror effect on the text</em> (efek cermin pada teks)</a></li></ul><div id="element1"><h2>Ribbon</h2> <p>Pada elemen ini Anda melihat sub judul “Ribbon” dalam sebuah pita (<em>ribbon</em>). Adapun CSS yang digunakan seperti yang tampak di bawah ini.</p> <pre><code>.element {<br /><span style="color:red;font-weight:bold">background:#e1e1e1;</span><br />padding:1.5em 2em;<br />-moz-border-radius:1em;<br />-webkit-border-radius:1em;<br />border-radius:1em<br />}<br />.element h2 {<br /><span style="color:blue;font-weight:bold">background:#f90;</span><br /><span style="color:green;font-weight:bold">border-bottom:.05em solid #666;</span><br />/*-- <a href="http://optimasi-blog.blogspot.com/2010/06/rounded-corner-membuat-sudut-menjadi.html">Rounded corner</a> kiri atas --*/<br />-moz-border-radius:.25em 0 0 0;<br />-webkit-border-radius:.25em 0 0 0;<br />border-radius:.25em 0 0 0;<br />display:block;<br />left:-1.75em;<br />padding:.25em 0 .25em 1.75em;<br /><span style="color:purple;font-weight:bold">position:relative;</span><br />width:60%<br />}<br />/* Mulai membentuk ribbon */<br />.element h2:after, .element h2:before {<br />content:" ";<br />display:block;<br /><span style="color:purple;font-weight:bold">position:absolute</span><br />}<br />/* Ribbon kanan */<br />.element h2:after {<br />top:0;<br />right:0;<br /><span style="color:blue;font-weight:bold">border-top:.85em solid #f90;</span><br /><span style="color:red;font-weight:bold">border-right:.75em solid #e1e1e1;</span><br /><span style="color:blue;font-weight:bold">border-bottom:.80em solid #f90;</span><br /><span style="color:blue;font-weight:bold">border-left:.75em solid #f90</span><br /><span style="color:green;font-weight:bold">box-shadow:0 .05em 0 #666;</span><br />}<br />/* Ribbon kiri */<br />.element h2:before {<br /><span style="font-weight:bold">bottom:-.25em;</span><br />left:0;<br />border-top:none;<br />border-right:none;<br /><span style="color:green;font-weight:bold">border-bottom:.25em solid #666;</span><br /><span style="color:green;font-weight:bold">border-left:.40em solid #666;</span><br />/*-- Rounded corner kiri bawah --*/<br />-moz-border-radius:0 0 0 .25em;<br />-webkit-border-radius:0 0 0 .25em;<br />border-radius:0 0 0 .25empx;<br />z-index:1<br />}</code></pre> <p>Dan berikut kode <abbr title="HyperText Markup Language">HTML</abbr> yang menyertainya.</p> <pre style="margin-bottom:0;"><code><div class="element"><br /><h2>Ribbon</h2> <p>Pada elemen ini Anda melihat sub judul “Ribbon” dalam sebuah pita (<em>ribbon</em>). Adapun CSS yang digunakan seperti yang tampak di bawah ini…</p><br /></div></code></pre></div> <p style="text-align:center">—<a href="#index-content">Kembali ke indeks konten</a>—</p> <style type="text/css"><br />#element1 {<br />background:#e1e1e1;<br />padding:1.5em 2em;<br />margin-bottom:1.7143em;<br />-moz-border-radius:1em;<br />-webkit-border-radius:1em;<br />border-radius:1em;<br />}<br />#element1 h2 {<br />background:#f90;<br />border-bottom:.05em solid #666;<br />-moz-border-radius:.25em 0 0 0;<br />-webkit-border-radius:.25em 0 0 0;<br />border-radius:.25em 0 0 0;<br />display:block;<br />left:-1.75em;<br />padding:0.25em 0 0.25em 1.75em;<br />position:relative;<br />width:60%;<br />}<br />#element1 h2:after, #element1 h2:before {<br />content:" ";<br />display:block;<br />position:absolute;<br />}<br />#element1 h2:after {<br />top:0;<br />right:0;<br />border-top:0.85em solid #f90;<br />border-right:0.75em solid #e1e1e1;<br />border-bottom:0.80em solid #f90;<br />border-left:0.75em solid #f90;<br />box-shadow:0 .05em 0 #666;<br />}<br />#element1 h2:before {<br />bottom:-0.25em;<br />left:0;<br />border-top:none;<br />border-right:none;<br />border-bottom:.25em solid #666;<br />border-left:.40em solid #666;<br />-moz-border-radius:0 0 0 .25em;<br />-webkit-border-radius:0 0 0 .25em;<br />border-radius:0 0 0 .25empx;<br />z-index:1;<br />}<br />{</style> <div id="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> <pre><code>.element2 h2 {<br />padding:0 0 0.25em;<br /><span style="color:purple;font-weight:bold">position:relative;</span><br />width:100%<br />}<br />.element2 h2:after {<br />content:" ";<br /><span style="color:purple;font-weight:bold">position:absolute;</span><br /><span style="color:red;font-weight:bold">bottom:0;</span><br /><span style="color:blue;font-weight:bold">left:0;</span><br />border-top: 1px solid #c3c3c3; /* Warna seharusnya lebih tua dari background */<br />border-bottom: 1px solid #f1f1f1; /* Warna seharusnya lebih muda dari background */<br /><span style="color:blue;font-weight:bold">width:100%</span><br />}</code></pre> <p>Catatan:<br/><ul><li>Atribut width (warna biru) tidak harus 100%. Artinya jika width bernilai 80% maka left bernilai 10% (letak garis di tengah elemen).</li> <li>Apabila ingin menambahkan border press di atas h2, tambahkan <code>#element2 h2:before</code> dengan properti yang sama. Kemudian ganti kode yang berwarna merah (<code>bottom:0;</code>) dengan <code>top:0;</code>.</li> <li>Pada kasus lain, mungkin kita ingin meletakkan border di kanan atau kiri elemen. <ul><li>Kiri elemen: <pre><code>top:0;<br /><span style="color:green;font-weight:bold">left:0;</span><br />border-left:1px solid #c3c3c3;<br />border-right:1px solid #f1f1f1;<br />height:100%;</code></pre></li> <li>Kanan elemen: <pre><code>top:0;<br /><span style="color:green;font-weight:bold">right:0;</span><br />border-left:1px solid #c3c3c3;<br />border-right:1px solid #f1f1f1;<br />height:100%;</code></pre></li></ul></li></ul><p>Sedangkan kode HTML pada elemen ini adalah sebagai berikut.</p> <pre style="margin-bottom:0"><code><div class="element2"><br /><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><br /></div></code></pre></div> <p style="text-align:center">—<a href="#index-content">Kembali ke indeks konten</a>—</p> <style type="text/css"><br />#element2 {<br />background: -webkit-gradient(linear, left top, left center, from(#e1e1e1), to(rgba(250,250,250,1)));<br />background: -moz-linear-gradient(top, #e1e1e1, rgba(250,250,250,1));<br />margin-bottom:1.7145em;<br />padding:1.5em 2em;<br />}<br />#element2 h2 {<br />padding:0 0 0.25em;<br />position:relative;<br />}<br />#element2 h2:after {<br />content:" ";<br />position:absolute;<br />bottom:0;<br />left:0;<br />border-top: 1px solid #c3c3c3;<br />border-bottom: 1px solid #f1f1f1;<br />width:100%;<br />}<br /></style> <div id="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> <pre><code>.element3 {<br />background:-webkit-gradient(linear, right top, left center, from(#e1e1e1), to(#fff));<br />background:-moz-linear-gradient(right, #e1e1e1, #fff);<br />border:1px solid #c3c3c3;<br />padding:1.5em 2em;<br /><span style="color:purple;font-weight:bold">position:relative</span><br />}<br />.element3:before, .element3:after {<br />content:" ";<br />display:block;<br /><span style="color:purple;font-weight:bold">position:absolute;</span><br />/*-- Memutar elemen 45 derajat (searah jarum jam) --*/<br />-moz-transform:rotate(45deg);<br />-webkit-transform:rotate(45deg);<br />-o-transform:rotate(45deg);<br />transform:rotate(45deg)<br />}<br />/* Menutup sudut kiri atas elemen berbentuk segitiga */<br />.element3:after {<br /><span style="color:red;font-weight:bold">top:-2em;<br />right:-2em;</span><br />/*-- Warna border sama dengan warna body (di luar elemen) --*/<br />border-top:2em solid #fff;<br />border-right:2em solid #fff;<br />border-bottom:2em solid #fff;<br />border-left:2em solid #fff<br />}<br />/* Membuat segitiga efek melipat */<br />.element3:before {<br /><span style="color:red;font-weight:bold">top:0.75em;<br />right:0.75em;</span><br />/*-- Warna border sama dengan warna elemen (kecuali border atas, lebih tua/gelap) --*/<br />border-top:2em solid #c3c3c3;<br />border-right:2em solid #e1e1e1;<br />border-bottom:2em solid #e1e1e1;<br />border-left:2em solid #e1e1e1;<br />z-index:1<br />}</code></pre> <p>Di bawah ini merupakan kode HTML-nya.</p> <pre style="margin-bottom:0"><code><div class="element3"><br /><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><br /></div><br /></code></pre></div> <p style="text-align:center">—<a href="#index-content">Kembali ke indeks konten</a>—</p> <style type="text/css">#element3 {<br />background: -webkit-gradient(linear, right top, left center, from(#e1e1e1), to(#fff));<br />background: -moz-linear-gradient(right, #e1e1e1, #fff);<br />border:1px solid #c3c3c3;<br />margin-bottom:1.7143em;<br />padding:1.5em 2em;<br />position:relative;<br />}<br />#element3:before, #element3:after {<br />content:" ";<br />display:block;<br />position:absolute;<br />-moz-transform:rotate(45deg);<br />-webkit-transform:rotate(45deg);<br />-o-transform:rotate(45deg);<br />transform:rotate(45deg);<br />}<br />#element3:after {<br />border-top:2em solid #fff;<br />border-right:2em solid #fff;<br />border-bottom:2em solid #fff;<br />border-left:2em solid #fff;<br />top:-2em;<br />right:-2em;<br />}<br />#element3:before {<br />border-top:2em solid #c3c3c3;<br />border-right:2em solid #e1e1e1;<br />border-bottom:2em solid #e1e1e1;<br />border-left:2em solid #e1e1e1;<br />top:0.75em;<br />right:0.75em;<br />z-index:1;<br />}<br /></style> <div id="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> <pre><code>.element4 h2 {<br />font-size:2em;<br />font-weight:bold;<br /><span style="color:purple;font-weight:bold">position: relative</span><br />}<br />.element4 h2:before, .element4 h2:after {<br />display:block;<br /><span style="color:purple;font-weight:bold">position:absolute;</span><br /><span style="color:red;font-weight:bold">bottom:-0.75em;</span> /* You should change this value to fit your font */<br />left:0;<br />right:0<br />}<br />.element4 h2:before {<br /><span style="color:blue;font-weight:bold">content: "Mirror Text";</span><br />opacity:.4;<br />/* This is how the text is flipped vertically */<br />-webkit-transform: scaleY(-1);<br />-moz-transform: scaleY(-1);<br />-o-transform: scaleY(-1)<br />}<br />.element4 h2:after {<br />/* Fading using CSS gradient */<br />/* Don't forget to change the colors to your background color */<br />background: -webkit-gradient(linear, left top, left center, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));<br />background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));<br />/* I left out the `filter` property,<br />because IE doesn't know `:before` and `:after` pseudo-elements anyway */<br />content: " ";<br /><span style="color:red;font-weight:bold">height:0.75em</span><br />}</code></pre> <p>Catatan:<br/>Beberapa kode informasi (antara /*…*/) sengaja tidak dirubah/dihapus untuk memudahkan—pelacakan—klaim link kredit nantinya. Background elemen ini bernilai <code>#eeeeee</code> sama dengan <code>rgb(238,238,238)</code> sama dengan <code>rgba(238,238,238,1)</code>.</p> <p>Adapun kode HTML yang menyertainya adalah sebagai berikut.</p> <pre><code><div class="element4"><br /><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><br /></div></code></pre></div> <p style="text-align:center">—<a href="#index-content">Kembali ke indeks konten</a>—</p> <style type="text/css">#element4 h2 {<br />font-size:2em;<br />font-weight:bold;<br />position: relative;<br />}<br />#element4 h2:before, #element4 h2:after {<br />display:block;<br />position:absolute;<br />bottom:-0.75em; /* You should change this value to fit your font */<br />left:0;<br />right:0;<br />}<br />#element4 h2:before {<br />content: "Mirror Text";<br />opacity:.4;<br />/* This is how the text is flipped vertically */<br />-webkit-transform: scaleY(-1);<br />-moz-transform: scaleY(-1);<br />-o-transform: scaleY(-1)<br />}<br />#element4 h2:after {<br />/* Fading using CSS gradient */<br />/* Don't forget to change the colors to your background color */<br />background: -webkit-gradient(linear, left top, left center, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));<br />background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));<br />/* I left out the `filter` property,<br />because IE doesn't know `:before` and `:after` pseudo-elements anyway */<br />content: " ";<br />height:0.75em;<br />}<br /></style> <h1>Generalisasi</h1> <p><em>Styling</em> menggunakan CSS pseudo-element <mark><code>:before</code></mark> dan/atau <mark><code>:after</code></mark> di atas, mungkin hanya sebagian kecil dari gaya-gaya pengkodean lain. Namun tidak ada salahnya jika kita mengenal <span class="amp">&</span> 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.<p> <p>Note:<br/>Sampai tulisan ini diterbitkan CSS pseudo-element <mark><code>:before</code></mark> dan/atau <mark><code>:after</code></mark> <del>belum</del> didukung oleh peramban IE (<em>Internet Explorer</em>).</p>

Posted by Hii Sekai