Интернет магазин шабонов
Форма входа

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

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

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

Дата добавления: 22.12.2017 - 02:49
Добавил: Buger
Количество просмотров: 281
Количество комментариев: 0
Размер файла: 1.5Kb
Рейтинг материала: 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;
}
Добавлять комментарии могут только зарегистрированные пользователи.