A- A A+
Прозрачность в CSS

В CSS3 появилось огромное множество новых свойств. Если предыдущую версию каскадной таблицы стилей можно было использовать без постоянного обращения в справочники, то теперь возникла необходимость детально разбирать все новшества. В этом уроке рассмотрим, как создается прозрачность элементов.

Свойство OPACITY

Это свойство устанавливает уровень прозрачности элементов страницы.

Значением в opacity является числа в диапазоне от 0.0 до 1.0. При этом полная прозрачность выражается цифрой 0, а 1 устанавливает совершенную непрозрачность.

С помощью чисел от 0.1 до 0.9 выводится полупрозрачность.

Прозрачность текста с opacity

Возьмем для примера любое слово.

CSS - Opacity

Зададим селектору p размер и насыщенность шрифта.

CSS - Opacity

Надпись выглядит так.

CSS - Opacity

Добавляем свойство opacity со значением 0.

CSS - Opacity

Смотрим слово и не видим его, так как оно стало полностью прозрачным.

CSS - Opacity

Меняем значение на 0.4.

CSS - Opacity

Надпись стала полупрозрачной.

CSS - Opacity

Если же цифра будет 1, то никаких изменений не будет, так как прозрачность не будет установлена.

Прозрачность фона с opacity

Задаем фон тексту.

CSS - Opacity

Видим, что особенностью данного свойства является то, что прозрачность действует на все элементы внутри определенного блока. В данном случае, полупрозрачность применилась к тексту и фону. Для фона лучше использовать цвета, о чем будет рассказано далее.

CSS - Opacity

Прозрачность картинки с opacity

Теперь пример с картинкой.

CSS - Opacity

Пока она выглядит вот так.

CSS - Opacity

Применяем полупрозрачность – 0.55.

CSS - Opacity

Картинка как и текст, стала полупрозрачной.

CSS - Opacity

Генератор цвета RGBA

Данный инструмент использует десятичное исчисление. Для трех основных цветов (красного, зеленого и синего) применяется значения от 0 до 255. Можно также задавать цвет в процентах от 0 до 100%.

Последняя буква цвета относится к прозрачности элемента – альфа-каналу. Значения прозрачности в точности совпадают со свойством opacity, от 0 до 1.

Прозрачность фона с RGBA

Применим для фона следующее значение.

CSS - Opacity

Проверяем и видим, что в отличие от свойства opacity, цвет текста не поменялся, а вот фон стал полупрозрачным.

CSS - Opacity

Генератор цвета HSLA

Данный формат цвета отвечает за тон, насыщенность, яркость и прозрачность.

Разберем пример такой записи: hsla(90, 60%, 77%, 0.5).

Первое число (90) – значение тона, который задается в цифрах от 0 до 359.

Второе значение (60%) – насыщенность цвета, используемое в диапазоне от 0% до 100%.

Третье значение (77%) – яркость, также от 0% до 100%.

Последнее значение (0.5) – прозрачность, параметры которой ничем не отличается от предыдущих вариантов использования.

Таким образом, мы рассмотрели три новых возможности CSS3, позволяющие легко задать прозрачность элементам сайта, что ранее было практически невозможно.

 

Комментарии  

#3 0 Александр 27.02.2015 01:58
Цитирую Александр Корякин:
Здравствуйте Виталий и Александр. Спасибо за ваши уроки. Очень помогли в создании сайта, который работает уже 1,5 года gazetamayak.kz (он есть в списке сайтов ваших учеников).
У меня такой вопрос, есть ли возможность привязывать материалы к нескольким категориям. Задумал онлайн справочник на основе бесплатного шаблона, который нашел тут у вас на сайте. Но с толкнулся с проблемой. Например, автомастерскую хочется разместить в категорию Сервис авторемонта и одновременно в категорию региона, в котором она расположена.

Привет я тоже столкнулся с данной проблемой и сам рыскал моя тематика кино и соотвественно это желательно не знаю я попробовал компонент K2 и мне он помог отлично
Цитировать
#2 0 Луговской Александр 17.02.2015 07:00
Цитирую Александр Корякин:
...есть ли возможность привязывать материалы к нескольким категориям..

В Интернете предлагаются только решения, связанные с правкой базы данных и php-кода. А такие действия чреваты неприятными последствиями.
Цитировать
#1 0 Александр Корякин 15.02.2015 16:35
Здравствуйте Виталий и Александр. Спасибо за ваши уроки. Очень помогли в создании сайта, который работает уже 1,5 года gazetamayak.kz (он есть в списке сайтов ваших учеников).
У меня такой вопрос, есть ли возможность привязывать материалы к нескольким категориям. Задумал онлайн справочник на основе бесплатного шаблона, который нашел тут у вас на сайте. Но с толкнулся с проблемой. Например, автомастерскую хочется разместить в категорию Сервис авторемонта и одновременно в категорию региона, в котором она расположена.
Цитировать

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!