Desain Tampilan Form dengan CSS

Hampir dalam setiap project website yang kita develop, kita juga membuat form. Apa yang kita lakukan untuk menata layout elemen-elemen dalam form yang kita buat sehingga dapat tertata rapi? Hmm.. dulu mungkin saya menggunakan table. Sekarang, saya lebih prefer (dan menyarankan Anda) untuk menggunakan CSS? hehe.. :mrgreen: Kenapa? karena lebih fleksibel untuk dimodifikasi dan lebih membebaskan kita untuk membuat desain form yang lebih menarik. Dengan CSS kita bisa merubah style elemen-elemen dalam form sesuai keinginan kita dan ketika suatu saat ingin merubah style itu, kita bisa memodifikasinya hanya dengan mengedit file CSSnya saja. Hmm.. ya..ya.. seperti keunggulan CSS secara umum memang. :)

Berikut ini saya ingin membagi sedikit contoh dalam mendesain form yang simpel dengan CSS. (Kalo ada yg salah, tolong diingetin ya..hehe :D )

Langkah pertama
Biasanya saya mendesain dulu di Photoshop tampilan form yang saya inginkan. Misalnya begini:
desain 1
Read the rest of this entry »

Tutorial Reset CSS

Reset CSS itu apa?
Reset CSS adalah trik yang digunakan oleh sebagian web designer untuk mengeset value(nilai) dari beberapa elemen style ke nilai-nilai tertentu sehingga dapat menciptakan konsistensi tampilan website ketika diakses melalui browser-browser yang berbeda.

Sebagaimana yang kita ketahui, setiap browser telah memberikan nilai default untuk setiap elemen style CSS. Artinya, jika file CSS yang kita buat tidak mendefinisikan elemen style tertentu, maka ketika elemen itu ditampilkan di HTML, tampilan dari elemen tersebut akan mengikuti aturan-aturan default dari browser yang mengaksesnya. Kayaknya ngga’ masalah deh? Eits, tunggu dulu, hehe.. :P Celakanya, kadang setiap browser berbeda-beda dalam menetapkan nilai-nilai default tersebut. Tidak ada kesepakatan di antara mereka. Akibatnya, tampilan website yang kita desain mungkin akan bagus(baca:sesuai keinginan kita) ketika diakses di suatu browser tetapi akan terlihat berantakan ketika diakses menggunakan browser yang lain. Parah kan? :geleng2:

Nah, untuk mensiasati inkonsistensi itulah, para web designer menggunakan trik reset CSS.
Read the rest of this entry »

Yes, My Blog is Featured on CSSbased.com

ahnshev's studio ada di CSSbased.com

Hmhmm… :) Alhamdulillah, blog ini bisa nampang di CSSbased.com. Itu kan artinya CSSbased.com menganggap bahwa ahnshev’s studio pantas untuk disejajarkan dengan website2 berinterface keren yang nampang di sana. (terlalu sombong ngga’ sih?hehe.. :P ). Yang pasti… wuaa..senang rasanya ada yang mengapresiasi website kita.

Sebenernya, saya agak kaget juga kemaren. Sewaktu ngecek statistik website, kok ngga’ seperti biasanya, jumlah pengunjung website ini naik secara signifikan. Padahal, website ini juga baru ada 3 postingan. Nah, pas dilihat referernya, ternyata sebagian besar berasal dari cssbased.com. Duar! baru inget aku bahwa beberapa waktu yang lalu aku iseng submit website ini ke cssbased.
Penasaran, terus aku coba cek ke cssbased.com. Eh, ternyata bener, websiteku ada disana, berdampingan dengan website buatan orang2 luar sono. Wuaa.. senengnya.

Gimana caranya biar website kita masuk ke cssbased?
gini ni..
Read the rest of this entry »