Форма входа

    Бесплатный раздел

    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

    Как добавить затемненный эффект на изображение на CSS

    Дата добавления: 22.12.2017 - 02:49
    Добавил: Buger
    Количество просмотров: 1.6k
    Количество комментариев: 0
    Размер файла: 1.5 Kb
    Рейтинг материала: 0.0 / 0
    Как добавить затемненный эффект на изображение на CSS
    БЕСПЛАТНО
    рейтинг 0.0
    /
    голосов 0
    В данном примере я покажу вам как при помощи CSS добавить затемненный эффект на изображение, реализация которого не требует дополнительного HTML кода.
    На самом деле, сделать такое очень просто. Для этого нам понадобится написать всего в несколько строк CSS кода.

    Базовая разметка HTML
    Код
    <div class="vignette">
      <img src="https://unsplash.it/g/500/500/?random" />  
    </div>


    Ну а вот сам код стилей (CSS)
    Код
    .vignette:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      background-color: transparent;
      background-image: -webkit-radial-gradient(50% 60%, circle farthest-corner, transparent, rgba(30,20,0,.90) 100%);
      background-image: -moz-radial-gradient(50% 60%, circle farthest-corner, transparent, rgba(30,20,0,.90) 100%);
      background-image: -o-radial-gradient(50% 60%, circle farthest-corner, transparent, rgba(30,20,0,.90) 100%);
      background-image: radial-gradient(50% 60%, circle farthest-corner, transparent, rgba(30,20,0,.90) 100%);
    }

    div {  
      width: 500px;
      height: 500px;
      overflow: hidden;
      position: relative;
      outline: 1px solid #999;
      float: left;
      margin: 50px;
    }
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: