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

Логотип с тенями при помощи HTML + CSS

Этот красивый логотип выполнен при помощи чистого стиля CSS, где предусмотрена красивая графика и имеет отлично выставленные тени с помощью CSS. Если ранее веб-разработчик мог такой тип дизайна исполнить при помощи фотошоп, то сейчас со свойством box-shadow можно сделать каждый элемент оригинально. А точнее закрепить под каждый знак тени, которые могут выставлены, как по всем сторонам или в какую то одну.

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

Так выглядит на темном фоне, где тени просматриваются.

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

HTML

Код

<div class="gevosmaem-nobtrusiv">
  <div class="meurougun-demesign">
  <h1 class="gensurekod-nakatevosma">ZORNET.RU</h1>
  <h1 class="gensurekod-nakatevosma">ZORNET.RU</h1>
  <h1 class="gensurekod-nakatevosma">ZORNET.RU</h1>
  <h1 class="gensurekod-nakatevosma">ZORNET.RU</h1>
  <h1 class="gensurekod-nakatevosma">ZORNET.RU</h1>
  <h1 class="gensurekod-nakatevosma">ZORNET.RU</h1>
  <h1 class="gensurekod-nakatevosma">ZORNET.RU</h1>
  <h1 class="gensurekod-nakatevosma">ZORNET.RU</h1>
  <h1 class="gensurekod-nakatevosma">ZORNET.RU</h1>
  <h1 class="gensurekod-nakatevosma">ZORNET.RU</h1>
  </div>
  <h1 class="busevionsun-kemodenis">ZORNET.RU</h1>
</div>

CSS

Код

.gevosmaem-nobtrusiv {
  margin: 30px auto;
  width: 358px;
  font-size: 85px;
  color: transparent;
}

.meurougun-demesign {
  width: 100%;
  height: 100%;
}

.gensurekod-nakatevosma {
  content: "ZORNET.RU";
  position: absolute;
  z-index: -1;
  color: #000;
  -webkit-filter: blur(2px);
}

.gensurekod-nakatevosma:nth-child(1) { transform: translate(3px, 3px); }
.gensurekod-nakatevosma:nth-child(2) { transform: translate(4px, 4px); }
.gensurekod-nakatevosma:nth-child(3) { transform: translate(5px, 5px); }
.gensurekod-nakatevosma:nth-child(4) { transform: translate(6px, 6px); }
.gensurekod-nakatevosma:nth-child(5) { transform: translate(7px, 7px); }
.gensurekod-nakatevosma:nth-child(6) { transform: translate(8px, 8px); }
.gensurekod-nakatevosma:nth-child(7) { transform: translate(9px, 9px); }
.gensurekod-nakatevosma:nth-child(8) { transform: translate(10px, 10px); }
.gensurekod-nakatevosma:nth-child(9) { transform: translate(11px, 11px); }
.gensurekod-nakatevosma:nth-child(10) { transform: translate(12px, 12px); }

.busevionsun-kemodenis:before {
  content: "ZORNET.RU";
  position: absolute;
  z-index: -1;
  color: #c2c8d4;

  top: -1px;
  left: -1px;
}

.busevionsun-kemodenis {
  position: relative;
  background: #bbbfc5;
  background: -moz-linear-gradient(-45deg, #c2c8d4 0%, #495a79 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#c1c3c7), color-stop(100%,#4d5a71));
  background: -webkit-linear-gradient(-45deg, #c2c8d4 0%,#475671 100%);
  background: -o-linear-gradient(-45deg, #c2c8d4 0%,#495a79 100%);
  background: -ms-linear-gradient(-45deg, #c2c8d4 0%,#495a79 100%);
  background: linear-gradient(135deg, #c9d1e2 0%,#5d6f92 100%);
  -webkit-background-clip: text;
}

Здесь, чтоб произвести полную установку логотипа с помощью стилистике. То изначально разместить в CSS, чтоб отображалось на всех страницах.

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

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

19 Декабря 2018 Загрузок: 2 Просмотров: 1346 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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