- Теория
- Теория
Испытание: поиграйся со шрифтами
Кекс не только кот-веб-разработчик, но и авантюрный предприниматель, хотя и не всегда удачливый.
И на этот раз он решил запустить серию спортивной формы для котов. Сайт он как-нибудь сделает сам, форму шить будет хозяйка. Самое сложное оказалось придумать название и логотип для него.
Название было придумано свежее и ультрамодное 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
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.