Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Прозрачность в css


Прозрачность элементов CSS

В CSS есть три способа изменить прозрачность элемента: с помощью свойства opacity, с помощью функции rgba(), с помощью функции hsla().

1. Свойство opacity

Свойство opacity позволяет сделать любой элемент веб-страницы частично или полностью прозрачным. Данное свойство изменяет прозрачность элементов, для которых установлено фоновое изображение (картинка) или задан фон с помощью цвета или градиента. Если элемент, для которого применено свойство opacity, содержит внутри себя другие элементы, то они также изменят свою прозрачность. Свойство opacity принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный), например:

h2 {color: #CD6829;} div { background: #CDD6DB; opacity: .3; } Рис. 1. Прозрачность элементов с помощью opacity

2. Функция rgba()

Цветовая модель RGBA создает цветовой оттенок путем смешивания в необходимых пропорциях красного (Red), зеленого (Green) и синего (Blue) цветов, а альфа-канал (Alpha) отвечает за степень прозрачности цвета. В отличие от свойства opacity, для блока, содержащего другие элементы, функция rgba() изменит прозрачность только блока.

Рис. 2. Цветовая модель RGB h2 {color: #CD6829;} div {background: rgba(205, 214, 219, 0.3);} Рис. 3. Прозрачность элементов с помощью функции rgba()

3. Функция hsla()

Функция hsla(), параметры которой означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha), также позволяет задать полупрозрачный цвет.

Оттенки цвета задаются в процентах, используя соответствующее значение из цветового круга. Сам круг разбит на сектора, на границах которых находятся основные цвета:

0/360° — красный цвет 60° — желтый цвет 120° — зеленый цвет 180° — голубой цвет 240° — синий цвет 270° — фиолетовый цвет 300° — пурпурный цвет.

Чтобы получить черный цвет, нужно присвоить показателям тона, насыщенности и яркости нулевое значение — hsla(0, 0%, 0%, 1). Белый цвет получается при 100%-ном значении яркости hsla(0, 0%, 100%, 1), а серый цвет — при нулевом значении насыщенности hsla(0, 0%, 50%, 1).

Рис. 4. Цветовая модель HSL

Удобный конвертер цветов вы найдете здесь.

Как придать прозрачность css-элементу на сайте

Продолжаю разбор новой темы своего блога. На этот раз мы поговорим о такой вещи как прозрачность CSS элементов. Прозрачность применена ко многим элементам новой темы — начиная с рекламного баннера заканчивая счетчиком статистики LiveInternet в подвале.Прозрачность CSS для элемента сайта, или изображения можно задать несколькими способами. Причем можно сделать так, что при наведении курсора степень прозрачности будет меняться. Разберем несколько примеров.

Степень прозрачности регулируется следующими параметрами:

filter:alpha(opacity=от 10 до 100); — для Internet Explorer.opacity:от 0,1 до 1; — для остальных браузеров.

Чем меньше значение, тем больше степень прозрачности и наоборот. Значение 1 (100 для IE) означает отсутствие прозрачности, значение 0,1 (10 для IE) — максимальную степень прозрачности.

Прозрачность CSS

Первый и самый простой пример — прописывание прозрачности для изображения в исходном коде. В этом примере степень прозрачности будет изменяться при наведении курсора.

Код выглядит следующим образом:

1 <img src="путь к изображению" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="путь к изображению" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Или можно сделать так: в css-стилях прописать:

1 2 3 4 5 6 7 8 .img1 { opacity:0.4; filter:alpha(opacity=40); } .img1:hover { /* При наведении */ opacity:1; filter:alpha(opacity=100); }

.img1 { opacity:0.4; filter:alpha(opacity=40);} .img1:hover { /* При наведении */ opacity:1; filter:alpha(opacity=100);}

а на странице использовать следующий код:

1 <img class="img1" src="путь к изображению" />

<img class="img1" src="путь к изображению" />

Результат будет один и тот же:

Аналогичным образом можно сделать прозрачность для CSS-блока и текста. Но обо всем по порядку.

Самый простой способ — это прописать html-код со стилями блока, например вот так:

1 2 <div style="background: #ff9900; opacity:0.4; width:200px; padding:50px;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />Блок CSS</div>

<div style="background: #ff9900; opacity:0.4; width:200px; padding:50px;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />Блок CSS</div>

или, так же как и с изображением, использовать подключенный файл стилей, прописав в нем это:

1 2 3 4 5 6 7 8 9 .blok1{ background: #ff9900; opacity:0.4; width:90px; padding:50px; } .blok1:hover { /* При наведении */ opacity:1; }

.blok1{background: #ff9900;opacity:0.4; width:90px;padding:50px;}.blok1:hover { /* При наведении */opacity:1;}

А на странице вот это:

3d0d85eccfc00558011eaa36ab95de64005

Результат:

Блок CSS

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

Самый простой код вот такой:

1 2 <p style="color: #006600; opacity:0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />Наведи курсор, и текст станет непрозрачным.</p>

<p style="color: #006600; opacity:0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />Наведи курсор, и текст станет непрозрачным.</p>

Ну и вариант с использованием стороннего файла css-стилей:

1 2 3 4 5 6 7 .txt{ color:#006600; opacity:0.4; } .txt:hover { opacity:1; }

.txt{color:#006600;opacity:0.4;}.txt:hover {opacity:1;}

Код для html-страницы:

1 <p class="txt" >Наведи курсор, и текст станет непрозрачным.</p>

<p class="txt" >Наведи курсор, и текст станет непрозрачным.</p>

Результат:

Наведи курсор, и текст станет непрозрачным.

И напоследок. Если же Вам нужно задать прозрачность на постоянной основе, то используйте такие коды:

Для изображения:

1 <img style="opacity:0.4; filter:alpha(opacity=40);" src="путь к изображению" />

<img style="opacity:0.4; filter:alpha(opacity=40);" src="путь к изображению" />

Для CSS-элемента:

1 <div style="background: #ff9900; opacity:0.4; width:200px; padding:50px;" />Блок CSS</div>

<div style="background: #ff9900; opacity:0.4; width:200px; padding:50px;" />Блок CSS</div>

Дополнительно можно задать прозрачность фонового цвета элемента. Для этого код цвета надо прописать в rgba-формате. Степень прозрачности указывается в последней, четвертой, цифре.

Пример:background:rgba(204,0,51,0.509804);

Для текста:

1 <p style="color: red; opacity:0.4; filter:alpha(opacity=40);">Полупрозрачный красный текст</p>

<p style="color: red; opacity:0.4; filter:alpha(opacity=40);">Полупрозрачный красный текст</p>

Мы разобрали несколько вариантов для придания прозрачности CSS-элементам на сайте. Выбирайте наиболее подходящий вариант и используйте при верстке шаблона. Удачи!

прозрачность

Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространении в разных операционных системах, потому что смотрится стильно и красиво. В веб-дизайне полупрозрачность также применяется и достигается за счёт свойства opacity или формата цвета RGBA, который задаётся для фона.

Сделайте блок, показанный на рис. 1. Блок содержит полупрозрачную градиентную рамку с градиентным фоном под заголовком и небольшим указателем. Фон на странице приведён лишь для наглядности эффекта полупрозрачности, вы можете указать любую свою картинку. Минимальная высота блока составляет 100px.

Рис. 1

Для изменения степени прозрачности элемента применяется стилевое свойство opacity со значением от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, непрозрачности объекта. В браузере Internet Explorer это свойство не работает, поэтому специально для него приходится использовать filter, свойство, не входящее в спецификацию CSS. В примере 1 показано, как установить прозрачность слоя для всех браузеров.

Частичная прозрачность при правильном ее использовании весьма эффектно смотрится в дизайне сайта. Главное, чтобы под полупрозрачными блоками был не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной. Такой эффект достигается разными способами и если вспоминать все, включая старомодные методы, то это использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity. Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятная оборотная сторона. Сделаю небольшой обзор, чтобы стало понятно, о чем идет речь, а также для тех читателей, которые не знакомы с нетрадиционными вариантами создания эффекта полупрозрачности.

Для изменения прозрачности элемента в CSS3 предусмотрено свойство opacity, его значение может меняться от 0 до 1. Ноль соответствует полной прозрачности элемента, а единица, наоборот, непрозрачности. Современные браузеры вполне корректно работают с этим свойством за исключением браузера Internet Explorer, поэтому для него приходится использовать специальное свойство filter со значением alpha(Opacity=X), где X может меняться от 0 до 100.

За управление прозрачностью элемента на странице отвечает стилевое свойство opacity, которое относится к CSS3. В качестве значения применяются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта.


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!