The Ultimate Guide to CSS Typography

Kali ini aku mencoba untuk membahas tentang "Typography". Menurut wikipedia, typography / Tipografi merupakan suatu ilmu dalam memilih dan menata huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan tertentu, sehingga dapat menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin.

I♥BLUR Pure CSS3 Animation

Setelah tadi menulis tentang bagaimana cara membuat BonBon, Sweet CSS3 (Candy) Buttons, sekarang aku ingin menulis tentang tulisan/text dengan efek "blur" (animasi) menggunakan CSS.

Seperti yang kita tahu, dalam pembuatan text yang "Blur" menggunakan CSS pada umumnya kita menggunakan text-shadows seperti yang dilakukan oleh David disini. Namun dalam contoh yang dibuat oleh david tersebut terlalu banyak "glow" atau terlalu terang. Nah, disini kita akan mencoba membuat seperti itu namun kita akan menggunakan efek asap. Kita akan menggunakan color: transparent; sehingga kita bisa menghasilkan text dengan efek "asap" sungguhan. apalagi ditambah dengan sedikit animasi, pasti lebih mantap.

BonBon, Sweet CSS3 (Candy) Buttons

Screenshot

Kangen ngeblog...

Kali ini aku akan mencoba sharing masih seputar web design. Kali ini kita akan mencoba membuat button cantik dengan CSS3. Button yang dibuat oleh simurai ini dinamakan "Bonbon" (dalam bahasa perancis) atau "Candy" (permen )

Yang berikut inilah yang akan kita coba buat :

Box-shadow, Salah Satu Fitur yang Keren dari CSS3

Box-shadow, one of CSS3’s best new features

CSS3 backgrounds dan borders module mempunyai fitur baru yang bagus disebut box-shadow, yang diimplementasikan di Safari 3 +, Chrome dan Firefox 3.1 (Alpha).


Rule:

Border-radius: Buat Rounded Corners (Sudut Bulat) Dengan CSS!

Border-radius: create rounded corners with CSS!

W3C telah menawarkan beberapa opsi baru untuk border di CSS3, salah satunya adalah border-radius.

Mozila / Firefox, chrome dan Safari 3 telah mengimplementasikan fungsi ini, yang memungkinkan Anda untuk membuat sudut bulat pada kotak-item / box.

Mozilla/Firefox, chrome and Safari 3 users should see a nicely rounded box, with a nicely rounded border.

Kode untuk contoh di atas sebenarnya cukup sederhana:

Border-image: Gunakan Image Buat Bordermu

Border-image: using images for your border

Fitur menarik lain dari border CSS3 yang baru adalah properti border-image. Dengan fitur ini Anda dapat menentukan gambar yang akan digunakan sebagai pengganti border normal dari suatu elemen. Fitur ini sebenarnya terbagi menjadi beberapa properti: border-image dan border-corner-image. Inilah detail dari kedua value tersebut:

Cara Membuat Border Berwarna dengan CSS3

How to create colored borders with CSS3

W3C telah menawarkan beberapa opsi baru untuk menampilkan border di CSS3, seperti rounded borders dan border-color yang menarik. Mozila / Firefox telah mengimplementasikan fungsi ini, yang memungkinkan Anda untuk membuat border berwarna yang menarik. inilah contohnya:

Mozilla/Firefox users should see a nice grey fading border on this box…

Dan inilah script CSS-nya :

Anigma – Game Online Yang Hanya Menggunakan Animasi dan Transisi CSS3

Benjamin Meyer adalah orang yang sibuk membuat Anigma, sebuah game online yang dirancang untuk menampilkan dari fungsi di CSS3, khususnya beberapa Transisi dan Animasi CSS3.

Bermain Anigma

Anigma adalah permainan puzzle sederhana di mana pemain harus menghapus jewels/perhiasan dari layar, dengan cara memindahkan atau mencocokkan jewels/perhiasan dengan jewels/perhiasan yang berarna sama, dan tingkat kesulitan yang dilewati akan semakin bervariasi, namun permainan ini dirancang lebih sebagai pengujian fungsi CSS3 / HTML5 sebagai bahasa pemrograman utama yang digunakan untuk memberikan pengalaman kualitas game yang tinggi, meskipun setelah bermain beberapa level bisa membosankan juga.

Amazing CSS3 Animation Demos

Berikut ini adalah kumpulan efek efek keren dari CSS3. Jadi CSS3 ini dapat juga digunakan untuk menampilkan animasi atau efek efek khusus untuk mempercantik web atau sebagai pengganti efek efek JavaScript maupun flash yang dirasa memberatkan.

Untuk melihat/menampilkan efek ini, Kita memerlukan browser WebKit seperti Safari, firefox dan Chrome (maaf untuk para pengguna Internet Explorer). Cekidot...!!!