CSS 3 + HTML 5 adalah masa depan Web. Keduanya belum hadir secara resmi, meskipun banyak browser sudah mulai memberikan dukungan parsial untuk mereka. Artikel ini memperkenalkan 5 teknik CSS3 yang dapat membantu Anda mencapai masa depan Web. Saat ini teknik ini tidak boleh digunakan pada proyek klien formal; teknik ini lebih cocok untuk situs blog pribadi Anda, komunitas desain web, atau situasi di mana Anda tidak akan menerima klien yang mengeluh kepada Anda.
1. Efek sudut membulat
Salah satu fitur baru CSS3 yang paling umum digunakan adalah efek sudut membulat. Objek persegi HTML standar memiliki sudut persegi 90 derajat. CSS3 dapat membantu Anda mencapai sudut membulat.
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
Bahkan satu sudut pun dapat dibulatkan, tetapi sintaksis Mozilla dan Webkit sedikit berbeda.
-moz-border-radius-topleft: 20px;
-moz-border
-
radius-bottomleft
: 10px;
-radius kanan-kanan: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px
; -webkit-border-bottom-right-radius: 10px
; Firefox, Safari, Chrome
2. Batas grafis
Seperti namanya, batas grafis adalah batas yang memungkinkan penggunaan gambar sebagai objek. Sintaksnya adalah sebagai berikut:
border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png ) 5 ulangi;
-moz-border- image: url(/images/border-image.png) 5 ulangi;
border
-image: url(/images/border-image.png) 5 ulangi;
lebar perbatasan, dan kemudian, masing-masing Definisi gambar perbatasan memberitahu browser berapa banyak gambar yang akan digunakan sebagai perbatasan. Batas gambar juga dapat diatur satu per satu untuk setiap sisi:
batas-bawah-kanan-kanan-gambar
batas-gambar-bawah
batas-gambar-kiri-bawah
batas-gambar kiri
-batas-kiri-atas-gambar
batas-gambar atas
batas-
browser yang didukungtop -rightright-image
border-right-image
: Firefox 3.1, Safari, Chrome
3. Blokir bayangan dan bayangan teks
.
Sekarang, dengan CSS3, Anda tidak lagi memerlukan Photoshop. Sudah ada situs web yang menggunakan fitur ini, seperti situs web 24 Ways.
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
Dua properti pertama mengatur perpindahan bayangan X / Y, ini 10px, dan properti ketiga menentukan keburaman Derajat bayangan, yang terakhir mengatur warna bayangan. Bayangan teks juga dapat diatur seperti ini:
text-shadow: 2px 2px 5px #ccc;
Browser yang didukung: Firefox 3.1, Safari, Chrome (hanya mendukung Box shadow), Opera (hanya mendukung bayangan teks). hijau Nilai terakhir dari tiga warna biru mewakili transparansi Selain itu, kita juga dapat menggunakan opacity untuk mencapai transparansi (saat ini, teknik ini banyak digunakan untuk efek kotak cahaya - Penerjemah)
4. Gunakan RGBA untuk mencapai efek transparansi.
Saat ini, efek transparansi dalam desain Web terutama dicapai oleh gambar PNG (tetapi tidak didukung dengan baik di browser IE - penerjemah Di CSS3, efek transparansi dapat dicapai secara langsung).
rgba(200, 54, 54, 0.5);
latar belakang: rgba(200, 54, 54, 0.5);
warna
:
rgba(200, 54, 54, 0.5)
;
, Safari, Chrome, Opera (opacity) dan IE7 (opacity, dengan perbaikan).
5. Gunakan @Font-Face untuk mengimplementasikan font yang disesuaikan
Ada beberapa font yang relatif aman dalam desain web, seperti Arial, Helvetica, Verdana, Georgia, dan Comic Sans (dalam bahasa China, secara umum, Song Dynasty adalah satu-satunya yang aman - penerjemah Sekarang, menggunakan @font-face CSS3). bolehkah saya menentukan fontnya sendiri, tetapi karena masalah hak cipta, font sebenarnya yang dapat digunakan terbatas (selain itu, font China yang besar juga merupakan masalah yang sulit dipecahkan - penerjemah).
Sintaksnya adalah sebagai berikut:
@font-face {
font-family:'Anivers';
src
:
url('/images/Anivers.otf') format('opentype');
dan IE7 (dibutuhkan beberapa masalah, jika Anda tidak takut masalah, Anda dapat mengimplementasikan fungsi ini di IE, silakan merujuk ke: membuat font-face berfungsi di IE)
Meskipun CSS3 masih dalam pengembangan, fungsi-fungsi yang disebutkan di atas sudah tersedia di beberapa browser yang digunakan, terutama Safari. Sayangnya, Safari bukanlah browser mainstream.
Firefox saat ini memiliki basis pengguna yang besar. Selain itu, Firefox 3.1 yang akan datang mendukung banyak efek CSS3. Karena pengguna Firefox sangat termotivasi untuk melakukan upgrade, banyak pengguna dapat merasakan fitur-fitur baru CSS3 terlebih dahulu.
Google Chrome baru dirilis tahun ini. Ini didasarkan pada mesin Webkit, sehingga sangat mirip dengan Safari. Karena Safari terutama digunakan di pasar Mac, Chrome dapat mengisi kekosongan di pasar Windows.
Menurut statistik, pada November 2008, 44,2% pengguna menggunakan Firefox, 3,1% menggunakan Chrome, dan 2,7% menggunakan Safari, yang berarti bahwa beberapa fungsi CSS3 sudah dapat mendukung hampir separuh pengguna Internet di kalangan desain Web proporsi mungkin Lebih tinggi, sekitar 73,6% (data disediakan oleh Blog.SpoonGraphics)
6. Faktor negatif
Fitur CSS3 yang dijelaskan di atas akan membawa hasil yang sangat baik ke situs web Anda, namun masih ada beberapa faktor negatif yang harus diperhatikan:
Internet Explorer: 46% dari Internet tidak dapat melihat efek ini, jadi jangan gunakan hal ini untuk desain penting. Pastikan juga bahwa jika efek ini tidak berhasil, tersedia desain alternatif.
Masalah validasi CSS: Fitur-fitur CSS3 ini bukan versi final. Saat ini, browser yang berbeda menggunakan tag yang berbeda untuk mengimplementasikan fitur-fitur ini, yang dapat menyebabkan masalah validasi untuk Style Sheet Anda.
Kode membengkak: Karena browser yang berbeda menggunakan sintaks definisi yang berbeda, kode CSS Anda pada akhirnya akan menjadi sangat membengkak.
Penggunaan yang tidak tepat: Penggunaan efek ini secara tidak tepat dapat menimbulkan beberapa konsekuensi buruk, terutama untuk efek bayangan.
Sumber internasional artikel ini: http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
Sumber terjemahan bahasa Mandarin: Situs web resmi COMSHARP CMS (35km terjemahan )