Teknik CSS3 yang Perlu Anda Tahu

CSS3 adalah salah satu standar dalam pengembangan web khususnya untuk styling haaman. Nah, dengan menggunakan standar ini, berarti kita juga setingkat lebih maju dibanding versi-versi sebelumnya. Artikel ini merupakan rujukan pengetahuan teknik menggunakan CSS3 yang minimal kita ketahui jika ingin menjadi seorang developer web. Untuk teknis praktiknya silakan kunjungi link yang saya sertakan. Oiya, artikel ini merupakan terjemahan dari artikel lain yang berbahasa Inggris, semoga bermanfaat!

Menganimasikan warna bentuk apa saja dengan CSS3 dan sebuah file gambar berformat PNG

Efek animasi dapat dilakukan hanya dengan CSS3 dengan cara mengubah background sebuah gambar png. Backgroundnya kita gunakan dengan transisi CSS3. Lihat sumber: http://jsfiddle.net/chriscoyier/vhKhT/

Membuat layout adaptif dengan kueri media CSS3


Kueri media CSS3 dapat kita manfaatkan untuk mengubah layout web berdasar lebar browser. Ini berarti kita dengan mudah bisa mengubah seberapa besar tampilan pada layar lebar dan layar kecil pada perangkat-perangkat mobile. Untuk tutorial lebih lanjut, silakan pelajari di  http://webdesignerwall.com/tutorials/adaptive-mobile-design-with-css3-media-queries

Membuat efek dim pada halaman jika link tertentu dilewati (di-roll over)


Efek yang mungkin bisa Anda coba, yakni jika pengguna melewatkan kursor pada sebuah link pada laman web, akan muncul efek dim (berkedip) pada seluruh halaman. Silakan lihat di laman ini  http://jsfiddle.net/chriscoyier/pVsKe/1/

Memotong (clip) teks dengan teknik CSS3 text-overflow


text-overflow merupakan salah satu jenis properti baru pada CSS3. Dengan properti ini kita dapat menentukan bagaimana menampilkan teks yang ukurannya lebih besar daripada kontainernya (wadahnya). Cek di sini ya http://www.456bereastreet.com/archive/201105/clipping_text_with_css3_text-overflow/

Full Browser Width Bars


Berikut ini adalah contoh teknik membuat blok kotak (lihat pada gambar di atas yang berwarna merah) yang lebarnya penuh selebar browser. Lihat caranya di sini http://css-tricks.com/examples/FullBrowserWidthBars/

CSS Mask-Image & Text


Efek lain yang tak kalah menariknya adalah efek teks dengan masking gambar. Silakan baca di sini  http://trentwalton.com/2011/05/19/mask-image-text/

Slider gambar dengan efek transisi CSS3


Untuk membuat slider gambar, biasanya kita menggunakan javascript, bahkan yang sangat populer misalnya ada pustaka slider javascript seperti NivoSlider. Beruntung dengan CSS3, kita bisa juga melakukan animasi antar-gambar hanya dengan CSS3. Silakan lihat artikelnya di sini http://blog.joelambert.co.uk/2011/05/05/flux-slider-css3-animation-based-image-transitions/

Efek border menyala

Selama ini, mungkin kita membuat efek gambar dengan sudut-sudut yang tidak lancip dengan properti border-radius. Dengan properti ini harus mendefinisikan beberapa baris untuk mendapatkan efek yang diinginkan. Nah, dengan CSS3, kita bisa menggunakan teknik lain yang lebih sederhana. Silakan simak di http://orderedlist.com/blog/articles/flared-borders-with-css/

Sumber: http://www.catswhocode.com/blog/amazing-css3-techniques-you-should-know

Iklan
Pos ini dipublikasikan di Developer, Terjemah dan tag , . Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

w

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.