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

Логотип с эффектом анимации с помощью CSS

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

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

Рассмотрим как все будет после как поставите:

Это по умолчанию;

Здесь видим, что цвет изменился у одного элемента, что навели курсор;

HTML

Код

<a href="http://zornet.ru" class="kegulangeqim">
  <div><b>ZORNET</b>компания</div>
  <span>ZorNet.Ru: Портал Вебмастера</span>
</a>

CSS

Код

.kegulangeqim,
.kegulangeqim:hover,
.kegulangeqim div {
  position:relative;
  display:inline-block;
  font-size:36px;
  color:#337AB7;
  text-shadow: 2px 4px 3px rgba(19, 18, 18, 0.26);
  font-family: 'Russo One', sans-serif;
  font-weight: 300;
  text-decoration:none;
  margin:17px 0 17px 23px;
  line-height:18px;
}
.kegulangeqim div {
  display:block;
}
.kegulangeqim b {
  letter-spacing: 3px;
  font-size: 43px;
  color: #17659e;
  -webkit-text-stroke: 1px #99c6ec;
  text-shadow: 2px 4px 3px rgba(14, 14, 14, 0.32);
  font-weight: 600;
  background: #f7f7f7;
}
.kegulangeqim span {
  text-shadow: 1px 2px 1px rgba(23, 22, 22, 0.29);
  display: block;
  float: right;
  font-size: 19px;
  color: #4b9aea;
  line-height: 7px;
}
.kegulangeqim:before {
  position:absolute;
  top:-11px;
  left:0;
  content: "";
  border:7px solid #a7ceef;
  width:67px;
  height:67px;
  border-radius:100%;
  transition: all 0.4s ease;
  z-index:-1;
  box-sizing: content-box;
}
.kegulangeqim:hover:before {
  transform: scale(1.1);
  border:7px solid #1C84D0;
}
@media (max-width:750px) {
  .kegulangeqim,
  .kegulangeqim:hover,
  .kegulangeqim div {
  font-size:27px;
  line-height:6px;
  margin:18px 0 18px 18px;
  }
  .kegulangeqim b {
  font-size:31px;
  }
  .kegulangeqim span {
  font-size:15px;
  line-height:3px;
  }
  .kegulangeqim:before {
  top:-12px;
  border:5px solid #9bc9ef;
  width:49px;
  height:49px;
  }
  .kegulangeqim:hover:before {
  border:5px solid #2078b9;
  }
}

Безусловно вы можете внести свои коррективы, если решите, то все делается в CSS, там вся настраиваемая часть вписана, это как уменьшить или сменить палитру цвета.

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

24 Июня 2018 Просмотров: 1204 Комментариев: (4)

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

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

Kosten

Комментарии: 4
Порядок вывода комментариев: angkonbd24 25 Июня 2018 12:11¹ 0 no working..bro Kosten 26 Июня 2018 00:41³ 0 Как понимаю установили логотип, или что треба. angkonbd24 25 Июня 2018 12:13² 0 xenforo 2 i use Kosten 26 Июня 2018 00:41⁴ 0 Если по настройке его в анимации, то все в стилях нужно делать.