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

Красивый логотип YouTube с помощью CSS

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

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

При проверки, где в аналогичном плане будет смотреться, как установите.

HTML

Код

CSS

Код

#asynameiseon {
  margin: 5px auto;
  width: 960px;
  text-align: center;
}

h1 {
  font-family: "Oswald", sans-serif;
  font-size: 147px;
}

.tolpazsarewgan {
  letter-spacing: -5px;
  text-shadow: 0 1px 0 white;
}

.designe-rasekam {
  position: relative;
  padding: 0 19px;
  background-image: -webkit-linear-gradient(bottom, rgb(93, 14, 14) 22%, rgb(222, 45, 45) 61%);
  color: #f3eeee;
  letter-spacing: -5px;
  text-shadow: 0 3px 0 #3c3838;
  border-radius: 50% / 10.9%;
  box-shadow: 0px 12px 18px -3px rgba(29, 27, 27, 0.48);
}

.designe-rasekam::before {
  content: "Tube";
  line-height: 169px;
  position: absolute;
  top: 9%;
  bottom: 9.8%;
  right: -4.9%;
  left: -4.7%;
  background: inherit;
  border-radius: 4.9% / 47%;
}

Чтоб посмотреть как реально будет выглядеть материал, который можно увеличить или наоборот сделать меньше, то для этого ниже ссылка на Demo страницу.

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

14 Августа 2018 Просмотров: 1800 Комментариев: (0)

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

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

Kosten

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