» »

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

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

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

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

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

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

Кликабельный логотип HTML и CSS

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

Дизайн логотипа на CSS

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.06.2018 Просмотров: 273 Комментарий: (4)

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

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

Комментарий: 4
angkonbd24
angkonbd24 25.06.2018 12:111
0
no working..bro
Kosten
Kosten 26.06.2018 00:413
0
Как понимаю установили логотип, или что треба.
angkonbd24
angkonbd24 25.06.2018 12:132
0
xenforo 2 i use
Kosten
Kosten 26.06.2018 00:414
0
Если по настройке его в анимации, то все в стилях нужно делать.
avatar