• Теория
  • Теория

Испытание: поиграйся со шрифтами

Кекс не только кот-веб-разработчик, но и авантюрный предприниматель, хотя и не всегда удачливый.

И на этот раз он решил запустить серию спортивной формы для котов. Сайт он как-нибудь сделает сам, форму шить будет хозяйка. Самое сложное оказалось придумать название и логотип для него.

Название было придумано свежее и ультрамодное KEKSOBAS, но вот с логотипом дизайнер подкачал.

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

В общем, правки мелкие, работы на пять минут, думаю, вы быстро справитесь.

Да! Ещё можно нарисовать треугольник из трёх красных непересекающихся линий прозрачного цвета. А, впрочем, на ваше усмотрение.

Подсказка: значения всех задаваемых свойств кратны 5. Все стили нужно задавать для элемента h1. Цвет тени — rgba(0, 0, 0, 0.5).

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

body {
  margin: 0;
  width: 570px;
  height: 300px;
  background: url("football.jpg") -120px -60px no-repeat;
  color: #ffffff;
  font-family: "Arial", sans-serif;
}

h1::before {
  content: "●";
  position: relative;
  font-size: 90px;
  color: #ffffff;
}

h1 {
  position: relative;
  margin: 0;
  width: 320px;
  padding-left: 40px;
  text-transform: uppercase;
  text-shadow: -5px 5px 0 rgba(0, 0, 0, 0.5);
  word-wrap: break-word;
  letter-spacing: 40px;
  font-weight: normal;
  font-size: 80px;
  line-height: 100px;
}
Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Оформление текста. Погружение» тренажёра «Погружение в декоративные эффекты» можно после регистрации и оформления подписки.