Властивість css "прозорість" - простий спосіб зробити дизайн сайту цікавіше
На сьогоднішній день створення дизайну сайту стає справжнім мистецтвом. Це не просто набір елементів сторінки певного кольору і розміру, шрифти різних стилів і тематичні малюнки. Для того щоб зробити сайт несхожим на інші, привернути увагу відвідувачів і направити його на ті чи інші елементи, використовується величезна кількість способів і інструментів. Серед них є дуже популярне властивість css - прозорість. Ця техніка досить модна та ефектна, а тому застосовується часто. Надати прозорість можна різним об`єктам сторінки сайту - тексту, цілого блоку або зображенні, наприклад. Досягається вона також різними способами. Розглянемо їх нижче.
Параметри завдання прозорості елементів
Параметрів, що дозволяють регулювати ступінь прозорості елементів, кілька. Використовуються вони в залежності від конкретних цілей, а також браузера, під який "підганяється" дизайн. До них належать такі властивості:
- opacity;
- filter;
- PNG-зображення в якості фону.
Значення властивості css "прозорість" змінюються таким чином: чим більше цифра, тим нижче рівень прозорості елемента. У opacity вона варіюється від 0 до 1, в filter - від 10 до 100. Причому останній використовується для браузера Interet Explorer, а для всіх інших застосовується властивість opacity.
Прозорість зображення (змінюється)
Почнемо з варіанту, коли прозорість буде проявлятися при наведенні на елемент курсору мишки.
Розглянемо, як задавати прозорість картинки. CSS пропонує два варіанти. Для цього необхідно прописати її безпосередньо в коді html-документа таким чином:
- Вказуємо шлях до зображення.
- Визначаємо параметри прозорості при наведенні курсору і немає. Для цього використовуємо властивості onmouseover і onmouseout, в яких прописуємо значення opacity і filter.
Ці ж характеристики можна прописати в css-документі, а у вихідному коді додати лише посилання на нього. Результати вийдуть однакові.
Відео: Урок 9 - Прозорість елементів
Прозорість тексту і блоків сторінки
Що стосується тексту або блоку (прозорість 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 "прозорість", Можна зробити його елементи цікавіше і помітніше, приклавши мінімум зусиль. Описані варіанти завдання характеристик прозорості вам в цьому допоможуть.
