10 Teknik CSS yang Menantang Tapi Menakjubkan

() translation by (you can also view the original English article)

Kebanyakan desainer dan pengembang web hanya menggores permukaan bahasa ampuh yaitu CSS. Dalam hal bahasa pemrograman, CSS memiliki kurva belajar yang cukup sederhana. Itu tidak berarti CSS bukan bahasa yang hebat. Terkadang hal kecil itulah yang membuat perbedaan besar dalam desain situs web.

Dalam posting ini kita akan menguraikan 10 teknik CSS yang mengagumkan untuk para pengembang web yang mengetahui tentang mereka.

Ada banyak teknik CSS dan hacks di luar sana untuk desainer yang baru memulai. Semua orang tahu tentang trik rutin seperti:

Trik sederhana ini semua baik dan sangat penting, tapi hari ini kita akan melihat beberapa teknik CSS yang sedikit lebih menantang. Mereka bukan teknik biasa yang akan Anda ajarkan pada pemula CSS. 10 trik ini sedikit lebih sulit, tapi jika dilakukan dengan baik mereka bisa menambahkan sesuatu yang spesial ke tata letak situs web Anda.

1. Memfokuskan dan Mengaburkan Item Menu

Mari kita mulai dengan teknik yang tidak terlalu maju, untuk pemanasan kita. Memfokuskan dan mengaburkan item menu navigasi adalah cara yang ampuh untuk menambahkan perhatian pada item yang dipilih. Teknik ini berbeda dengan rollover gambar tradisional karena alih-alih mengubah kondisi elemen yang di-hover, ia mengubah unsur-unsur yang tidak dipilih.

Inti dari efek ini adalah rollover sederhana, dengan menggunakan gambar untuk setiap tautan. Setiap gambar berlebar 600px, dengan 3 negara kondisi berbeda: static, active dan di-roll over.

Contoh gambar item menu

Ini akan membuat setiap tombol navigasi lebar 200px, sehingga saat tombol di-roll over, setiap item navigasi lainnya akan bergeser -200px untuk mengubah gambar latar belakang mereka. Ini adalah efek bagus yang sangat berbeda dengan kebanyakan menu navigasi berbasis rollover.

2. Rollover Menu Ilustratif

Tata letak berbasis ilustrasi adalah tren terbaru dalam desain web, dan untuk alasan yang baik. Ilustrasi yang indah bisa menjadi tata letak web yang sangat menarik. Namun terkadang tata letak yang diilustrasikan memiliki waktu yang sulit untuk menampilkan animasi pada halaman, karena sebagian besar desain didasarkan pada gambar. Kita bisa menggunakan sedikit CSS dalam navigasi untuk menganimasikan ilustrasinya.

WebDesignerWall memiliki tutorial yang sangat bagus yang tidak hanya menunjukkan cara menambahkan animasi ke navigasi, tapi juga bagaimana cara membuat keseluruhan sistem navigasi di Photoshop. Produk jadi adalah sistem navigasi yang menyenangkan dan semarak yang membuat desain lebih hidup dan menarik. Bagian yang sulit untuk mengikuti contoh adalah tidak bekerja dengan CSS, namun membuat perubahan pada Photoshop agar rollover-nya tampil terhubung.

3. Tweak Tipografi Tingkat Lanjut dengan CSS

Tipografi terkadang diabaikan dalam CSS. Namun, Anda bisa melakukan banyak hal kreatif untuk teks hanya dengan menambahkan beberapa CSS. Sebagai contoh:

Refleksi

Anda bisa melewati javascript dan langsung menuju CSS untuk membuat refleksi dalam teks. Memang, tidak terlihat cukup elegan seperti solusi javascript, namun memiliki potensi untuk menjadi cukup bagus.

Judul yang Mengalir

Anda dapat membuat judul bagus yang mengalir bersama dengan menggunakan spasi huruf rendah untuk karakter pertama dalam rentang waktu tertentu. Catatan: Tidak semua kombinasi karakter terlihat fantastis.

Karakter Drop

Anda bahkan bisa membuat karakter drop (lihat "g"?) dengan memanfaatkan ketinggian garis yang rendah dan border bawah.

Anda dapat melihat banyak teknik CSS lanjutan lainnya untuk teks di blog 3.7Crea.tv.

4. Kolom yang Disorot Secara Dinamis Dalam Tabel

Crazy Egg memiliki desain yang sangat intuitif untuk halaman pendaftaran mereka. Alih-alih membuat pengguna mengklik ke halaman lain untuk memulai proses pendaftaran, Crazy Egg menggunakan CSS dan sentuhan javascript untuk membuat kolom tabel meluncur rapi ke kiri sementara formulir pendaftaran muncul di tempat kolom lainnya. Cukup berguna jika Anda ingin pengunjung segera memulai proses pendaftaran, semuanya berada dalam ruang yang sangat kecil.

Sementara tabel adalah sesuatu yang biasanya ingin dihindari oleh desainer modern, mereka bisa menjadi sempurna untuk mengatur banyak data. Tabel harga adalah tempat yang tepat untuk memanfaatkan tabel, dan membuat mereka lebih menarik tentu membantu pengalaman pengguna.

Ask the CSS guy memiliki tutorial bagus yang mereplikasi kode, lengkap dengan contoh nyata dan sumber yang bisa diunduh.

5. Variabel Dinamis dalam CSS

CSS tidak terlalu kuat dengan bahasa tersendiri. Tentu, Anda bisa melakukan banyak trik bagus dengannya, tapi itu tetap hanya bahasa untuk gaya. Anda tidak dapat menyimpan variabel atau melakukan hal lain yang dapat dilakukan oleh bahasa dinamis seperti PHP. Namun, Anda dapat menggunakan bahasa dinamis untuk menghasilkan CSS, memberi mereka variabel dinamis.

Dengan menggunakan fungsi header() di PHP, mungkin saja PHP mencetak CSS. Anda dapat menggunakan array yang berbeda untuk menampilkan berbagai gaya CSS yang berbeda. Sebagai contoh, berikut adalah skema warna default di CSS, output di PHP:


$persistent = array(
'bgmast' => 'bbd9ee',
'fgmast' => '4d4d4d',
'bgmenu' => 'e7e4d3',
'fgmenu' => '444',
'bgcont' => 'fff',
'fgcont' => '444' );

Dan berikut ini skema warna alternatif:


$alternate1 = array(
'bgmast' => 'ddb',
'fgmast' => '000',
'bgmenu' => 'aa7',
'fgmenu' => 'fff',
'bgcont' => 'fff',
'fgcont' => '333'
);

Jika Anda ingin menunjukkan skema warna alternatif yang hanya akan Anda ubah antara $persistent dan $alternate1 untuk menukar gaya.

Simak tutorial lengkap di Digital Web Magazine untuk penjelasan lebih mendalam tentang perpindahan gaya dinamis dengan CSS dan PHP.

6. Menarik Kutipan dengan CSS

Menarik kutipan dari teks halaman web adalah teknik desain hebat yang dapat menambahkan elemen gaya yang bagus ke situs web. Banyak majalah, ebooks dan publikasi online lainnya menggunakan kutipan untuk memisahkan sedikit teks yang paling penting sehingga mata pembaca tertarik padanya. Kutipan pada dasarnya adalah sepotong hiasan untuk pembaca. Berikut adalah beberapa cara perancang bisa menarik kutipan dari artikel tersebut.

Secara Manual

Desainer bisa secara manual membuat div ekstra yang terlihat seperti:

1
2	<div class="quote">
3	This is the quoted text, floated right with some padding.
4	</div>

dengan gaya yang terlihat seperti:


.quote {
float:right;
padding-left:15px;
....

dengan gaya lain yang mungkin dibutuhkan. Secara manual membuat div ekstra bukanlah ide bagus karena membutuhkan lebih banyak waktu dan menambahkan konten duplikat ke sumbernya.

Javascript

Anda juga bisa memanfaatkan javascript untuk menarik kutipan dari teks. Meskipun ini menghilangkan masalah konten duplikat dan tidak memerlukan kode manual div lain, Anda masih harus menyertakan sedikit javascript.

Designmeme memiliki tutorial yang sangat bagus tentang bagaimana menarik kutipan dengan hanya menggunakan sedikit elemen pseudo CSS dan CSS 2 :before untuk menampilkan kutipan.

<p class="pullquote" title="Only this, and nothing more.">Once upon a midnight dreary, while I pondered weak and weary, Over many a quaint and curious volume of forgotten lore, While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. ‘'Tis some visitor,’ I muttered, ‘tapping at my chamber door – Only this, and nothing more.’</p>

Inilah kelas pullquote:


.pullquote {
width:550px;
line-height:1.5;
font-size:1.2em;
text-align:justify;
}

bersama dengan kelas pseudo :before:



.pullquote:before {
content:"201C" attr(title) "201D";
font-family: "Times New Roman", Times, serif;
font-size:1.2em;
text-align:center;
background:#333;
color:#fff;
display:block;
float:left;
width:7em;
margin: 0.25em 1em 0.5em 0;
padding:1em;
}

Sekarang setiap kali Anda memiliki sebuah paragraf dengan kelas "quote", teks apa pun yang Anda masukkan ke atribut judul akan muncul di kotak kutipan (dengan kutipan keriting).

Anda bisa membaca sisa tutorial menarik kutipan CSS yang bagus di Designmeme.

7. Mengubah Gaya Berdasarkan Waktu Sehari

Mengubah tampilan situs Anda berdasarkan waktu sehari tidak hanya cara yang menyenangkan untuk menambahkan kedalaman pada desain Anda, ini juga cara untuk mempersonalisasikan pengalaman pengunjung. Sejauh ini ada dua cara untuk mencapainya dengan CSS: Dengan javascript atau PHP (atau beberapa bahasa dinamis lainnya).

Kedua pendekatan pada dasarnya melakukan hal yang sama, dengan beberapa perbedaan kecil. Dengan menggunakan javascript Anda bisa menggunakan waktu pengunjung untuk menampilkan stylesheet yang sesuai. (Jika Anda ingin menggunakan waktu server Anda, gunakan versi PHP).

Inilah kode javascript dari katgal yang mengubah stylesheet setiap 3-4 jam, berdasarkan waktu pengguna.



<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function getCSS()
{
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();

if (thehour > 20)
display = "tree_twilight.css";
else if (thehour > 17)
display = "tree_sunset.css";
else if (thehour > 14)
display = "tree_afternoon.css";
else if (thehour > 11)
display = "tree_noon.css";
else if (thehour > 7)
display = "tree_morning.css";
else if (thehour > 4)
display = "tree_sunrise.css";
else if (thehour > 1)
display = "tree_twilight.css";
else
display = "tree_sunset.css";

var css = '<';  css+='link rel="stylesheet" href=' + display + ' \/';  css+='>';

document.write(css);
// End -->
}
</script>
<script language="javascript">getCSS();</script>
<noscript>
<link rel="stylesheet" href="tree_sunset.css" type="text/css">
</noscript>

Dengan menggunakan metode ini Anda dapat menunjukkan stylesheet yang berbeda

Dari jam 5 pagi sampai jam 8 pagi
Dari jam 8 pagi sampai jam 12 siang
Dari jam 12 siang sampai jam 3 sore
Dari jam 3 sore sampai jam 6 sore
Dari jam 6 sore sampai jam 9 malam
Dari jam 9 malam sampai jam 5 pagi

8. Mengubah Gaya CSS Berdasarkan Cuaca

Mengubah tampilan situs Anda berdasarkan waktu adalah sangat mudah jika dibandingkan dengan kemampuan mengubah tampilan situs Anda berdasarkan cuaca. CSS-Tricks memiliki tutorial menakjubkan yang menunjukkan bagaimana membentuk desain berdasarkan kondisi cuaca saat ini dari Yahoo! Weather.

Dengan menggunakan sedikit tipuan CSS dan PHP, tutorial ini menunjukkan bagaimana cara mengganti kelas tata letak berdasarkan cuaca. Cukup buat sebuah gaya (contohnya menunjukkan gambar header) yang berkorelasi dengan kondisi cuaca yang sesuai. Ini menggunakan stylesheet seperti ini


.header {
width: 782px; height: 150px;
/* DEFAULTS TO SUNNY */
background: url(images/header-sunny.png) no-repeat center center black;
}
.header-rain {
background: url(images/header-rain.png) no-repeat center center black;
}
header-snow {
background: url(images/header-snow.png) no-repeat center center black;
}
.header-sunny, .header-fair {
background: url(images/header-sunny.png) no-repeat center center black;
}
.header-partly-cloudy, .header-cloudy, .header-mostly-cloudy {
background: url(images/header-partlycloudy.png) no-repeat center center black;
}

dan sekali itu menarik kondisi cuaca melalui PHP/XMl. Cuplikan PHP ini digunakan dalam tata letak untuk menunjukkan kelas cuaca yang tepat.

1
2	<div class="header header-<?php echo $weather_class; ?>">
3	</div>

9. Pencetakan Sempurna dengan CSS

Fitur yang terlewatkan di situs web adalah tautan "cetak artikel ini". Ada banyak orang yang menggunakan internet yang masih suka mencetak artikel berguna dan menyimpannya dalam bentuk kertas. Untuk melakukan ini, Anda perlu menggunakan jeda halaman CSS/XHTML.

David Walsh memiliki beberapa kode bagus yang menunjukkan CSS yang dibutuhkan untuk membuat jeda halaman yang efektif di halaman cetak.


@media all
{
.page-break    { display:none; }
}

@media print
{
.page-break    { display:block; page-break-before:always; }
}

Dan kemudian untuk menggunakan kode tersebut, tambahkan saja <div class="page-break"></div> kapan pun Anda perlu memecah halaman, seperti:


<h1>Page Title</h1>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content -->

David juga memberikan beberapa contoh bagus tempat untuk menambahkan jeda pencetakan di halaman.

Antara bagian halaman (tag h2 atau h3, tergantung pada format situs Anda)
Antara akhir sebuah artikel dan komentar/trackback berikutnya
Antara blok konten yang panjang

Terkait

Simak beberapa artikel David tentang bagaimana membuat situs Anda lebih ramah printer.

10. Grafik Batang CSS

Grafik batang membuat visual yang bagus untuk sekelompok statistik yang membosankan. Apples to Oranges telah menemukan cara untuk secara akurat menampilkan grafik batang dengan CSS saja. Ini adalah solusi elegan untuk apa yang seharusnya dikode manual atau dilakukan dengan javascript.

Pikiran dasar dibalik tutorialnya adalah Anda membuat kelas seperti .graph


.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span { position: absolute; left: 1em; }

dan menampilkannya di halaman seperti:

1
2	<div class="graph">
3	<strong class="bar" style="width: 24%;">24%</strong>
4	</div>

Bagian "fluid" satu-satunya dari contoh adalah menambahkan style="24%" ke pernyataan <strong>. Persentase apapun akan dengan benar menunjukkan grafik yang tepat. Sederhana dan elegan.

Ada banyak contoh yang lebih kompleks untuk membuat grafik batang dari CSS di blog Apples to Oranges, jika Anda merasa ingin berpetualang.

Berlangganan Feed RSS NETTUTS untuk tutorial dan artikel pengembangan web harian lainnya.

Glen Stansberry adalah pengembang web dan blogger yang berkali-kali berjuang daripada yang dia ingin akui dengan CSS. Anda bisa membaca lebih banyak tips tentang pengembangan web di blognya Web Jackalope.