Properti css "transparansi" - cara sederhana untuk membuat situs desain yang lebih menarik

Hari ini, penciptaan desain website menjadi suatu bentuk seni. Ini bukan hanya satu set elemen halaman dari warna tertentu dan ukuran, font gaya yang berbeda dan lukisan tematik. Dalam rangka untuk membuat situs Anda berbeda dari orang lain, untuk menarik perhatian pengunjung dan langsung ke unsur-unsur tertentu, digunakan sejumlah besar metode dan alat. Di antara mereka ada css properti yang sangat populer - transparansi. Teknik ini cukup modis dan glamor, dan karena itu sering digunakan. Transparansi dapat memberikan halaman objek yang berbeda dari situs - blok teks atau seluruh gambar, misalnya. Hal ini juga dicapai dengan cara yang berbeda. Mari kita memeriksa mereka di bawah ini.

Parameter menentukan unsur-unsur transparansi

Parameter untuk mengatur transparansi dari unsur beberapa. Mereka digunakan tergantung pada tujuan khusus, serta browser, yang berada di bawah "disesuaikan" desain. Ini termasuk sifat sebagai berikut:

• opacity;
• menyaring;
• PNG-gambar sebagai latar belakang.

nilai properti css "transparansi" berubah sebagai berikut: semakin tinggi jumlah, semakin rendah tingkat transparansi dari elemen. opacity, itu bervariasi dari 0 ke 1, di filter - dari 10 sampai 100. Dan yang terakhir digunakan untuk browser Interet Explorer, dan semua properti opacity lain yang berlaku.

Transparansi Gambar (mengubah)

Mari kita mulai dengan pilihan yang akan muncul transparan ketika Anda memindahkan item dengan menyeret mouse.

Mari kita mempertimbangkan bagaimana untuk menentukan transparansi gambar. CSS menawarkan dua pilihan. Untuk melakukan ini, Anda harus mendaftar langsung dalam kode html-dokumen sebagai berikut:

1. Menentukan path ke gambar.
2. Kami mendefinisikan parameter transparansi ketika kursor tidak. Untuk melakukan hal ini, kita menggunakan properti dari onmouseover dan onmouseout, yang mengatur nilai opacity, dan filter.

Karakteristik yang sama dapat ditentukan dalam css-dokumen dan kode sumber untuk menambah referensi untuk itu. Hasil ternyata sama.

Transparansi teks dan halaman blok

Adapun teks atau blok (div transparan), css menawarkan opsi, mirip dengan menciptakan citra transparan, Anda harus menggunakan terhubung css-file, di mana parameter yang diinginkan ditetapkan. Anda dapat pergi dan cara yang lebih sederhana. Ketika Anda mengatur blok gaya div style atau teks p meresepkan berikut html-kode untuk onmouseover dan onmouseout elemen. Kedua pilihan bekerja dan menghasilkan hasil yang diinginkan.

transparansi konstan

Dalam beberapa kasus, transparansi suatu objek, elemen desain atau teks yang ingin mengatur secara berkelanjutan. Dalam situasi ini, solusinya adalah lebih sederhana daripada ketika Anda membawa kursor mouse.

elemen css untuk transparansi akan diberikan oleh kode berikut. Dalam blok div style meresepkan nilai untuk latar belakang (misalnya, # ff8800), opacity (misalnya, 0,5) dan lebar (lebar) dan padding (padding).

Untuk gambar nilai-nilai kode membuat dan filter opacity, dan menentukan path ke gambar.

RGBA-metode

Ada pilihan lain untuk menggunakan css properti ini: transparansi dapat diterapkan untuk warna dasar dari setiap elemen desain. Menggunakan metode RGBA. Tiga huruf pertama berdiri untuk warna dasar (merah, fisi, biru), dan yang terakhir - alpha, yang menetapkan tingkat transparansi. Menggunakan RGBA format mengatur transparansi, menunjuk ke angka terakhir. Misalnya, seperti: background: RGBA (240,2,33,0.4035).

kesimpulan

Jadi, dengan menggunakan dalam program kerja di situs desain fitur sederhana namun efektif css "transparansi", Anda dapat membuatnya lebih elemen dengan sedikit usaha menarik dan lebih terlihat. perwujudan yang dijelaskan adalah fitur transparansi kustom akan membantu Anda dengan ini.