ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивое оформление CSS блока для сайта

Красивое оформление CSS блока для сайта

Стильно оформить блок, чтоб пользователи и гости обратили внимание, где представлен готовый корпус под стильное оформление с помощью CSS. Думаю согласитесь, что это пол работы, так что давайте сделаем его оригинальным. Добавим теней в низ, где распространим их стильно, чтоб по умолчанию видно было. Также будет добавлен эффект, где у нас установлена картинка или знак, который может собой показывать, что за тематика, если вы нажмете на название и перейдете на основной материал или статью. Так вот, теперь этот снимок будет проворачиваться на 180 градусов.

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

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

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

Приступаем к установке:

HTML

Код

<div class="demons-tratiprowes">
<div class="masivelyscal-edupversion">
  <div class="derukan">
  <i class="fa fa-birthday-cake"></i>
  </div>
  <h3>ZorNet.Ru: сайт вебмастера №1</h3>
  <p>Здесь подключен шрифт "Font Awesome"</p>
</div>
<div class="masivelyscal-edupversion">
  <div class="derukan">
  <img src="https://atuin.ru/demo/icons/icon-7.png" />
  </div>
  <h3>ZorNet.Ru: портал №1</h3>
  <p>Картинка на изображение формата PNG</p>
</div>
</div>

CSS

Код

.masivelyscal-edupversion {
  margin: 15px 0;
  border: 2px solid #fdfdfd;
  width: 100%;
  padding: 12px;
  display: table;
  background: #cecece;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0px 3px 7px rgba(97, 91, 91, 0.31), 0px 9px 28px -12px rgba(29, 28, 28, 0.24);
}

.masivelyscal-edupversion .derukan {
  display: table-cell;
  vertical-align: top;
  width: 60px;
  padding: 12px 12px 0 0;
  text-align:center;
}
.masivelyscal-edupversion .derukan i,
.masivelyscal-edupversion .derukan img {
  font-size:29.8px;
  color: #3f8dce;
  transition: all .4s;
  width: 31px;
  height: 31px;
}
.masivelyscal-edupversion .derukan img {
  opacity: .8;
}
.masivelyscal-edupversion:hover .derukan i,
.masivelyscal-edupversion:hover .derukan img {
  font-size:48px;
  color: #246faf;
  transform: rotate(-360deg);
  width: 47px;
  height: 47px;
  opacity: 1;
}
.masivelyscal-edupversion h3 {
  transition: all 0.5s ease 0s;
  color: #11548e;
  font-size: 19px;
  margin: 5px 0;
}
.masivelyscal-edupversion:hover h3 {
  color: #171616;
}

.demons-tratiprowes {
  width: 29%;
}

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

Демонстрация

08 Августа 2018 Просмотров: 2199 Комментариев: (0)

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

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

Kosten

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