TUTORIAL | TIPS DAN TRIK

Setelah kemarin kita belajar mengenai border-radius sekarang kita akan mencoba mengimplementasikanya ke dalam sebuah tombol. Tombol ini nantinya bisa kita aplikasikan ke dalam banyak hal, misalkan untuk membuat tombol search atau navbar dll. Membuat tombol menggunakan CSS3 sangatlah gampang dan tidak membutuhkan gambar atau JavaScript. untuk lebih jelasnya, silahkan lihat tombol - tombol yang ada di bawah ini :

Kalau dipikir-pikir, jika saya memang harus memilih antara Google Chrome atau Mozilla Firefox tentu saya tidak akan bisa. Kenapa?? Karena sebagai blogger saya sangat membutuhkan keduanya. saya sering mengunakan keduanya dalam keseharian saya. Kenapa?? Karena  Google Chrome atau Mozilla Firefox masing-masing memiliki kekurangan, kelebihan dan perbedaan.

Saat ini saya menggunakan Google Chrome versi 5.0.375.125 dan Mozilla Firefox versi 3.6.3. Bukanya bermaksud memuji yang satu dan menjelek-jelekan yang lain, tapi --sungguh-- saya menulis artikel ini karena saya saya merasakan kekurangan, kelebihan dan perbedaan dari keduanya. dan inilah beberapa kekurangan, kelebihan dan perbedaan Google Chrome versi 5.0.375.125 dan Mozilla Firefox versi 3.6.3 menurut saya :

Penulisan HTML








Bersambung...

Kenapa Kita Harus Valid CSS dan HTML?? Pertanyaan itulah yang muncul di benakku pagi ini. semua berawal ketika aku mulai menulis tentang CSS3. Setelah menulis artikel berjudul "Membuat Efek Transparan dengan CSS3" aku memutuskan untuk blog walking. Setelah kesana kemari bertanya dan belajar, aku menemukan banyak sekali orang bertanya mengenai "valid kah kode css seperti itu??".

Nah lho?? Sebenernya aku sudah mengerti masalah validasi css dan html ketika aku menulis artikel berjudul "Membuat Halaman Home, Berbeda dengan Halaman Posting" artikel itu sendiri bersumber dari blog-nya kang jalu yang berjudul "Membuat Halaman Blog Dinamis, bag kedua" nah disana ada kang rohman yang berkomentar mengenai validate css. nah dari situlah -- DULU-- aku pernah mencoba mengurangi banyak eror pada proses validasi. Waktu berselang, sudah lama aku tidak mencoba mem-validasi blog ini. Sekarang valid ga blog ku ya??. Pas aku validate blogku, hasilnya??? HANCUR...

Tutorial CSS3 kali ini saya ingin membahas mengenai membuat efek transparan dengan css3. Dalam postingan saya yang berjudul "Multi-colum layout Menggunakan CSS3" saya menggunakan box-box yang bersifat transparan. Untuk membuat efek transparan sendiri sebenarnya ada banyak cara, salah satunya adalah penggunaan image ber ekstensi .png. tapi kali ini saya akan mencoba berbagi mengenai bagaimana membuat efek transparan dengan menggunakan css3.

Jika kita ingin membuat efek transparan dengan menggunakan css3, ada dua cara/kode yang bisa digunakan. Yang pertama adalah opacity dan yang kedua menggunakan rgba. Sedangkan nilai transparansi ditentukan dengan menggunakan angka 0 sampai 1. Artinya jika kita memberikan nilai 0 pada opacity sebuah box maka box tersebut akan benar-benar transparan, dan jika kita memberikan nilai 1 pada opacity sebuah box maka box tersebut tidak akan memiliki transparansi sama sekali.

1. Efek transparansi menggunakan kode opacity
   Kode opacity bersifat merubah semua yang ada didalam box tersebut. Jadi, jika kita meletakan sebuah text pada suatu box yang kita beri kode opasity : 0.5;  maka text tersebut akan ikut transparan.

Penerapan kode opacity pada css :

.contoh {
   background: #2867A5;
   opacity: 0.2;
   float: left;
   height: 130px;
   width: 180px;
   margin: 5px 5px;
   padding: 10px;
   background-color:rgb(255, 255, 255,);
   -moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
   -webkit-transition: all 0.6s ease-in-out;
}

Hasilnya akan terlihat seperti ini :

Justify atau rata kiri-kanan lazim digunakan dalam pembuatan laporan. Tapi Masih jarang orang yang mengaplikasikannya di dalam postingan blog. Pada artikel saya sebelumnya yang berjudul "Multi-colum layout Menggunakan CSS3" saya mencoba membagi postingan menjadi beberapa kolom dengan mengunakan css3. setelah saya lihat, kok rada aneh jika kolom-kolom yang ada tidak menganut justify alignment. Kita bisa saja membuat postingan bergaya justify dengan meng-klik tombol alignment yang ada di atas. Tapi bayangkan jika blog ini sudah memiliki sekitar 80 posting dan saya harus menggantinya satu-satu.

Maka solusinya adalah dengan menambahkan beberapa code css.

Caranya :
Masuk ke Elemen halaman template blogger anda kemudian pilih Edit HTML, tekan control F kemudian cari kode yang mirip seperti dibawah ini:

/* Posts
-----------------------------------------------

.post {
float: left;
width: 316px;
display: inline;
margin-top: 15px;
margin-left: 0px;
margin-right: 8px;
margin-bottom: 10px;
}

Dalam postingan sebelumya saya membahas tentang bagaimana membuat round corner dengan css3. dalam postingan tersebut saya menggunakan penulisan dengan gaya koran atau majalah dengan cara membagi kolom yang ada menjadi 2 bagian. Dengan menggunakan css3 kita hanya perlu beberapa code untuk membuat beberapa kolom. Karena code untuk membagi kolom sudah tersedia di css3. Code yang digunakan adalah column-width jika kita ingin membagi kolom berdasarka lebarnya dan column-count jika kita ingin membagi kolom berdasar jumlahnya.

Seperti yang sudah saya singgung di artikel saya yang berjudul Border-radius: Membuat pojok yang tidak lancip dengan CSS3 bahwa ada dua buah browser besar dengan 2 cara penulisan. yaitu dengan menambahka -moz- untuk Mozila/Firefox dan -webkit- untuk Google Chrome.
Berikut adalah contoh pembuatan kolom dengan menggunakan code column-width. Yaitu Menentukan kolom berdasarkan lebar-nya. Code yang saya tuliskan adalah :

.contoh1 {
width:500px;
margin: 0 auto;
padding: 5px;
clear: both;
background-color:rgba(255, 255, 255, 0.8);
-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
&-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
-moz-column-gap: 1em;/*Ukuran gap atau jarak  antar kolom*/
-moz-column-width: 13em; /*Lebar kolom*/
-webkit-column-gap: 1em; /*Ukuran gap atau jarak  antar kolom*/
-webkit-column-width: 13em;/*Lebar kolom*/
}

Hasilnya akan terlihat seperti berikut :