Властивість css "прозорість" - простий спосіб зробити дизайн сайту цікавіше

Сьогодні створення дизайну сайту стає справжнім мистецтвом. Це не просто набір елементів сторінки певного кольору і розміру, шрифти різних стилів і тематичні малюнки. Для того щоб зробити сайт несхожим на інші, привернути увагу відвідувачів і направити його на ті чи інші елементи, використовується величезна кількість способів та інструментів. Серед них є дуже популярне властивість css - прозорість. Ця техніка досить модна та ефектна, а тому застосовується часто. Надати прозорість можна різним об`єктам сторінки сайту - тексту, цілого блоку або зображенні, наприклад. Досягається вона також різними способами. Розглянемо їх нижче.

Параметри завдання прозорості елементів

Параметрів, що дозволяють регулювати ступінь прозорості елементів, декілька. Використовуються вони в залежності від конкретних цілей, а також браузера, під який "підганяється" дизайн. До них належать такі властивості:

• opacity;
• filter;
• PNG-зображення в якості фону.

Значення властивості css "прозорість" змінюються таким чином: чим більше цифра, тим нижче рівень прозорості елемента. У opacity вона варіюється від 0 до 1, в filter - від 10 до 100. Причому останній використовується для браузера Interet Explorer, а для всіх інших застосовується властивість opacity.

Прозорість зображення (змінюється)

Почнемо з варіанту, коли прозорість буде проявлятися при наведенні на елемент курсора мишки.

Розглянемо, як задавати прозорість картинки. CSS пропонує два варіанти. Для цього необхідно прописати її безпосередньо в коді html-документа таким чином:

1. Вказуємо шлях до зображення.
2. Визначаємо параметри прозорості при наведенні курсору і немає. Для цього використовуємо властивості onmouseover і onmouseout, в яких прописуємо значення opacity і filter.

Ці ж характеристики можна прописати в css-документі, а у вихідному коді додати лише посилання на нього. Результати вийдуть однакові.

Прозорість тексту і блоків сторінки

Що стосується тексту або блоку (прозорість div), css пропонує скористатися варіантом, аналогічним створенню прозорості зображення, тобто використовувати підключений css-файл, в якому будуть задаватися потрібні параметри. Можна піти і більш простим шляхом. При завданні стилів блоку div style або тексту p прописати наступний html-код для елементів onmouseover і onmouseout. Обидва варіанти працюють і дають потрібний результат.

Прозорість постійна

У деяких випадках прозорість об`єкта, елемента дизайну або тексту потрібно задати на постійній основі. У даній ситуації рішення ще простіше, ніж при наведенні курсору миші.

Для елемента css прозорість буде здаватися таким кодом. У блоці div style прописуємо значення для background (наприклад, # ff8800), opacity (н-р, 0.5), а також ширину (width) і відступ (padding).

Для картинки в код вносимо значення opacity і filter, а також вказуємо шлях до зображення.

RGBA-метод

Існують і інші варіанти використання даної властивості css: прозорість можна застосувати до фонового кольору якого-небудь елемента дизайну. Для цього використовується метод RGBA. Перші три букви означають основні кольори (червоний, цілісний, синій), а остання - alpha, яка і задає рівень прозорості. Використовуючи RGBA-формат, прописуємо ступінь прозорості, вказуючи її в останній цифрі. Наприклад, так: background: rgba (240,2,33,0.4035).

Висновок

Таким чином, використовуючи в ході роботи над дизайном сайту просте, але ефектне властивість css "прозорість", можна зробити його елементи цікавіше і помітніше, приклавши мінімум зусиль. Описані варіанти завдання характеристик прозорості вам у цьому допоможуть.