ZorNet.Ru — сайт для вебмастера » HTML и CSS » Полупрозрачная рамка бордюра на CSS + HTML

Полупрозрачная рамка бордюра на CSS + HTML

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

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

Установка:

Этот HTML идет на оба представленных вариантов:

1. Вариант:

Прозрачная обводка (border) html вёрстка css

Первый установочный процесс:

HTML

Код

CSS

Код

.bodura_obvoda {
  position: relative;
}
.bodura_obvoda:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 20px solid rgba(51, 122, 183, 0.4);
}
.bodura_obvoda img {
  width: 100%;
}

Здесь помещаем изображение в блок, где псевдоклассом создают прозрачность бордюру в формате RGBA.

2. Вариант:

Как сделать прозрачную рамку с помощью CSS

В данном варианте задействовали второй бордюр, который можете посмотреть в действии на demo странице, где ссылка ниже представлена под вторую вариацию.

CSS

Код

.bodura_obvoda {
  position: relative;
}
.bodura_obvoda:before,
.bodura_obvoda:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 20px solid rgba(51, 122, 183, 0.4);
  transition: border-width 0.2s;
}
.bodura_obvoda:after {
  border-width: 0;
}
.bodura_obvoda:hover:after {
  border-width: 40px;
}
.bodura_obvoda img {
  width: 100%;
}

Как заметили, что не чего сложного нет, а значит по своей характеристике обвода, вы можете задействовать на любой картинке своего портала, что изначально картинка будет видна на любом фоне. То иногда смотришь снимки, а некоторые поставлены на светлый фон, где сами по гамме цвета созданы под аналогичной палитрой.

Что в большинстве она теряется, а здесь при установке красивого обвода, что еще идет на половину прозрачен, то больше привлекает внимание, но точно будет заметен при открытие страница или сайта.

Демонстрация
Источник: atuin.ru

22 Ноября 2021 Загрузок: 2 Просмотров: 908 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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