ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект изображения на сайте с помощью CSS

Эффект изображения на сайте с помощью CSS

Если наложить красивый эффект на картинку или изображение, то оно более оригинальная становится, что рассмотрим один способ как сделать. Этот эффект достигается добавлением частично прозрачных слоев над изображением, но мы можем добиться того же стиля с базовыми HTML и CSS. Так будет на снимке накладывать очень мелкие рамки, которые будут выводить по виртуальности на совершенно другой уровень. Что можно просто сравнить от оригинала, и после того, как мы подключим стили.

Плюс в том, что здесь не будет портить обзор, а также для пользователя все понятно, но только все преподносится в уникальном виде. Что есть возможность подключить, это берем за пример вид материалов или комментариев к нему, или просто прикрепить в одному из многих информер, что на сайте будут картинка к материалу выводить. Здесь не имеет значение, темная или светлая, на каждой палитре свой оттенок получается.

Это простой снимок, что обычно загружаем на портал:

Стильный эффект на картинку в CSS

Здесь добавляем фильт CSS и видим изменение:

Эффект изображения веб-сайтов

Как добавить фильтр изменение:

Это очень просто, что нужно изначально знать, это обернуть изображение в div и включить три промежутка после изображения.

Вот как выглядит HTML:

Код

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

Код

.zornet_ru_nidesam {
  float:left;
  position:relative;
  overflow:hidden;
}
.zornet_ru_nidesam img {
  display:block;
  float:left;
}
.zornet_ru_nidesam span.vertam {
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:999px;
  height:999px;
  background:transparent url(http://zornet.ru/Aben/ABGDA/zornet_ru/crt-screen.gif) top left repeat;
}
.zornet_ru_nidesam span.kersam {
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:999px;
  height:69px;
  background:transparent url(http://zornet.ru/Aben/ABGDA/zornet_ru/crt-top.png) top left repeat-x;
}
.zornet_ru_nidesam span.bottom {
  display:block;
  position:absolute;
  left:0;
  bottom:0;
  width:999px;
  height:95px;
  background:transparent url(http://zornet.ru/Aben/ABGDA/zornet_ru/crt-bottom.png) bottom left repeat-x;
}

Это один из многих эффектов, что будет создан по умолчанию и не каких эффектов, только визуально.

Можно посмотреть демонстрацию к этому материалу.

15 Декабря 2017 Просмотров: 1969 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0