26/26. Финальное испытание, что можно улучшить?

Курсы §25. Оформление текста с помощью CSS. Часть 2
1 
html, 
body {
    min-width: 570px;
    height: 300px;
    margin: 0;
    font-family: "Arial", sans-serif;
    color: #ffffff;
    background: url("football.jpg") 50% 50% no-repeat;
}

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

h1::before {
    content: "|";
    position: absolute;
    top: -5px;
    left: -55px;
    font-size: 55px;
    font-weight: bold;
    text-shadow: 
        20px 0 0 #fff,
        40px 0 0 #fff;
}

Кто добавил две палочки в контент content: "|", а не тени к одной - у вас будет 99%, долго искал причину)

1 лайк
2

У меня работает без этого, а у Вас?

Это я к тому, что палочка одна, – две других – тени первой, поэтому и межбуквенный интервал не нужен…

3

Да, я сначала три палочки вместо одной написал и через letter spacing седлал - получилось 99%. Убрал, спасибо за ответ

4

Блин, я тоже хитрый дописал палочки и удивлялся потом, что не получалось :man_facepalming:

5

Вот почему так сложно делать, когда сам подгоняешь всё. А в итоге решения такие простые…

6

Сижу с Google Chrome и почему то не срабатывает text-indent: 100px; на текст. Вот так отображается:

image
image.jpg1389×912 405 KB

Думал мб проблема в самом браузере, но проверка дала тот же результат, хотя и засчитала 100%, в общем не понимаю из за чего так… (пробовал менять абзац через псевдоклассы но результата не добился, решил скопировать код выше и результат тот же…)

7

Знаем об этой проблеме, уже разбираемся, спасибо.