Advertisement
  1. Code
  2. HTML & CSS

10 Properti CSS3 yang Anda Perlu Akrab Dengannya

by
Read Time:11 minsLanguages:
This post is part of a series called CSS3 Mastery.
The 30 CSS Selectors You Must Memorize

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Kita telah membahas tiga puluh penyeleksi CSS yang harus dihafalkan; tapi bagaimana dengan properti CSS3 yang baru? Meskipun kebanyakan dari mereka masih memerlukan prefiks khusus vendor, Anda tetap dapat menggunakannya dalam proyek Anda hari ini. Sebenarnya, ini dianjurkan!

Kuncinya adalah untuk pertama menentukan apakah Anda baik-baik saja dengan presentasi yang sedikit berbeda dari browser ke browser. Apakah Anda baik-baik saja dengan, katakanlah, IE menampilkan sudut 90 derajat, bukan yang membulat licin? Terserah Anda untuk memutuskan. Bagaimanapun juga, selalu ingat bahwa situs web tidak perlu terlihat identik di setiap browser. Pada akhir artikel ini, kita akan mengerjakan proyek akhir yang menyenangkan.

1. border-radius

Border-radius
Lihat Demo

Dengan mudah properti CSS3 yang paling populer dalam kelompok tersebut, border-radius adalah semacam properti CSS3 unggulan. Sementara banyak desainer masih takut dengan gagasan bahwa tata letak dapat disajikan secara berbeda dari browser ke browser, langkah kecil, seperti sudut membulat, merupakan cara mudah untuk memancing mereka masuk!

Ironisnya, kita semua baik-baik saja dengan gagasan untuk menyediakan pengalaman melihat alternatif untuk browser mobile. Anehnya, beberapa orang tidak merasakan hal yang sama saat berhubungan dengan penjelajahan desktop.

Harap dicatat bahwa baik Safari 5 dan IE9 menerapkan sintaks `border-radius` resmi.

Lingkaran

Beberapa pembaca mungkin tidak sadar bahwa kita juga bisa menciptakan lingkaran dengan properti ini.

Circles
Lihat Demo

...Dan, jika kita ingin bersenang-senang, kita juga dapat memanfaatkan Flexible Box Model (terperinci di #8) baik secara vertikal dan horizontal menengahkan teks ke dalam lingkaran. Ini membutuhkan sedikit kode, tapi hanya karena kebutuhan untuk mengimbangi berbagai vendor.

2. box-shadow

Box-ShadowBox-ShadowBox-Shadow
Lihat Demo

Selanjutnya, kita memiliki box-shadow di mana-mana, yang memungkinkan Anda untuk segera menerapkan kedalaman dari elemen Anda. Hanya jangan terlalu menjengkelkan dengan nilai yang Anda tetapkan!

box-shadow menerima empat parameter:

  • x-offset
  • y-offset
  • blur
  • warna bayangan

Nah, yang banyak tidak disadari adalah Anda bisa mengaplikasikan banyak box-shadow sekaligus. Hal ini dapat menyebabkan beberapa efek yang sangat menarik. Pada screenshot berikut, saya menggunakan bayangan biru dan hijau untuk memperbesar setiap bayangan.

Multiple box shadowsMultiple box shadowsMultiple box shadows
Lihat Demo

Bayangan Pintar

Dengan menerapkan bayangan ke pseudo-class ::before dan ::after, kita bisa menciptakan beberapa perspektif yang sangat menarik. Inilah salah satu untuk Anda memulai:

HTML

CSS

Cool ShadowsCool ShadowsCool Shadows
Lihat Demo

Ingin efek yang lebih keren? Lihat tutorial ini di Nettuts+.

3. text-shadow

Text-shadowText-shadowText-shadow
Lihat Demo

text-shadow adalah salah satu dari beberapa properti CSS yang dapat kita abaikan penggunaan dari prefiks vendor. Cukup mirip dengan box-shadow, itu harus diterapkan pada teks, dan menerima empat parameter yang sama:

  • x-offset
  • y-offset
  • blur
  • warna bayangan

Text-Outline

Sekali lagi, seperti saudaranya, box-shadow, kita bisa menerapkan banyak bayangan, dengan menggunakan koma sebagai pemisah. Sebagai contoh, katakanlah kita ingin membuat efek outline untuk teks. Sementara webkit memang menawarkan efek stroke, kita bisa menjangkau lebih banyak browser dengan menggunakan metode berikut (meski tidak cukup cantik):

Text OutlineText OutlineText Outline
Lihat Demo

4. Text-Stroke

Text-StrokeText-StrokeText-Stroke
Lihat Demo

Berhati-hatilah dengan metode ini. Hanya webkit, untuk beberapa tahun terakhir, yang mendukungnya (Safari, Chrome, iPhone). Sebenarnya, meskipun saya bisa saja salah, `text-stroke` belum menjadi bagian dari spesifikasi CSS3. Dalam kasus ini, dengan teks putih, Firefox akan menampilkan halaman yang tampaknya kosong. Anda bisa menggunakan fitur deteksi JavaScript untuk menyiasati hal ini, atau pastikan warna dasar teks Anda tidak sama dengan latar belakang body.

Pendeteksian Fitur

Bagaimana kita bisa menyediakan satu set penataan untuk, katakanlah, Firefox, dan set lain untuk Safari atau Chrome? Salah satu solusinya adalah dengan menggunakan pendeteksian fitur.

Dengan pendeteksian fitur, kita bisa menggunakan JavaScript untuk menguji apakah ada properti tertentu tersedia. Jika tidak, kita mempersiapkan sebuah fallback.

Mari kita simak kembali masalah text-stroke. Mari kita tetapkan warna fallback hitam untuk browser yang tidak mendukung properti ini (semua selain webkit saat ini).

Pertama, kita buat elemen dummy h1. Kemudian, kami melakukan penggeledahan penuh untuk menentukan apakah properti -webkit-text-stroke tersedia untuk elemen tersebut, melalui atribut style. Jika tidak, kita akan meraih judul Hello Readers, dan mengatur warnanya dari putih menjadi hitam.

Harap dicatat bahwa kita sedang generik di sini. Jika Anda perlu mengganti beberapa tag h1 pada halaman, Anda harus menggunakan pernyataan while untuk memfilter melalui setiap judul, dan memperbarui nama styling atau kelas, yang sesuai.

Kita juga hanya menguji untuk webkit, bila mungkin browser lain pada akhirnya akan mendukung properti text-stroke juga. Ingat itu.

Jika Anda menginginkan solusi pendeteksian fitur yang lebih komprehensif, lihat Modernizr.

5. Banyak Latar Belakang

Multiple Background ImagesMultiple Background ImagesMultiple Background Images
Lihat Demo

Properti background telah dirombak untuk memungkinkan banyak latar belakang di CSS3.

Mari buat contoh konyol, cukup sebagai bukti konsep. Karena tidak ada gambar yang sesuai di sekitar, saya akan menggunakan dua gambar tutorial sebagai latar belakang kita. Tentu saja, dalam aplikasi dunia nyata, Anda mungkin menggunakan tekstur dan, mungkin, sebuah gradien untuk latar belakang Anda.

Di atas, dengan menggunakan koma sebagai pemisah, kita merujuk dua gambar latar belakang yang terpisah. Perhatikan bagaimana, dalam kasus pertama, ditempatkan di posisi kiri atas (0 0), dan, di posisi kedua, posisi kanan atas (100% 0).

Pastikan Anda memberikan fallback untuk browser yang tidak memberikan dukungan untuk banyak latar belakang. Mereka akan melewatkan properti sepenuhnya, membiarkan latar belakang Anda kosong.

Kompensasi untuk Browser Lawas

Untuk menambahkan satu gambar latar belakang untuk browser lawas, seperti IE7, nyatakan properti background dua kali: pertama untuk browser lawas, dan yang kedua sebagai penggantinya. Sebagai alternatif, Anda bisa, sekali lagi, gunakan Modernizr.

6. background-size

Sampai saat ini, kita terpaksa menggunakan teknik licik untuk memungkinkan gambar latar belakang dapat diubah ukurannya.

Kode di atas akan mengarahkan gambar latar belakang untuk mengambil semua ruang yang tersedia. Sebagai contoh, bagaimana jika kita menginginkan gambar tertentu mengambil keseluruhan elemen body, terlepas dari lebar jendela browser?

Itu semua ada untuk itu. Properti background-size akan menerima dua parameter: lebar x dan y masing-masing.

Sementara versi terakhir dari Chrome dan Safari mendukung background-size secara native, kita masih perlu menggunakan prefiks vendor untuk browser lawas.

Lihat Demo

7. text-overflow

Awalnya dikembangkan oleh Internet Explorer, properti text-overflow dapat menerima dua nilai:

  • clip
  • ellipsis

Properti ini bisa digunakan untuk memotong teks yang melebihi kontainernya, sambil tetap memberikan sedikit umpan balik untuk pengguna, seperti elipsis.

Text-OverflowText-OverflowText-Overflow
Lihat Demo

Tahukah Anda? Internet Explorer telah memberikan dukungan untuk properti ini sejak IE6? Mereka menciptakannya!

Pada titik ini, Anda mungkin mempertimbangkan untuk menampilkan keseluruhan teks saat pengguna hover di atas kotak.

Agak aneh (kecuali jika saya salah), sepertinya tidak ada cara untuk mereset properti text-overflow, atau "mematikan." Untuk meniru fungsi "off" ini, pada :hover, kita bisa mengatur properti white-space kembali ke normal. Ini bekerja, karena text-overflow bergantung pada fungsi ini dengan benar.

Tahukah Anda? Anda juga bisa menentukan string Anda sendiri, yang seharusnya digunakan menggantikan elipsis. Melakukan hal ini akan membuat string mewakili teks yang terpotong.

8. Flexible Box Model

Flexible Box Model, akhirnya akan memungkinkan kita melepaskan diri dari float. Meskipun dibutuhkan sedikit kerja untuk menyimpulkan di sekitar properti baru, begitu Anda melakukannya, semuanya harus masuk akal.

Mari membangun demo singkat, dan membuat tata letak dua kolom sederhana.

Sekarang untuk CSS: pertama kita perlu menginstruksikan container untuk diperlakukan sebagai box. Saya juga akan menerapkan lebar dan tinggi generik, karena kita tidak memiliki konten aktual dalam permainan.

Selanjutnya, mari kita terapkan, untuk demo, warna latar belakang yang unik ke div #main, dan aside.

Pada titik ini, tidak banyak yang bisa dilihat.

Flexible Box ModelFlexible Box ModelFlexible Box Model

Flexible Box ModelSatu hal yang perlu dicatat adalah, ketika diatur ke mode display: box, elemen anak akan mengambil semua ruang vertikal; ini adalah nilai default box-align: stretch.

Perhatikan apa yang terjadi bila kita secara eksplisit menyatakan lebar pada area konten #main.

Flexbox Example 2Flexbox Example 2Flexbox Example 2

Contoh Flexbox 2Nah itu sedikit lebih baik, tapi kita masih memiliki masalah ini dimana aside tidak mengambil semua ruang yang tersisa. Kita bisa memperbaikinya dengan menggunakan properti box-flex baru.

box-flex menginstruksikan elemen untuk mengambil semua ruang yang tersedia.

Dengan properti ini di tempatnya, terlepas dari lebar area konten #main, aside akan mengkonsumsi setiap spek dari ruang yang tersedia. Bahkan lebih baik lagi, Anda tidak perlu khawatir dengan masalah float sial itu, seperti elemen yang jatuh di bawah area konten utama.

Example 3 of Flexible Box ModelExample 3 of Flexible Box ModelExample 3 of Flexible Box Model
Lihat Demo

Kita hanya menggores permukaannya di sini. Lihat artikel Paul Irish yang sangat bagus untuk informasi lebih lanjut. Juga, berhati-hatilah saat menggunakan metode ini, karena tidak sepenuhnya didukung, tentu saja, di browser lawas. Dalam kasus tersebut, Anda dapat menggunakan pendeteksian fitur atau Modernizr untuk mendeteksi dukungan, dan memberikan fallback yang diperlukan.

9. Resize

Hanya tersedia, seperti Firefox 4 dan Safari 3, properti resize -- bagian dari modul UI CSS3 -- yang memungkinkan Anda untuk menentukan bagaimana textarea diubah ukurannya.

Perhatikan bahwa, secara default, browser webkit dan Firefox 4 memungkinkan textarea yang diubah ukurannya, baik secara vertikal maupun horizontal.

Kemungkinan Nilai

  • both: Mengubah ukuran secara vertikal dan horizontal
  • horizontal: Membatasi perubahan ukuran secara horizontal
  • vertical: Membatasi perubahan ukuran secara vertikal
  • none: Menonaktifkan perubahan ukuran
ResizeResizeResize
Lihat Demo

10. Transition

Mungkin tambahan yang paling menarik dari CSS3 adalah kemampuan untuk menerapkan animasi ke elemen, tanpa menggunakan JavaScript.

Meskipun terlihat seperti itu, IE9 masih tidak akan mendukung transisi CSS, yang tentunya tidak berarti Anda tidak boleh menggunakannya. Kuncinya adalah untuk meningkatkan.

Mari kita meniru efek yang umum, dimana, begitu Anda hover tautan di sidebar, teks akan meluncur ke kanan sedikit.

HTML

CSS

transition akan menerima tiga parameter:

  • Properti untuk transisi. (Tetapkan nilai ini ke all jika diperlukan)
  • Durasi
  • Jenis easing

Alasan mengapa kita tidak secara langsung menerapkan transition ke status hover tag anchor adalah karena, jika memang demikian, animasinya hanya akan berlaku selama mouseover. Pada mouseout, elemen tersebut akan segera kembali ke keadaan semula.

Lihat Demo

Karena kita hanya meningkatkan pengaruhnya, kita sama sekali tidak membahayakan browser lawas.

Proyek Akhir

Mari menggabungkan sebagian besar teknik yang telah kita pelajari di artikel ini, dan menciptakan efek yang apik. Tinjau efek terakhirnya terlebih dulu (paling baik dilihat di browser Webkit).

Langkah 1. Markup

Kita akan tetap sederhana; dalam kontainer .box kita, kita akan menambahkan dua div: satu untuk ukuran depan, dan yang lainnya untuk bagian belakang.

Langkah 2. Ditengahkan Secara Horizontal dan Vertikal

Selanjutnya, saya ingin kartu kita di tengah sempurna di layar. Untuk melakukannya, kita akan memanfaatkan Flexible Box Model. Pastikan, kemudian, menggunakan Modernizr untuk memberikan fallback untuk IE.

Karena halaman kita hanya berisi kartu ini, kita dapat secara efektif menggunakan elemen body sebagai pembungkus kita.

centered

Langkah 3. Penataan Kotaknya

Sekarang kita akan menata "kartu" kita.

Perhatikan bahwa kita juga telah menginstruksikan elemen ini untuk listen setiap perubahan pada keadaan elemen. Ketika terjadi, kita akan mentransisikan perubahannya (jika mungkin) selama satu detik (transition: all 1s).

styling the boxstyling the boxstyling the box

Langkah 4. Sebuah Bayangan yang Efektif

Selanjutnya, seperti yang telah kita pelajari sebelumnya di artikel ini, kita akan menerapkan bayangan keren dengan menggunakan pseudo class ::after.

effective shadowseffective shadowseffective shadows

Langkah 5. Penataan Div Turunan

Saat ini, div turunan masih berada tepat di atas satu sama lain. Mari kita memposisikan mereka secara absolut, dan menginstruksikan mereka untuk mengambil semua ruang yang tersedia.

styling the children divsstyling the children divsstyling the children divs

Langkah 6. Memperbaiki "Front"

Lihat gambar di atas; perhatikan bagaimana sisi belakang kartu kita ditampilkan secara default? Hal ini disebabkan, karena fakta bahwa elemen terjadi lebih rendah pada markup, maka hasilnya akan mendapatkan z-index yang lebih tinggi. Mari kita memperbaikinya.

fixing the front-sidefixing the front-sidefixing the front-side

Langkah 7. Memutar Kartu

Sekarang untuk bagian yang menyenangkan; ketika kita mengarahkan kursor ke atas kartu, ia harus membalik, dan menampilkan "sisi-belakang" kartu (setidaknya ilusi "sisi-belakang"). Untuk mencapai efek ini, kita menggunakan transformasi dan fungsi rotateY.

rotating the cardrotating the cardrotating the card

Langkah 8. Teks yang Dicerminkan

Bukankah itu terlihat mengagumkan? Tapi, sekarang, teks itu tampaknya dicerminkan. Ini, tentu saja, karena kita mengubah kontainernya. Mari kita offset ini dengan memutar div turunannya 180 derajat juga.

Dan dengan kode terakhir itu, kita telah mencapai efek apik kita!

Final productFinal productFinal product
Tinjau efek akhir (paling baik dilihat di browser Webkit).

Kesimpulan

Terima kasih banyak telah membaca, dan saya harap Anda belajar sedikit!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.