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

Курсы §25. Оформление текста с помощью CSS. Часть 2
1

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

h1 {
font-weight: normal;
text-transform: uppercase;
position: relative;
margin: 0;
padding-left: 40px;
width: 300px;
font-size: 80px;
border: 10px solid none;
word-wrap: break-word;
letter-spacing: 40px;
text-shadow:-5px 5px rgb( 0, 0, 0, 0.5);
line-height: 100px;
}

h1::before {
position: absolute;
top: -5px;
left: 45px;
content: “|||”;
font-size: 55px;
font-weight: bold;
letter-spacing: 5px;
text-shadow: none;
}

h1::first-letter {
margin-left: 100px;
}

Результат 99%. Вся проблема в этих горизонтальных линиях. Буду благодарен, если поможете обрести совершенство в 100% :smiley:

2

для отступа первой строки использовать надо text-indent
а для псевдоэлемента нужно было сделать двойную тень
менять уже прописанные стили не нужно было
border не нужен вообще

в ТЗ же описано все:

…но ему хотелось бы, чтобы дизайнер поигрался со шрифтами:

попробовал разные межсимвольные расстояния,

letter-spacing

немного поэкспериментировал с высотой строки,

line-height

может быть с толщиной букв и размером,

font-weight, font-size

чуточку поработал с тенями,

text-shadow

может быть попробовать разбить надпись в несколько строк,

word-wrap

какие-нибудь эффекты,

тут неявно вообще :sunglasses: но методом научного тыка, речь об uppercase

ещё бы неплохо добавить интересный текстово-декоративный элемент

text-indent и двойная тень псевдоэлемента

1 лайк