Tips Design menggunakan CSS3

Hai sobat,terima kasih sampai saat ini blog saya masih hidup karena masih banyak yang mengunjungi blog saya.pada kesempatan kali ini,saya mau kasih Tips tentang penggunaan CSS3 yang baik dan benar.

setelah lama saya banyak melakukan experimen dengan CSS3,dan baca" juga tips" design web/blog dari situs" web ternama yang memang sudah ahli dengan CSS,html,coding dan sebagainya.Saya jadi mengerti bahwa CSS3 dibuat untuk tujuan yang sebenarnya untuk mengoptimalkan dan mempercantik kinerja web itu sendiri.tapi ada kalanya jika terlalu banyak menggunakan fitur" yang sebenarnya juga tidak terlalu penting,dan cuma pamer masang sesuatu yang gajelas,maka yang terjadi adalah crash pada browser saat membuka blog kita sendiri.mengapa? karena browser juga mempunyai batas untuk menampung semua efek" CSS3 yang sedang berjalan,apalagi kalau kita sedang membuka multitab,seperti facebook,youtube,dan sebagainya.coba sobat blogwalking ke situs" web orang asing.pernakah sobat melihat mereka menggunakan css3 yang berlebihan? TIDAK .mereka lebih mementingkan design yang rapih,tidak berat dan nyaman untuk dikunjungi.sayapun sebenarnya iri,maka dari itu saya mendesign blog saya sendiri,buang semuanya yang tidak terlalu penting,tapi tetap memperhatikan designya.saya sebagai anak Indonesia,turut bangga karena banyak teman dari kalian yang mungkin juga sudah jago banget mendesign blog.saya tidak mau menyombongkan diri,saya selalu terbuka pada semua yang ingin belajar,tapi disaat tertentu juga saya tidak bisa membantu,karena saat ini juga masih banyak tugas kuliah.belajar dari pengalaman,itulah yang membuat saya bisa membuat sesuatu yang bermanfaat.Otodidak,itulah yang membuat saya bisa bermain CSS,HTML,php,dll dan blogwalking,berselancar cari" inspirasi sampai ke (web/blog ) negeri tetangga.

Sekarang,saya mau memberikan beberapa tips Design CSS3 yang harusnya digunakan dan tidak digunakan.


1. Hindari penggunaan OPACITY pada seluruh content blog

Sebelumnya saya minta maaf pada pembuat template ini.hanya contoh,saya tidak tau siapa pembuatnya,tapi cuma mau kasih sedikit kritikan.Sumpah demi tuhan template ini berat banget.saya tidak tau cuma buat gaya"an doank atau iseng",tapi pengunaan opacity untuk membuat semua konten jadi transparant adalah FATAL.

Opacity:0;

Opacity digunakan untuk membuat suatu elemen menjadi transparant,termasuk text gambar dan seluruh isi pada konten itu sendiri bila penggunaanya tidak tepat.memang sih bagus,tapi ada baiknya tidak digunakan pada semua konten diblog kamu.gunakanlah pada konten tertentu seperti readmore atau sesuatu yang menurut kamu perlu di hidden.jadi apa yang harus kita lakukan?
Gunakanlah css alternatif untuk membuat transparant menggunakan RGBA color.
Apa itu rgba color?
RGBA color adalah singkatan dari RED GREEN BLUE ALPA,diartikan sebagai ruang warna.jadi fungsinya sama untuk memberi warna pada barckground suatu elemen,tapi keunggulanya,bisa mengatur nilai transparant pada background,tanpa membuat semua isi konten tersebut menjadi transparant,jadi hanya difungsikan pada backgroundnya saja.ok langsung keintinya aja.

Membuat background transparant
background: rgba(255, 255, 255, 0.5 );


Membuat border/garis batas transparant
border: 1px dotted rgba(255, 255, 255, 0.5 );

Bagaimana Cara kerja RGBA color?

Dari mana kita dapat mengatur pada RGBA color tersebut?
Ada banyak cara untuk mengatur warna'a.
A. Photoshop

B. Aplikasi Color pic -DOWNLOAD-

C. Menggunakan media online
http://css3generator.com/
http://www.colorschemer.com/online.html

hasilnya adalah blog saya sendiri,rgba color lebih aman digunakan daripada penggunaan opacity.



2. Hindari penggunaan Textshadow yang berlebihan

Seperti gambar diatas,membuat text shadow yang efeknya seperti api.kalau menurut saya norak sih,tapi pendapat orang lain mungkin bisa berbeda.boleh" aja sih menggunakan texs shadow,tapi gunakanlah hanya pada judul posting,header dan judul konten sidebar.perhatikan juga jumlah shadow yang digunakan pada text.Serta perhatikan penggunaan text shadow pada isi posting (text harus jelas agar mudah dibaca)

text-shadow: 0px 0px 4px #ccc, -1px -5px 4px #ff3, 2px -10px 6px #fd3, -3px -15px 11px #f80, 3px -18px 18px #f20;

3. Hindari penggunaan Kostum font/text yang berlebihan.

Menggunakan kostum font pada blog juga akan menambah beban/pageload.saya sarankan untuk tidak menggunakan lebih dari 2 jenis font.dan gunakan kostum font pada header,post header, dan judul sidebar/footer.jangan gunakan kostum font pada isi posting,karena memungkinkan blog kamu menjadi berat


4. Hindari penggunaan CSS3 animasi dan CSS3 keyframe yang berlebihan.
Penggunaan css3 animasi juga terkadang mempunyai beban yang sangat berat.
contohnya bila kamu masukan css hover efek pada readmore,header,sidebar atau konten" tertentu.sebenarnya tidak ada yang melarang juga.tapi gapapala kalau cuma experiment,tapi saya sarankan untuk blog utama kamu agar gunakan CSS3 animasi pada konten" tertentu saja.

5. Gunakan fitus css3 yang menurut kamu penting,nyaman,menarik,minimalis,dan tidak terlalu berat.
-Selalu thinking.sebelum kamu menambahkan sesuatu pada blog kamu,pikirkan apa fungsi dan kepentinganya.
misal kalau blog kamu adalah blog fotografi,bila kamu pikir penting untuk menggunakan photoslide yang menggunakan jquery atau css3,silakan,tapi bila tidak penting,lebih baik jangan digunakan.
-Design original ,jangan menjiplak template orang lain,atau akan disebut PLAGIAT.
-jangan terlalu banyak menambahkan accesoris pada blog,terutama css3.
-hapus efek" css3 yang terlalu banyak pada satu elemen.
-Selalu perhatikan kecepatan blog,beban dan tampilan blog.
-kenyamanan adalah no 1,kalau berat,pengunjung sudah males duluan buka blog kamu.
-karya buatan sendiri,akan menimbulkan kepuasan sendiri,jiplak punya orang lain, ga akan pernah puas.
-mendukung browser yang sering dikunjungi(seperti google chrome dan mozilla firefox)

-Moz     =Untuk Mozilla firefox
-webkit  =Untuk Google Chrome

bila css3 kamu hanya menggunakan fitur webkit(seperti animas,border,box shadow),maka yang terjadi efek'a hanya tampil di google chrome,tetapi di mozzila tidak.solusinya,gunakan kedua css tersebut.


Segini dulu tips dari saya,semoga bermanfaat,saya dukung terus blogger indonesia.kreatif inspiratif dan terus berkarya.Ganbatte kudasai minna-san~ :)