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

Адаптивный логотип сайта при помощи CSS

Отличный по своему формату логотип, что визуально смотрится красиво и формате 3D, который подойдет на все тематики интернет ресурса. Вам остается как веб мастеру, это выбрать гамму цвета или выставить тот размер, который вам требуется на ресурсе. Фон не имеет значение, так как эти знаки отлично смотрятся, как на светлом, так и на других оттенках, но думаю, кроме темного, так как этот цвет задействован в стилистике. это самый эффективный способ по изменению, чтоб смотрелось оригинально.

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

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

Так смотрится на светло синем фоне:

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

HTML

Код

CSS

Код

:root {
  font-size: 10px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Alegreya', serif;
  font-weight: 900;
  font-size: calc(2em + 15vw);
  background-color: #1471a2;
  background-image: linear-gradient(#22a7ee, #23688e);
  color: #fff;
  height: 100vh;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

.milogsa {
  display: inline-block;
  position: relative;
  vertical-align: top;
  text-transform: uppercase;
  text-shadow: 0 0.004em #141415,
  0.004em 0 #141415,
  0.004em 0.008em #141415,
  0.008em 0.004em #141415,
  0.008em 0.012em #141415,
  0.012em 0.008em #141415,
  0.012em 0.016em #141415,
  0.016em 0.012em #141415,
  0.016em 0.020em #141415,
  0.020em 0.016em #141415,
  0.020em 0.024em #141415,
  0.024em 0.020em #141415,
  0.024em 0.028em #141415,
  0.028em 0.024em #141415,
  0.028em 0.032em #141415,
  0.032em 0.028em #141415,
  0.032em 0.036em #141415,
  0.036em 0.032em #141415,
  0.036em 0.040em #141415,
  0.040em 0.036em #141415,
  0.040em 0.044em #141415,
  0.044em 0.040em #141415,
  0.044em 0.048em #141415,
  0.048em 0.044em #141415,
  0.048em 0.052em #141415,
  0.052em 0.048em #141415,
  0.052em 0.056em #141415,
  0.056em 0.052em #141415,
  0.056em 0.060em #141415,
  0.060em 0.056em #141415,
  0.060em 0.064em #141415,
  0.064em 0.060em #141415,
  0.064em 0.068em #141415,
  0.068em 0.064em #141415,
  0.068em 0.072em #141415,
  0.072em 0.068em #141415,
  0.072em 0.076em #141415,
  0.076em 0.072em #141415,
  0.076em 0.080em #141415,
  0.080em 0.076em #141415,
  0.080em 0.084em #141415,
  0.084em 0.080em #141415,
  0.084em 0.088em #141415,
  0.088em 0.084em #141415,
  0.088em 0.092em #141415,
  0.092em 0.088em #141415,
  0.092em 0.096em #141415,
  0.096em 0.092em #141415,
  0.096em 0.100em #141415,
  0.100em 0.096em #141415,
  0.100em 0.104em #141415,
  0.104em 0.100em #141415,
  0.104em 0.108em #141415,
  0.108em 0.104em #141415,
  0.108em 0.112em #141415,
  0.112em 0.108em #141415,
  0.112em 0.116em #141415,
  0.116em 0.112em #141415,
  0.116em 0.120em #141415,
  0.120em 0.116em #141415,
  0.120em 0.124em #141415,
  0.124em 0.120em #141415,
  0.124em 0.128em #141415;
  -webkit-text-stroke-color: #141415;
  -webkit-text-stroke-width: 0.024em;
}

.zorner-1 {
  transform: rotate(-2deg);
}

.zorner-2 {
  top: 0.132em;
  margin-left: -0.3em;
  transform: rotate(1deg);
}

.zorner-3 {
  margin-left: -0.35em;
}

.zorner-4 {
  top: 0.135em;
  margin-left: -0.35em;
}

.zorner-4::after {
  content: '';
  position: absolute;
  width: 0.130em;
  height: 0.329em;
  top: 0.2em;
  right: -0.112em;
  background-color: #ececec;
  transform: rotate(5deg);
}

.zorner-5 {
  margin-left: -0.27em;
  z-index: -1;
}

.zorner-6 {
  top: 0.135em;
  margin-left: -0.37em;
  transform: rotate(3deg);
}

.zorner-7 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3em;
  font-weight: 700;
  top: 0;
  margin-left: -0.23em;
}

.zorner-8 {
  top: 0.136em;
  margin-left: -0.28em;
}

.zorner-8::after {
  content: 'tm';
  position: absolute;
  top: 8em;
  right: -2.5em;
  font-family: Arial, sans-serif;
  font-size: 0.06em;
  font-weight: 600;
  color: #141415;
  text-shadow: none;
  -webkit-text-stroke-width: 0;
}

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

24 Апреля 2018 Загрузок: 1 Просмотров: 3119 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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