Эффект маски-градиента для изображения
Эффект маски-градиента для изображения
CSS-маски с градиентами - это мощный инструмент современных браузеров. Всего несколько строк кода позволяют превратить обычное изображение в произведение искусства: создать эффект виньетирования, плавного растворения, фокусного пятна или даже сложной геометрической формы. И для этого не нужны ни Photoshop, ни дополнительные скрипты.
CSS-маски обладают несколькими важными преимуществами. Во-первых, они рендерятся непосредственно браузером, не требуя загрузки внешних ресурсов или дополнительных HTTP-запросов. Во-вторых, маски автоматически масштабируются, а с помощью медиа-запросов можно легко адаптировать их параметры для разных устройств. Не менее важны вопросы доступности и SEO: маски не влияют на семантику контента (что сохраняет SEO-оптимизацию), текст остаётся доступным для скринридеров, а клавиатурная навигация работает в обычном режиме.
Начнем с верстки. Она специально сделана элементарной, но безупречной с технической точки зрения: валидной, кроссбраузерной, синтаксически корректной. Чтобы не тратить время на отладку разметки.
Code (HTML) : Убрать нумерацию
- <div class="container">
- <img src="mask.jpg" alt="Маска" />
- <div>Маска</div>
- </div>
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- .container {
- width: 600px;
- height: 450px;
- position: relative;
- border: 1px solid #909090;
- transition: box-shadow 0.3s ease;
- background: #000000;
- }
- .container img {
- width: 100%;
- height: 100%;
- /* Маска с радиальным градиентом */
- -webkit-mask-image: radial-gradient(
- circle at 90% 110%,
- rgba(255, 255, 255, 0.1) 0%,
- rgba(0, 0, 0, 1) 30%
- );
- mask-image: radial-gradient(
- circle at 90% 110%,
- rgba(255, 255, 255, 0.1) 0%,
- rgba(0, 0, 0, 1) 30%
- );
- }
- .container div {
- font-size: 40px;
- font-weight: bold;
- font-family: 'Arial';
- position: absolute;
- bottom: 10px;
- right: 20px;
- color: #FFFFFF;
- }
- </style>
Эффект маски-градиента для изображения
Готовый пример можно посмотреть на демонстрационной странице. Пример работает во всех современных браузерах, адаптирован под мобильные устройства.
Просмотров: 193 | Комментариев: 0
Комментарии
Отзывы посетителей сайта о статье
Комментариeв нет
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 37,744 раза
Поблагодарили 37,744 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 340 |
 |
 |