7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML & CSS

11 Teknik CSS Klasik Dibuat Sederhana dengan CSS3

Read Time: 13 mins

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Kita semua harus mencapai beberapa efek yang membutuhkan sedikit tambahan divs atau PNG. Kita seharusnya tidak terbatas pada teknik lama ini ketika ada era baru yang akan datang. Era baru ini termasuk penggunaan CSS3. Dalam tutorial hari ini, saya akan menunjukkan sebelas efek waktu yang berbeda yang dapat dicapai dengan mudah dengan CSS3.


CSS3? Apa itu?!

Saya yakin Anda pernah mendengar tentang CSS secara umum. CSS3 tidak jauh berbeda, dalam hal sintaks; namun, kekuatan CSS3 jauh lebih besar. Seperti yang akan Anda lihat di sebelas teknik ini, Anda dapat memiliki banyak latar belakang, mengubah ukuran latar belakang secara dinamis, border radius, bayangan teks, dan banyak lagi!

Inilah situs resmi (atau paling tidak, yang saya anggap resmi) dari CSS3, css3.info, yang dikatakan tentang CSS3:

CSS3 adalah anak baru dalam keluarga stylesheet. Ini menawarkan kemungkinan baru yang menarik untuk menciptakan dampak dengan desain Anda, memungkinkan Anda menggunakan lembaran gaya yang lebih beragam untuk berbagai kesempatan dan banyak lagi.

Apa yang Akan Kita Bahas

Berikut adalah 11 teknik yang akan saya tunjukkan kepada Anda bagaimana membuat ulang dengan CSS3. Saya akan menunjukkan cara membuatnya menggunakan CSS2 (atau JavaScript), dan kemudian dengan properti CSS3. Ingat - efek ini hanya akan bekerja di browser modern yang menerapkan fitur CSS3 ini. Pilihan terbaik Anda adalah melihat ini dengan Safari 4.

  1. Sudut Membulat
  2. Bayangan Kotak
  3. Bayangan Teks
  4. Font Mewah
  5. Opacity
  6. RGBA
  7. Ukuran Latar Belakang
  8. Banyak Latar Belakang
  9. Kolom
  10. Border Gambar
  11. Animasi

1. Sudut Membulat

Rounded CornersRounded CornersRounded Corners

Mungkin favorit saya di daftar ini, sudut membulat menyediakan pengembang dengan begitu banyak pilihan. Anda dapat membuat tombol sudut membulat dalam hitungan detik. Hal favorit yang saya lakukan adalah mengatur latar belakang gradien untuk mengulangi sepanjang sumbu x dan kemudian menerapkan sudut membulat untuk membuat tombol Web 2.0 yang sangat bagus.

Anda dapat mensimulasikan sudut membulat dengan menggunakan empat div ekstra atau dengan menggunakan JavaScript. Meskipun, pengguna tidak melihat sudut halus ini jika JavaScript dinonaktifkan, saya rasa tidak masalah selama situs web tetap berfungsi sebagaimana mestinya. Anda bisa membaca metode ini jika Anda lebih suka menggunakan CSS murni dalam membuat sudut yang membulat.

Cara Klasik

Metode klasik menggunakan jQuery beserta plugin JavaScript yang disebut Corners.

Cara CSS3

Seperti yang bisa Anda lihat, semua yang perlu Anda lakukan adalah menentukan tiga properti CSS3. Akhirnya, itu hanya akan menjadi satu; Anda harus menggunakan tiga sekarang karena browser yang berbeda menggunakan nama properti yang berbeda.

Lihat demonya.

2. Bayangan Kotak

Box ShadowBox ShadowBox Shadow

Bayangan KotakBayangan kotak memberi Anda alat yang sangat hebat. 99% dari waktu ketika saya sedang mendesain, saya menemukan diri saya menggunakan bayang-bayang untuk sesuatu. Sekali lagi, saya akan menggunakan plugin jQuery untuk mengurus cara klasik karena jujur, mencoba untuk mengetahuinya dengan hanya CSS adalah membingungkan. Mengapa saya harus membuang waktu dengan mengutak-atik margin negatif saat sudah ada sesuatu yang ditulis untuk pekerjaan tersebut? Selama desain saya terlihat bagus saat orang menonaktifkan JavaScript, saya sangat puas menggunakan plugin jQuery.

Cara Klasik

Saya menggunakan plugin dropshadow. Sederhana dan apa yang saya inginkan; meskipun saya lebih suka hanya menggunakan CSS;).

Cara CSS3

Nilai untuk properti bayangan kotak adalah: x-offset y-offset blur color. Jauh lebih mudah daripada mengimpor dua file JavaScript, dan BANYAK lebih mudah daripada mengotak-atik gambar latar belakang dan margin negatif.

Lihat demonya.

3. Bayangan Teks

Text ShadowText ShadowText Shadow

Bayangan TeksJika Anda pernah membaca tutorial tentang bagaimana membuat efek letterpress di Photoshop, Anda akan tahu bahwa efek drop shadow yang digunakan. Ini sangat mudah untuk membuat teks letterpress, cukup ikuti tutorial ini di Line25 oleh Chris Spooner.

Cara Klasik

Alih-alih menggunakan plugin jQuery kali ini, saya hanya menggunakan beberapa trik CSS sederhana untuk benar-benar memposisikan teks di balik teks teks lainnya. Satu-satunya hal buruk tentang tidak menggunakan CSS3 untuk situasi ini adalah Anda akan mendapatkan dua salinan teks jika CSS dinonaktifkan.

Cara CSS3

Jika Anda berencana menggunakan bayangan teks yang kabur (opsi "ketiga" di properti text-shadow), saya tidak tahu bagaimana Anda akan melakukannya dengan CSS murni, dan tanpa gambar.

Lihat demonya.

4. Font Mewah

Fancy FontFancy FontFancy Font

Font MewahKami telah mengimpikannya untuk waktu yang lama sekarang, namun akhirnya Anda dapat menampilkan "font mewah" di web tanpa bergantung pada JavaScript. Tentu hal ini menyebabkan beberapa masalah dengan membiarkan font berbayar didistribusikan melalui internet. Bagaimanapun, saya hadirkan dengan @font-face.

Cara Klasik

Saya memutuskan untuk menggunakan Cufón untuk mengganti teksnya. Saya tidak akan menjelaskan bagaimana cara menggunakannya karena Jeffrey sudah memiliki screencast yang mengagumkan.

Cara CSS3

Kita membuat keluarga font dengan @font-face dan kemudian menggunakannya sebagai nilai untuk font-family. Michael Owens menulis artikel di sini sekitar sebulan yang lalu yang menjelaskan @font-face dengan cukup baik.

Lihat demonya.

5. Opacity

OpacityOpacityOpacity

OpacityJika Anda telah mengunjungi desain ulang situs web Envato akhir-akhir ini, Anda mungkin telah memperhatikan bahwa ada banyak elemen transparan. Meskipun ini dicapai dengan PNG transparan, Anda dapat mencapai efek yang sama dengan menggunakan properti opacity. Sekarang, properti opacity telah ada untuk sementara waktu, tapi IE tercinta kita memiliki propertinya sendiri.

Cara Klasik

Cara CSS3

Dengan CSS3, kami hanya menghilangkan dua properti yang spesifik untuk IE, bukankah itu hebat ?!

Lihat demonya.

6. RGBA

RGBARGBARGBA

RGBASemua orang tahu apa singkatan RGB (red, green, blue), tapi apa singkatan A? Ini singkatan dari alpha, yang mengacu pada transparansi.

Selain sudut membulat, RGBA adalah properti CSS3 saya yang paling sering digunakan. Terkadang saya hanya ingin menambahkan beberapa latar belakang putih/hitam terang ke link navigasi saat pengguna mengarahkan kursor ke mereka. Ini jauh lebih mudah daripada membuat gambar baru untuk setiap warna; namun, dengan sedikit PHP itu membuat segalanya menjadi lebih mudah.

Cara Klasik

Melihat bagaimana ini bukan artikel PHP, saya tidak akan membahas PHP. Simpan saja file ini sebagai rgba.php dan bila Anda memerlukan warna RGBA tertentu, buat latar belakang "color" sebagai url(rgba.php?r=R&g=G&b=B&a=A).

Sekarang terapkan ke div...

Cara CSS3

Lihat demonya.

7. Ukuran Latar Belakang

Background SizeBackground SizeBackground Size

Ukuran Latar BelakangProperti ukuran latar belakang adalah hal yang menakjubkan untuk dimiliki pada sabuk alat Anda saat Anda membuat tata letak yang cair.Contohnya bisa jadi bila Anda memiliki gambar latar belakang untuk wadah yang ada di sidebar. Cara klasik untuk melakukan ini memerlukan tweaker agar gambar diulang sepanjang sumbu y, namun dengan CSS3, ini seperti menambahkan properti latar belakang lainnya.

Cara Klasik

Cara CSS3

Sayangnya, properti ini tidak diimplementasikan ke Firefox (V3.5.2) pada saat penulisan ini.

Lihat demonya.

8. Banyak Latar Belakang

Multiple BackgroundsMultiple BackgroundsMultiple Backgrounds

Ah, banyak latar belakang. Sekarang ini memberi pengembang alat yang sangat ampuh. Saya bisa memikirkan begitu banyak hal yang membutuhkan banyak divs untuk memiliki lebih dari satu latar belakang. Tempat yang paling umum saya dapat melihat ini bermanfaat adalah di bagian header situs web, tapi itu hanya hal pertama yang saya pikirkan.

Cara Klasik

Metode klasiknya cukup jelas, cukup bungkus div dengan div lain dan seterusnya untuk setiap latar belakang yang Anda butuhkan. Menghasilkan kode yang enak dilihat, bukan?

Cara CSS3

Sintaksnya sangat mudah didapat. Yang Anda lakukan untuk banyak latar belakang adalah menambahkan koma di antara masing-masing! Namun, sekali lagi, ini adalah properti terbatas dan hanya di Safari.

Lihat demonya.

9. Kolom

ColumnsColumnsColumns

KolomIni adalah properti CSS3 yang paling menarik yang pernah saya ketahui. Ini bukan sesuatu yang Anda lihat banyak dalam desain web. Saya sendiri, saya hanya melihat kolom seperti surat kabar satu atau dua kali; namun, saya suka bagaimana efeknya terlihat bila dilakukan dengan benar. Biasanya Anda akan memisahkan konten menjadi div dan mem-float div tersebut, tapi saya menemukan plugin jQuery yang secara dinamis me-render kolom.

Cara Klasik

Saya telah menambahkan sedikit padding ke kolom sehingga teks tidak dilanggar satu sama lain.

Cara CSS3

Ada beberapa properti kolom CSS3 lainnya yang dapat Anda terapkan, namun untuk tujuan demonstratif, saya hanya menentukan jumlah kolom. Jika Anda ingin mempelajari lebih lanjut tentang properti lainnya, lihat halaman multi-kolom di CSS3.info.

Lihat demonya.

10. Border Gambar

Border ImageBorder ImageBorder Image

Border GambarSaya tidak memiliki petunjuk tentang properti border gambar sampai saya mengupgrade ke Firefox 3.5 dan mengunjungi situs Chris Spooner dan melihat bahwa gambar postingnya memiliki border gambar. Saya pribadi tidak tertarik pada properti ini, tapi itu tidak akan menghentikan saya untuk menjelaskan bagaimana mencapainya.

Cara Klasik

Alih-alih menghabiskan waktu membuat beberapa div dan mengulang gambar latar belakang di sekitar div, saya menemukan sebuah plugin jQuery yang melakukan pekerjaan tersebut untuk saya. Ini disebut borderImage dan bekerja seperti seharusnya.

Cara CSS3

Seperti yang bisa Anda lihat, properti border gambar agak aneh. W3 menjelaskan bagaimana hal itu akan dihitung JAUH lebih baik.

Lihat demonya.

11. Animasi

AnimationsAnimationsAnimations

AnimasiBaiklah, siapa yang tidak suka melihat beberapa elemen dengan lembut meluncur ke kiri atau memudar saat Anda hover ke sesuatu? Animasi sangat bagus untuk meningkatkan antarmuka pengguna, namun pastikan Anda tidak berlebihan! Satu-satunya browser yang mendukung animasi CSS3 adalah browser berbasis WebKit.. Satu-satunya cara lain untuk menampilkan animasi adalah dengan menggunakan JavaScript. Saya akan menggunakan jQuery karena ini adalah perpustakaan JavaScript favorit saya (jika Anda belum menebaknya sekarang).

Cara Klasik

Cara CSS3

Kedua cuplikan kode ini melakukan hal yang sama: menggeser div 20 piksel ke bawah selama 300 ms. Ingat, kode CSS3 hanya bekerja di browser Webkit!

Lihat demonya.

Kesimpulan

Begitulah: 11 teknik CSS yang akan menjadi lebih mudah dengan CSS3 di (semoga dekat) masa depan. Jelas, akan lama sebelum kita bisa 100% bergantung pada properti ini di semua browser.

Jangan lupa untuk meninjau tutorial Nettuts+ lainnya yang membahas CSS3:

  • Ikuti kami di Twitter, atau berlangganan Feed RSS Nettuts+ untuk tutorial dan artikel pengembangan web harian lainnya.


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.