Rotate dengan CSS3
Kemampuan baru pada CSS3 adalah rotate. Bisa digunakan untuk rotate tulisan maupun gambar. Biasanya untuk melakukan rotasi harus menggunakan script. Kini hal itu dipermudah dengan CSS3.
CSS3 saat ini baru diimplementasikan pada web browser major terbaru. Seperti Mozilla Firefox 3.5, Safari 4.0 dan Google Chrome 3.0beta.
Seorang rekan di CHIP Forum bertanya tentang pembuatan tombol miring dengan wujud foto. Berikut mockup dari aplikasi web yang ingin dibuatnya:
Original file here.
Untuk membuat tombol tersebut dengan CSS3 bisa menggunakan –moz-transform atau –webkit-transform atau –moz-transform-origin atau –webkit-transform-origin.
Pada contoh disini, saya menggunakan –moz-transform dan –webkit-transform.
img {
position: absolute;
border: 0;
-moz-box-shadow: black 0 0 7px 1px;
-webkit-box-shadow: black 0 0 7px 1px;
}
#home {
top: 50px;
left: 100px;
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
z-index: 10;
}
#portfolio {
top: 150px;
left: 80px;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
z-index: 9;
}
#product {
top: 270px;
left: 100px;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
filter: matrix(10 10 10 10);
z-index: 8;
}
#about {
top: 410px;
left: 90px;
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
z-index: 9;
}
#contact {
top: 520px;
left: 90px;
-moz-transform: rotate(-16deg);
-webkit-transform: rotate(-16deg);
z-index: 8;
}
Dengan HTML:
<img id="home" src="home.gif" />
<img id="portfolio" src="home.gif" />
<img id="product" src="home.gif" />
<img id="about" src="home.gif" />
<img id="contact" src="home.gif" />
Untuk menjaga agar ukuran file tetap kecil, saya hanya menggunakan satu gambar, yaitu home.gif.
Note: Untuk dapat melihat hasil demo ini, anda harus menggunakan web browser yang disebutkan diatas.
Mengenal CSS3 Selector
Saat ini CSS3 hanya dapat digunakan pada web browser terbaru. Seperti Safari 4.0, Opera 10 dan Firefox 3.5, Google Chrome 3.0. Sayangnya Internet Explorer 8 belum mengimplementasikan CSS3 ini.
Untuk contoh CSS dibawah, kita menggunakan HTML:
<ul> <li>Ganjil - 1</li> <li>Genap - 2</li> <li>Ganjil - 3</li> <li>Genap - 4</li> <li>Ganjil - 5</li> </ul>
Elemen Ganjil dan Genap
li:nth-child(odd) { color: blue; } li:nth-child(even) { color: green; }
Code diatas digunakan untuk memilih tag li yang ganjil dan genap.
Setiap Elemen Ketiga
li:nth-child(3n) { color: orange; }
Code diatas digunakan untuk membuat warna pada baris ketiga dan kelipatannya.
Elemen Tertentu
li:nth-of-type(3) { color: orange; } li:nth-child(5) { color: red; }
Selector hanya memilih baris ketiga dan kelima.
Elemen Pertama dan Terakhir
Elemen Pertama
li:first-of-type { color: blue; margin-left: 15px; }
Elemen Terakhir
li:last-of-type { color: green; margin-left: 15px; }
Dua Elemen Pertama
li:nth-child(-n+2) { color: green; margin-left: 15px; }
Dua Terakhir
li:nth-last-child(-n+2) { color: green; margin-left: 15px; }
CSS3 membuat tugas anda menjadi lebih mudah. Sayangnya belum semua web browser mengimplementasikannya saat ini. Harapannya semoga semua pengguna web browser meng-update web browser mereka. Agar apa yang ingin ditampilkan oleh web developer sesuai dengan yang dilihat end-user.
References: http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/
Membuat file swap di Linux (bukan partisi)
Biasanya Linux menggunakan partisi untuk swap. Kalau di-partisi, agak repot kalau misalnya mau mengubah ukuran partisi swap.
Berikut cara membuat swap menjadi file.
- Buka terminal, login sebagai root, atau gunakan sudo didepan perintah.
- Buat file kosong yang sesuai dengan ukuran file swap anda.
Contoh membuat file swap sebesar 512MB.
dd if=/dev/zero of=/swapfile1 bs=1024 count=524288
524288 didapat dari 512 x 1024.
Jadi kalau misalnya mau membuat file swap sebesar 2GB, 2 x 1024^2 = 2097152.
dd if=/dev/zero of=/swapfile1 bs=1024 count=2097152
File swap akan dibuat di dengan nama swapfile1 di / - Jadikan file swapfile1 menjadi swap.
- Aktifkan file swapfile1 menjadi swap.
swapon /swapfile1 - Agar file swap selalu aktif saat booting, tambahkan baris berikut di /etc/fstab
/swapfile1 swap swap defaults 0 0
Caranya di Ubuntu
sudo gedit /etc/fstab
Copy-paste /swapfile1 swap swap defaults 0 0 , lalu tambahkan dibaris paling bawah.
Atau bisa dengan perintah
echo '/swapfile1 swap swap defaults 0 0' | sudo tee -a /etc/fstab
mkswap /data/swapfile1
Lha?? Bagaimana tau kalau file swap nya udah aktif atau belum ?? ketik “free -m” di Terminal.
Selamat mencoba.. 
