[26/26] Помогите, пожалуйста. 91%

Курсы §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;
text-transform:uppercase;
font-size:80px;
font-weight:normal;
display:inline-block;
width:290px;
word-wrap:break-word;
top:-10px;
left:40px;
padding:0;
text-shadow:-5px 5px 0 rgba(0, 0, 0, 0.5);
letter-spacing:40px;
line-height:100px;
}

h1::before {
content: “|||”;
position: relative;
text-shadow:none;
font-size:50px;
font-weight:bold;
letter-spacing:5px;
}

blob.jpg733×494 154 KB

2

у вас изначально в задании была дана часть свойств для h1 и псевдоэлемента - зачем вы их стали исправлять? вам нужно было просто добавить недостающие.

3 
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;
text-shadow: -5px 5px rgba(0, 0, 0, 0.5);
font-size: 80px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 40px;
word-wrap: break-word;
line-height: 100px;
}

h1::before {
content: “|”;
position: relative;
top: -5px;
left: -35px;
font-family: “Arial”, sans-serif;
font-size: 55px;
font-weight: bold;
letter-spacing: 5px;
text-shadow: none;
vertical-align: top;
padding-left: 80px;
text-shadow: -20px 0px,
-40px 0px;
}

blob.jpg766×436 79.8 KB

В чем проблема?

4

проблема в том, что вы изменили свойства, которые изначально были заданы в этом задании для псевдоэлемента.

5

Понял, спасибо!

6

на всякий случай, вот как это было изначально :
h1::before {
content: “|”;
position: absolute;
top: -5px;
left: -55px;
}

7

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

h1::before {
content: “|”;
position: absolute;
top: -5px;
left: -55px;
font-size: 55px;
font-weight: bold;
text-shadow: none;
vertical-align: top;
padding-left: 140px;
text-shadow: -20px 0px,
-40px 0px;
}

Помогите пожалуйста, не могу пройти.

8

вы забыли про одно чудесное свойство, которое позволяет пододвинуть только первую строку абзаца (то бишь, задает “красную строку”) - text-indent (https://htmlacademy.ru/courses/79/run/15)

9

))))))
спасибо, точно, просто забыл ))

10

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

h1::before {
content: “|”;
position: absolute;
top: -5px;
left: -155px;
font-size: 55px;
font-weight: bold;
text-shadow: none;
vertical-align: top;
padding-left: 140px;
text-shadow: -20px 0px,
-40px 0px;
}

11

добавить text-indent: 100px;

12

Извините что здесь спрашиваю, напомните пожалуйста, каким синтаксисом добавить к тени прозрачность в 16ричном формате цвета? (как в rgba помню) а тут забыл

13

Свойство opacity.

14

А как его прописать? “text-shadow: 4px 5px 2px #2eb59f…”?

15

Отдельным свойством с новой строки. Но таким образом вы управляете прозрачностью всего блока, в котором находится текст. То есть, если у вас есть фон у блока с текстом, то его цвет тоже изменится. Помните об этом.

16

Вот я как раз про это и говорю, мне то надо только тени задать прозрачность,а не всему блоку. Получается только через rgba можно прозрачность отдельно тени задать?

17

Получается, что так.
А в чем конкретно проблема, разве нельзя цвет из одного формата в другой перекодировать?

18

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

h1::before {
content: “|”;
position: absolute;
top: -5px;
left: -35px;
text-shadow:
20px 0 0 #ffffff,
-20px 0 0 #ffffff;
font-size: 55px;
font-weight: bold;
}

19

Оцените код, пожалуйста! Совпадение 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;
text-transform: uppercase;
font-size: 80px;
font-weight: normal;
word-wrap: break-word;
letter-spacing: 40px;
text-indent: 100px;
text-shadow: -5px 5px 0 rgba(0, 0, 0, 0.5);
line-height: 100px;
}

h1::before {
content: “|”;
position: absolute;
top: -5px;
left: -55px;
color: transparent;
font-size: 55px;
font-weight: bold;
text-shadow:
0 0 0 #ffffff,
20px 0 0 #ffffff,
40px 0 0 #ffffff;
}