Оформление текста, часть 2 94%

Курсы §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;
padding-top: 2px;
height:100%;
font-size: 80px;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 40px;
word-wrap: break-word;
line-height: 96px;
text-shadow: -5px 5px 0px #424242;
opacity: 0.9;

}

h1::before {
content: “|”"|""|";
font-size: 55px;
position: relative;
top: -13px;
right: -5px;
letter-spacing: 4.7px;
font-weight: bold;
margin-right: 40px;
text-shadow: 0px 0px 0px #000000;

}

2

content: “|||”

3

Не то что мне нужно, у меня проблема здесь (при наложении на пару пиксилей 3-4 на вид, ниже чем должно быть): 1

4

Здесь изначально всё неправильно. Хотя бы потому, что не нужно изменять то, что уже написано, когда вы открываете страницу с заданием.
Сбросьте код и начните сначала. Помните о том, что значения всех свойств должны быть кратны пяти. Отступ сверху с помощью padding подправлять не надо. Если всё сделать правильно, то свойство line-height исправит эту разницу. Полупрозрачная тень для текста задается в формате rgba без дописывания отдельного свойства opacity.

1 лайк
5

Спасибо большое, понял в чем косяки, если не сложно объясните где я мог ошибиться, хотелось бы 100%, если присмотреться там минимальный сдвиг по буквам(даже пикселя не будет) а также минимальный сдвиг по ширине палочек

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;
word-wrap: break-word;
font-weight: normal;
letter-spacing: 40px;
text-indent: 100px;
line-height: 100px;
text-shadow: -5px 5px 0px rgba(82, 71, 71, 5);
}

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

1
1.png648×747 507 KB
)

6

Цвет тени выбран неправильно. Должен быть полупрозрачный черный. И для 100% палочки делаются с помощью теней справа и слева от той что посередине. Таким образом, значение свойства content получается “|”.

1 лайк