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

Оформление стильных блоков сайта на CSS

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

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

Вот для наглядности, где идет шрифтовая иконка, и формат PNG:

1. Подключен шрифтовые иконки:

Несколько вариантов оформления раздела на CSS

2. Здесь выставлена ссылка:

Использовать CSS оформление для контактов

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

HTML

Код

<div class="longaplay-tuhroug">
  <i class="fa fa-home"></i>
  <h3>ZorNet.Ru #1</h3>
  <p>Кнопка выводится на шрифте"Font Awesome"</p>
</div>
<div class="longaplay-tuhroug">
  <div class="conditigon">
  <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/icon-zornrwam.png" />
  </div>
  <h3>ZorNet.Ru #2</h3>
  <p>Кнопка выводится с графического файла</p>
</div>

CSS

Код

.longaplay-tuhroug {
  margin:8px 0;
  transition: all 0.8s ease 0s;
  text-align:center;
}
.longaplay-tuhroug i, .longaplay-tuhroug .conditigon {
  font-size: 70px;
  color: #5e94e6;
  border: 5px double #7091f1;
  display: block;
  height: 70px;
  width: 70px;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
  border-radius: 87px;
  box-sizing: content-box;
  cursor: pointer;
}
.longaplay-tuhroug:hover i, .longaplay-tuhroug:hover .conditigon {
  transition: all 0.7s ease 0s;
  border: 6px double #f7f1f1;
  color: #f9f7f7;
  background: #2869a0;
}
.longaplay-tuhroug h3 {
  transition: all 0.7s ease 0s;
  color: #266296;
  position: relative;
  display: inline-block;
  margin: 0 0 5px 0;
  padding: 7px;
  font-size: 20px;
}
.longaplay-tuhroug:hover h3{
  color: #191818;
}
.longaplay-tuhroug h3:before {
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height:2px;
  background: #2b4788;
  content: '';
  opacity: 0;
  transition: opacity 0.4s, transform 0.4s;
  transform: translateY(6px);
}
.longaplay-tuhroug:hover h3:before,
.longaplay-tuhroug:focus h3:before {
  opacity: 1;
  transform: translateY(0px);
}

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

Так как объекты представляют собой специализированный заданный объект, предназначенный специально для реализации и моделирования динамических систем.

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

23 Июля 2018 Просмотров: 1817 Комментариев: (0)

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

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

Kosten

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