Belajar kode css memang tak ada habisnya, apalagi kini css sudah semakin jauh berkembang hingga css3 yang mampu membuat banyak fungsi baru yang jauh lebih menakjubkan karena mampu menggantikan beberapa peran javascript. Kemajuan baru kode css yang terus dipacu tak lepas dari upaya membuat kode css sebagai basis utama pengembangan desain blog/web. Perkembangan yang terakhir dari css3, bahkan sudah sampai pada titik dimana berbagai efek animasi dan 3 dimensi dalam berbagai rupa dapat diciptakan hingga blog/web semakin terlihat atraktif. Browser-browser besar juga saling berlomba untuk sesegera mungkin dapat mendukung penuh perkembangan yang terjadi pada kode css3.
Sekalipun detik ini css3 begitu terasa dominan perannya, namun karena setiap perkembangan yang terjadi pada kode css adalah saling melengkapi, maka mempelajari css2 dan css tetap menjadi dasar untuk memahami dan membangun desain web/blog. Salah satu yang perlu kita ketahui adalah cara membuat text link (membuat teks sebagai link).
Kode dasar text link
Text link adalah sebuah teks yang dibuat sebagai link dan berfungsi untuk menghubungkan sebuah dokumen dengan dokumen yang lain, baik dalam satu halaman dimana text link dibuat, dengan halaman yang lain dalam web/blog yang sama atau dengan halaman lain dari web/blog yang berbeda.<a href="URL" title="Title link here!">Text Link</a>
Menggabungkantag HTML lain dalam text link
Sebuah text link dapat dipadukan/dibangun bersama tag html lain yang masih berkaitan dengan tag yang berfungsi sebagai pembentuk/pembangun teks. Yang paling sering digunakan adalah tag h1 s/d h3, namun tidak menutup kemungkinan untuk menggunakan tag h4 s/d h6. Semuanya bergantung kebutuhan dan bagaimana tag tersebut kita bentuk dan fungsikan. Tag lain yang juga sering digunakan adalah "strong" dan "b".Contoh menggabungkan tag h1 s/ h4 dengan kode html tag "a" sebagai text link
<h1><a href="URL" title="Title link here!">Text Link</a></h1>
<h2><a href="URL" title="Title link here!">Text Link</a></h2>
<h3><a href="URL" title="Title link here!">Text Link</a></h3>
<h4><a href="URL" title="Title link here!">Text Link</a></h4>
Contoh menggabungkan tag "strong" atau "b" dengan kode html tag "a" (text link)
Menggunakan tag "strong" atau tag "b" bersama tag "a" hanya dilakukan ketika "kode default" text link (tag "a") menggunakan font "normal". Penambahan tag "strong atau b" dimaksudkan untuk membuat link menjadi teks tebal (bold). Penambahan tag dilakuan di dalam tag "a".Contoh:
<a href="URL" title="Title link here!"><strong>Text Link</strong></a>
<a href="URL" title="Title link here!"><b>Text Link</b></a>
Menggabungkan tag "i" atau "em" dengan kode html tag "a" (text link)
Berfungsi untuk membentuk text link sebagai text dengan style "miring" (italic). Penambahan tag sebaiknya dilakukan diantara tag "a".Contoh :
<a href="URL" title="Title link here!"><i>Text Link</i></a>
<a href="URL" title="Title link here!"><em>Text Link</em></a>
Membuat text link dengan kode css
Semua desain blog/web sudah menggunakan kode css untuk membuat karakter text link. Tutorial penggunaan kode css untuk membuat karakter yang diinginkan bagi text link ini dimaksudkan agar pembaca bisa mengetahui bagaimana text link dalam blog/web yang dikelola dapat diketahui sekaligus bisa melakukan beberapa perubahan atau penambahan kode baru agar karakter text link bisa dirubah sesuai keinginan.Kode CSS pembangun text link dalam blog/web
Di bawah ini adalah kode css yang umum digunakan untuk membuat sebuah text link dalam web/blog.
a:link{
font-weight:bold;
color:#900;
text-decoration:none;
a:visited{
color:#888;
text-decoration:none;
}
a:hover{
color:#f00;
text-decoration:underline;
}
Beberapa perubahan atau penambahan kode baru (properti css baru) dapat bebas dilakukan agar text link terlihat lebih baik dan lebih sesuai dengan background halaman blog/web. Kode css baru di bawah ini adalah contoh penambahan properti css baru yang berupa css3 agar link mempunyai efek hover yang lebih cantik.
a:link{
font-weight:bold;
color:#900;
text-decoration:none;
transition:color 1s;
-o-transition:color 1s ease-in-out;
-ms-transition:color 1s ease-in-out;
-moz-transition:color 1s ease-in-out;
-webkit-transition:color 1s ease-in-out;
}
a:visited{
color:#888;
text-decoration:none;
}
a:hover{
color:#f00;
text-decoration:underline;
}Di bawah telah disertakan demo text link dengan melibatkan tag h1 s/d h6 dan tag b, strong, i dan em serta property css termasuk css3 transition property.
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar