Mengenal Sintak Lesser pada CSS3

M-S Blog || Mengenal Sintak Lesser pada CSS3, Untuk membangun halaman web penuh HTML5 dan CSS3 Anda akan mulai menggunakan beberapa stylesheet jauh lebih kompleks. Banyak desainer tahu kode singkat (seperti font: properti), karena ini telah menjadi standar bahkan pada sebelum CSS2.

Tetapi ada beberapa properti baru di CSS3 yang banyak desainer tidak berpikir tentangnya. Banyak dari ini tidak hanya untuk estetika, tetapi juga mencakup efek animasi. Berikut adalah daftar singkat yang menjelaskan beberapa sifatnya Anda dapat mempertimbangkan untuk bermain dengan ini. Coba googling untuk contoh sintaks jika Anda merasa kurang jelas.

 box-shadow  : menambahkan efek bayangan rapi untuk elemen halaman Anda. Anda diberikan 4 parameter yang mengatur posisi kiri / kanan , atas / bawah , bayangan kabur dan warna. Perhatikan bahwa bayangan kotak tidak dianggap ruang tambahan dengan lebar asli / tinggi .

 text-shadow  : menciptakan bayangan indah di belakang teks halaman Anda. Dengan efek yang tepat Anda dapat memunculkan untuk pop langsung dari halaman. Baca lebih banyak tentang bayangan teks di pos ini .

 border-radius  : sudut Rounded telah mengambil waktu yang lama untuk menjadi standar yang diterima. Beberapa tahun yang lalu banyak web 2.0 desainer kerajinan gambar latar belakang hanya untuk menyesuaikan sudut bulat dengan CSS. Tetapi menggunakan CSS3 border-radius Anda dapat memanipulasi kurva masing-masing perbatasan pada setiap elemen .

 opacity  : Sepertinya properti sederhana yang banyak desainer tidak menganggapnya. Opacity mengharapkan masukan numerik tunggal berkisar 0-1,0 ( 0 % - 100 % ). Efek ini bekerja  sebagai animasi melayang-layang .

 @font-face  : contoh indah lain dari beberapa gaya CSS kompleks dan tipografi. Web desainer sekarang dapat bekerja dengan font kustom mereka sendiri dengan mendefinisikan mereka sebagai variabel dalam dokumen CSS Anda. Proses ini agak membingungkan, tapi Unsur Zen telah menggariskan proses dengan cara yang sangat sederhana.

 box-sizing  : secara default kotak - sizing akan mengatur semua elemen Anda sebagai konten - kotak. Ini berarti lebar, padding, dan perbatasan semua termasuk ke dalam lebar maksimal. Tapi diatur ke perbatasan - kotak Anda dapat menentukan lebar maksimal (katakanlah 20px ) dan menambahkan bantalan / perbatasan akan memasukkan diri ke dalam ini, sehingga menghilangkan ruang di dalam objek. Ini adalah properti yang fantastis setelah Anda menguasainya.

Properti ini semuanya memiliki keuntungan dan downfalls mereka. Saya tidak akan berusaha merekomendasikan untuk menjejalkan mereka semua ke dalam halaman web Anda. Tapi praktik akan memberikan pola pikir yang jelas untuk masuk ke dalam mengembangkan website lebih lanjut dengan mudah.

Salah satu bagian inti tambahan sintaks layak disebutkan adalah penyeleksi atribut. Dengan CSS3 kini Anda dapat menentukan gaya berdasarkan atribut HTML (seperti jenis, href, judul) dan bahkan memberikan nilai-nilai tertentu. Jadi misalnya kita dapat menargetkan link dengan atribut judul didefinisikan dan memberi mereka satu set ikon latar belakang.

    ul li[title^="ico"] {  
        background: url('my-icon.gif');  
    }  

Jika Anda melihat saya telah menyertakan simbol caret sebelum tanda. Ini adalah sebuah operator yang mendefinisikan semua item daftar yang memegang awalan, ico. Atau Anda dapat mengganti tanda sisipan (^) dengan tanda dolar ($) untuk menargetkan daerah akhiran judul Anda. Dengan cara ini CSS3 tahu untuk menambahkan gambar latar belakang di mana Anda bisa mengatur judul sebagai 'pertama ico' atau 'buku ico'. silahkan membaca lebih banyak tentang penyeleksi atribut di mana saja atau tutor lain jika Anda tertarik.

Demikian semoga memberi anda pengertian baru dan berguna untuk blog atau web anda...