11 Teknik CSS Klasik Dibuat Sederhana dengan CSS3

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Kita semua harus mencapai beberapa efek yang membutuhkan sedikit tambahan divs atau PNG. Kita seharusnya tidak terbatas pada teknik lama ini ketika ada era baru yang akan datang. Era baru ini termasuk penggunaan CSS3. Dalam tutorial hari ini, saya akan menunjukkan sebelas efek waktu yang berbeda yang dapat dicapai dengan mudah dengan CSS3.

CSS3? Apa itu?!

Saya yakin Anda pernah mendengar tentang CSS secara umum. CSS3 tidak jauh berbeda, dalam hal sintaks; namun, kekuatan CSS3 jauh lebih besar. Seperti yang akan Anda lihat di sebelas teknik ini, Anda dapat memiliki banyak latar belakang, mengubah ukuran latar belakang secara dinamis, border radius, bayangan teks, dan banyak lagi!

Inilah situs resmi (atau paling tidak, yang saya anggap resmi) dari CSS3, css3.info, yang dikatakan tentang CSS3:

CSS3 adalah anak baru dalam keluarga stylesheet. Ini menawarkan kemungkinan baru yang menarik untuk menciptakan dampak dengan desain Anda, memungkinkan Anda menggunakan lembaran gaya yang lebih beragam untuk berbagai kesempatan dan banyak lagi.

Apa yang Akan Kita Bahas

Berikut adalah 11 teknik yang akan saya tunjukkan kepada Anda bagaimana membuat ulang dengan CSS3. Saya akan menunjukkan cara membuatnya menggunakan CSS2 (atau JavaScript), dan kemudian dengan properti CSS3. Ingat - efek ini hanya akan bekerja di browser modern yang menerapkan fitur CSS3 ini. Pilihan terbaik Anda adalah melihat ini dengan Safari 4.

1. Sudut Membulat

Mungkin favorit saya di daftar ini, sudut membulat menyediakan pengembang dengan begitu banyak pilihan. Anda dapat membuat tombol sudut membulat dalam hitungan detik. Hal favorit yang saya lakukan adalah mengatur latar belakang gradien untuk mengulangi sepanjang sumbu x dan kemudian menerapkan sudut membulat untuk membuat tombol Web 2.0 yang sangat bagus.

Anda dapat mensimulasikan sudut membulat dengan menggunakan empat div ekstra atau dengan menggunakan JavaScript. Meskipun, pengguna tidak melihat sudut halus ini jika JavaScript dinonaktifkan, saya rasa tidak masalah selama situs web tetap berfungsi sebagaimana mestinya. Anda bisa membaca metode ini jika Anda lebih suka menggunakan CSS murni dalam membuat sudut yang membulat.

Cara Klasik

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
  $('.box').corners('10px');
});
</script>

<div class="box">
	<!--CONTENT-->
</div>

Metode klasik menggunakan jQuery beserta plugin JavaScript yang disebut Corners.

Cara CSS3

<style type="text/css">
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Seperti yang bisa Anda lihat, semua yang perlu Anda lakukan adalah menentukan tiga properti CSS3. Akhirnya, itu hanya akan menjadi satu; Anda harus menggunakan tiga sekarang karena browser yang berbeda menggunakan nama properti yang berbeda.

Lihat demonya.

2. Bayangan Kotak

Bayangan KotakBayangan kotak memberi Anda alat yang sangat hebat. 99% dari waktu ketika saya sedang mendesain, saya menemukan diri saya menggunakan bayang-bayang untuk sesuatu. Sekali lagi, saya akan menggunakan plugin jQuery untuk mengurus cara klasik karena jujur, mencoba untuk mengetahuinya dengan hanya CSS adalah membingungkan. Mengapa saya harus membuang waktu dengan mengutak-atik margin negatif saat sudah ada sesuatu yang ditulis untuk pekerjaan tersebut? Selama desain saya terlihat bagus saat orang menonaktifkan JavaScript, saya sangat puas menggunakan plugin jQuery.

Cara Klasik

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropShadow.js"></script>
<script type="text/javascript">
$(function(){
	$('.box').dropShadow({
		left: 5,
		top: 5,
		opacity: 1.0,
		color: 'black'
	});
});
</script>

<div class="box">
	<!--CONTENT-->
</div>

Saya menggunakan plugin dropshadow. Sederhana dan apa yang saya inginkan; meskipun saya lebih suka hanya menggunakan CSS;).

Cara CSS3

<style type="text/css">
.box {
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Nilai untuk properti bayangan kotak adalah: x-offset y-offset blur color. Jauh lebih mudah daripada mengimpor dua file JavaScript, dan BANYAK lebih mudah daripada mengotak-atik gambar latar belakang dan margin negatif.

Lihat demonya.

3. Bayangan Teks

Bayangan TeksJika Anda pernah membaca tutorial tentang bagaimana membuat efek letterpress di Photoshop, Anda akan tahu bahwa efek drop shadow yang digunakan. Ini sangat mudah untuk membuat teks letterpress, cukup ikuti tutorial ini di Line25 oleh Chris Spooner.

Cara Klasik

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.fonts {
position: relative;
}
.fonts .font {
position: absolute;
z-index: 200;
}
.fonts .second {
top: 1px;
color: #000;
z-index: 100;
}
</style>

<div class="fonts">
	<span class="font">The quick brown fox jumps over the lazy dog.</span>
	<span class="font second">The quick brown fox jumps over the lazy dog.</span>
</div>

Alih-alih menggunakan plugin jQuery kali ini, saya hanya menggunakan beberapa trik CSS sederhana untuk benar-benar memposisikan teks di balik teks teks lainnya. Satu-satunya hal buruk tentang tidak menggunakan CSS3 untuk situasi ini adalah Anda akan mendapatkan dua salinan teks jika CSS dinonaktifkan.

Cara CSS3

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>

<span class="font">The quick brown fox jumps over the lazy dog.</span>

Jika Anda berencana menggunakan bayangan teks yang kabur (opsi "ketiga" di properti text-shadow), saya tidak tahu bagaimana Anda akan melakukannya dengan CSS murni, dan tanpa gambar.

Lihat demonya.

4. Font Mewah

Font MewahKami telah mengimpikannya untuk waktu yang lama sekarang, namun akhirnya Anda dapat menampilkan "font mewah" di web tanpa bergantung pada JavaScript. Tentu hal ini menyebabkan beberapa masalah dengan membiarkan font berbayar didistribusikan melalui internet. Bagaimanapun, saya hadirkan dengan @font-face.

Cara Klasik

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/loyal.js"></script>
<script type="text/javascript">
$(function(){
	Cufon.replace('.classic .font');
});
</script>
<style type="text/css">
.font {
font-size: 20px;
}
</style>

<span class="font">The quick brown fox jumps over the lazy dog.</span>

Saya memutuskan untuk menggunakan Cufón untuk mengganti teksnya. Saya tidak akan menjelaskan bagaimana cara menggunakannya karena Jeffrey sudah memiliki screencast yang mengagumkan.

Cara CSS3

<style type="text/css">
@font-face {
font-family: 'Loyal';
src: url('loyal.ttf');
}
.font {
font-family: Loyal;
font-size: 20px;
}
</style>

<span class="font">The quick brown fox jumps over the lazy dog.</span>

Kita membuat keluarga font dengan @font-face dan kemudian menggunakannya sebagai nilai untuk font-family. Michael Owens menulis artikel di sini sekitar sebulan yang lalu yang menjelaskan @font-face dengan cukup baik.

Lihat demonya.

5. Opacity

OpacityJika Anda telah mengunjungi desain ulang situs web Envato akhir-akhir ini, Anda mungkin telah memperhatikan bahwa ada banyak elemen transparan. Meskipun ini dicapai dengan PNG transparan, Anda dapat mencapai efek yang sama dengan menggunakan properti opacity. Sekarang, properti opacity telah ada untuk sementara waktu, tapi IE tercinta kita memiliki propertinya sendiri.

Cara Klasik

<style type="text/css">
.box {
opacity: .6; // all modern browsers (this is CSS3)
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8
filter: alpha(opacity=60); // IE 5-7
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Cara CSS3

<style type="text/css">
.box {
opacity: .6;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Dengan CSS3, kami hanya menghilangkan dua properti yang spesifik untuk IE, bukankah itu hebat ?!

Lihat demonya.

6. RGBA

RGBASemua orang tahu apa singkatan RGB (red, green, blue), tapi apa singkatan A? Ini singkatan dari alpha, yang mengacu pada transparansi.

Selain sudut membulat, RGBA adalah properti CSS3 saya yang paling sering digunakan. Terkadang saya hanya ingin menambahkan beberapa latar belakang putih/hitam terang ke link navigasi saat pengguna mengarahkan kursor ke mereka. Ini jauh lebih mudah daripada membuat gambar baru untuk setiap warna; namun, dengan sedikit PHP itu membuat segalanya menjadi lebih mudah.

Cara Klasik

Melihat bagaimana ini bukan artikel PHP, saya tidak akan membahas PHP. Simpan saja file ini sebagai rgba.php dan bila Anda memerlukan warna RGBA tertentu, buat latar belakang "color" sebagai url(rgba.php?r=R&g=G&b=B&a=A).

<?php
$image = imagecreatetruecolor(1, 1);
$r = (int)$_GET['r'];
$g = (int)$_GET['g'];
$b = (int)$_GET['b'];
$a = (float)$_GET['a'];
$white = imagecolorallocate($image, 255, 255, 255);
$color = imagecolorallocatealpha($image, $r, $g, $b, 127*(1-$a));
imagefill($image, 0, 0, $white);
imagefilledrectangle($image, 0, 0, 1, 1, $color);

header('Content-type: image/png');
imagepng($image);
?>

Sekarang terapkan ke div...

<style type="text/css">
.box {
background: url(rgba.php?r=239&g=182&b=29&a=.25);
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Cara CSS3

<style type="text/css">
.box {
background: rgba(239, 182, 29, .25);
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Lihat demonya.

7. Ukuran Latar Belakang

Ukuran Latar BelakangProperti ukuran latar belakang adalah hal yang menakjubkan untuk dimiliki pada sabuk alat Anda saat Anda membuat tata letak yang cair.Contohnya bisa jadi bila Anda memiliki gambar latar belakang untuk wadah yang ada di sidebar. Cara klasik untuk melakukan ini memerlukan tweaker agar gambar diulang sepanjang sumbu y, namun dengan CSS3, ini seperti menambahkan properti latar belakang lainnya.

Cara Klasik

<style type="text/css">
.box {
position: relative;
overflow: hidden;
}
	.box img {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 50%;
	z-index: 100;
	}
	.box .content {
	position: absolute;
	z-index: 200;
	}
</style>

<div class="box">
	<div class="content">
		<!--CONTENT-->
	</div>
	<img src="http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg" alt="" />
</div>

Cara CSS3

<style type="text/css">
.box {
background: #ccc url(http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg) no-repeat;
-webkit-background-size: 50%; /* Safari */
-o-background-size: 50%; /* Opera */
-khtml-background-size: 50%; /* Konqueror */
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Sayangnya, properti ini tidak diimplementasikan ke Firefox (V3.5.2) pada saat penulisan ini.

Lihat demonya.

8. Banyak Latar Belakang

Ah, banyak latar belakang. Sekarang ini memberi pengembang alat yang sangat ampuh. Saya bisa memikirkan begitu banyak hal yang membutuhkan banyak divs untuk memiliki lebih dari satu latar belakang. Tempat yang paling umum saya dapat melihat ini bermanfaat adalah di bagian header situs web, tapi itu hanya hal pertama yang saya pikirkan.

Cara Klasik

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/bg.png) repeat-x;
}
	.box2 {
	width: 100%;
	height: 100%;
	background: url(images/text.png) center center no-repeat;
	}
</style>

<div class="box">
	<div class="box2">
		<!--CONTENT-->
	</div>
</div>

Metode klasiknya cukup jelas, cukup bungkus div dengan div lain dan seterusnya untuk setiap latar belakang yang Anda butuhkan. Menghasilkan kode yang enak dilihat, bukan?

Cara CSS3

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Sintaksnya sangat mudah didapat. Yang Anda lakukan untuk banyak latar belakang adalah menambahkan koma di antara masing-masing! Namun, sekali lagi, ini adalah properti terbatas dan hanya di Safari.

Lihat demonya.

9. Kolom

KolomIni adalah properti CSS3 yang paling menarik yang pernah saya ketahui. Ini bukan sesuatu yang Anda lihat banyak dalam desain web. Saya sendiri, saya hanya melihat kolom seperti surat kabar satu atau dua kali; namun, saya suka bagaimana efeknya terlihat bila dilakukan dengan benar. Biasanya Anda akan memisahkan konten menjadi div dan mem-float div tersebut, tapi saya menemukan plugin jQuery yang secara dinamis me-render kolom.

Cara Klasik

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.columnize.js"></script>
<script type="text/javascript">
$(function(){
	$('.columns').columnize({
		columns: 2
	});
});
</script>
<style type="text/css">
.column {
padding-right: 10px;
}
.column.last {
padding: 0;
}
</style>

<div class="columns">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

Saya telah menambahkan sedikit padding ke kolom sehingga teks tidak dilanggar satu sama lain.

Cara CSS3

<style type="text/css">
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>

<div class="columns">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

Ada beberapa properti kolom CSS3 lainnya yang dapat Anda terapkan, namun untuk tujuan demonstratif, saya hanya menentukan jumlah kolom. Jika Anda ingin mempelajari lebih lanjut tentang properti lainnya, lihat halaman multi-kolom di CSS3.info.

Lihat demonya.

10. Border Gambar

Border GambarSaya tidak memiliki petunjuk tentang properti border gambar sampai saya mengupgrade ke Firefox 3.5 dan mengunjungi situs Chris Spooner dan melihat bahwa gambar postingnya memiliki border gambar. Saya pribadi tidak tertarik pada properti ini, tapi itu tidak akan menghentikan saya untuk menjelaskan bagaimana mencapainya.

Cara Klasik

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.borderImage.js"></script>
<script type="text/javascript">
$(function(){
	$('.classic .box').borderImage('url(images/border.png) 27 27 27 27 round round');
});
</script>
<style type="text/css">
.box {
border-width: 20px;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Alih-alih menghabiskan waktu membuat beberapa div dan mengulang gambar latar belakang di sekitar div, saya menemukan sebuah plugin jQuery yang melakukan pekerjaan tersebut untuk saya. Ini disebut borderImage dan bekerja seperti seharusnya.

Cara CSS3

<style type="text/css">
.box {
border-width: 20px;
-webkit-border-image: url(images/border.png) 27 round;
-moz-border-image: url(images/border.png) 27 round;
border-image: url(images/border.png) 27 round;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Seperti yang bisa Anda lihat, properti border gambar agak aneh. W3 menjelaskan bagaimana hal itu akan dihitung JAUH lebih baik.

Lihat demonya.

11. Animasi

AnimasiBaiklah, siapa yang tidak suka melihat beberapa elemen dengan lembut meluncur ke kiri atau memudar saat Anda hover ke sesuatu? Animasi sangat bagus untuk meningkatkan antarmuka pengguna, namun pastikan Anda tidak berlebihan! Satu-satunya browser yang mendukung animasi CSS3 adalah browser berbasis WebKit.. Satu-satunya cara lain untuk menampilkan animasi adalah dengan menggunakan JavaScript. Saya akan menggunakan jQuery karena ini adalah perpustakaan JavaScript favorit saya (jika Anda belum menebaknya sekarang).

Cara Klasik

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('.box').hover(function(){
		$(this).stop().animate({
			top: '20px'
		}, 300);
	}, function(){
		$(this).stop().animate({
			top: '0'
		}, 300);
	});
});
</script>
<style type="text/css">
.box {
position: relative;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Cara CSS3

<style type="text/css">
.box {
position: relative;
-webkit-transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

Kedua cuplikan kode ini melakukan hal yang sama: menggeser div 20 piksel ke bawah selama 300 ms. Ingat, kode CSS3 hanya bekerja di browser Webkit!

Lihat demonya.

Kesimpulan

Begitulah: 11 teknik CSS yang akan menjadi lebih mudah dengan CSS3 di (semoga dekat) masa depan. Jelas, akan lama sebelum kita bisa 100% bergantung pada properti ini di semua browser.

Jangan lupa untuk meninjau tutorial Nettuts+ lainnya yang membahas CSS3:

Ikuti kami di Twitter, atau berlangganan Feed RSS Nettuts+ untuk tutorial dan artikel pengembangan web harian lainnya.