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