ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивный логотип в 3D для сайта на CSS

Адаптивный логотип в 3D для сайта на CSS

Трудно сайт представить без логотипа, но тем более, если есть логотип, который полностью адаптирован и выполнен формате в 3D на CSS3. Стилистика создает красивые элементы, что и написанные заголовки стали не исключение, где можно выставить красивый эффект, что здесь присутствует. Он заключается в том, что когда наводишь курсор, то нижнее описание автоматически по шрифту увеличивается, что красиво и оригинально смотрится. Безусловно все сделано под светлые тона, с применении теней, чтоб появилась такая фигура.

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

Там смотрится по умолчанию:

Здесь видим увеличение второй строки при наведении:

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

HTML

Код

<a href="http://zornet.ru" class="kolesnis-ampegun">ZORNETкомпания
<span>Скрипты и шаблоны сайта</span>
</a>

CSS

Код

.kolesnis-ampegun, .kolesnis-ampegun:hover {
  text-align: center;
  letter-spacing: 2px;
  font-weight: bold;
  display: inline-block;
  color: #f4f6f7;
  font-size: 48px;
  line-height: 48px;
  font-family: 'Russo One', sans-serif;
  text-decoration: none;
  text-shadow: 0 1px 0 #c5c0c0, 0 2px 0 #cac5c5, 0 3px 0 #bfb9b9, 0 3px 0 #bfb2b2, 0 3px 0 #b3aeae, 0 6px 1px rgba(16, 16, 16, 0.13), 0 0 5px rgba(10, 10, 10, 0.12), 0 1px 3px rgba(14, 14, 14, 0.25), 0 2px 3px rgba(16, 16, 16, 0.17), 0 3px 7px rgba(16, 16, 16, 0.22), 0 10px 10px rgba(19, 18, 18, 0.17), 0 18.8px 19.8px rgba(16, 16, 16, 0.16);
}
.kolesnis-ampegun span {
  display: block;
  font-size: 21px;
  font-weight: bold;
  transition: all 0.3s ease;
  letter-spacing: 2px;
  line-height: 29px;
}
.kolesnis-ampegun:hover span {
  font-size: 25px;
}
@media (max-width:750px) {
  .kolesnis-ampegun,
  .kolesnis-ampegun:hover {
  font-size: 35px;
  line-height:38px;
  }
  .kolesnis-ampegun span {
  font-size:17px;
  letter-spacing:1.7px;
  line-height:25.8px;
  }
  .kolesnis-ampegun:hover span {
  font-size: 18px;
  }
}

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

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

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

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

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

Kosten

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