26/26 piece of cake 100% вроде без косяков ) хотя нет. ::before 4.7

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

h1::before {
content: “|||”;
position: absolute;
top: -5px;
left: -55px;
text-indent: 100px;
font-size: 55px;
font-weight: bold;
vertical-align: middle;
letter-spacing: 4.7px;
text-shadow: 0 0 0 transparent;

}

2

У h1::before не нужно менять content. Остальные палочки задать через text-shadow.

1 лайк
3

спасибо

4

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

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