Верстка и веб-дизайн. Лабораторное занятие №7. Masked-верстка на основе шаблона рядов

мая 21, 2020

Верстка и веб-дизайн. Лабораторное занятие №7. Masked-верстка на основе шаблона рядов

Вам нужно создать страницу с фоном-иллюстрацией, поверх которой расположена цветная маска, разрезающая фото с помощью grid-шаблона рядов.

Вам потребуются:

I) Внедренный шрифт Google;

II) Параметры стилей в CSS;

III) HTML;

Фото для фона-иллюстрации загрузите на sites.google.com

I) Внедренный шрифт Google;

1) Выберите свой шрифт здесь: https://fonts.google.com/ и внедрите его через директиву в CSS, например:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

II) Параметры стилей в CSS;

2) Создайте класс, в котором у вас будет находиться фоновое фото. Укажите фоновое фото в параметре background-image. В параметре background-size используйте значение 100vw, в параметре расположения background-position укажите позиции фото, например: center 6vw. Также укажите, что фон не надо дублировать: background-repeat: no-repeat;

3) В селекторе абзаца укажите позицию текста. Также добавьте здесь каким цветом будут заданы шрифты:

p {
position: absolute;
bottom: 0;
margin-bottom: 0.4vw;
}

4) Для рядов задаем идентификатор с выравниванием текста:

#row2b {
text-align:right;
}

5) Задаем наследование идентификатора абзацу. Здесь же вы указываете имя вашего шрифта:

#row2b > p {
font-family: 'Roboto', serif;
position: relative;
font-size: 42px;
}

6) Отступы для производных идентификаторов:

#row2b > p:nth-child(1){
margin-top: 5vw;
}

#row2b > p:nth-child(2){
margin-top: -1vw;
font-size: 7.5vw;
}

7) Создаем идентификатор грида с отступами, числом рядов и их расположением:

#grid {
display: grid;
grid-gap: 1vw;
grid-template-rows: 5vw;
grid-auto-rows: 9vw;
grid-template-columns: 1fr repeat(6, 3fr) 1fr;
}

8) Наследуем параметры грида к разделителям, указываем цвет, который будет использоваться в виде маски (замените на свой):

#grid > div {
position: relative;
background-color: #696969;
outline-style: solid;
outline-color: #696969;
outline-width: 1vw;
}

9) Через запятую перечисляем все идентификаторы сетки с клетками их появления в шаблоне:

div#row1a,div#row2a,div#row3a,div#row3b,div#row4a,div#row5a,div#row5b,div#row6a {
background-color:rgba(64,67,78,0.4);
}

10) Теперь указываем участки границ верстки:

#row1a, div#row5a {
grid-column-end: span 3;
}

#row1b, div#row2b, div#row3b, div#row5c {
grid-column-end: span 2;
}

div#row2b {
grid-row-end: span 2;

}

III) HTML;

11) Указываем традиционные параметры:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">

12) В теге <title> задаем произвольный заголовок.

13) Встраиваем стили, закрываем </head> и располагаем шаблон внутри <body>.

14) Внутри класса из пункта 2 располагаем все последующие ряды шаблона:

15) Создаем идентификатор <div id="grid">

16) Создаем нулевой ряд для отступа сверху. Это просто восемь строк тегов
<div></div>

17) Открываем первый ряд. В нем есть как пустые ряды, так и текстовый абзац (используйте свой текст):

<div></div>
<div></div>
<div id="row1a"></div>
<div id="row1b"><p>James Hugh Calum Laurie is an English actor, director, singer, musician, comedian and author.</p></div>
<div></div>

18) Второй ряд с заголовком. Если заголовок не будет вмещаться в строку, отрегулируйте размер шрифта в соответствующем классе:

<div></div>
<div id="row2a"></div>
<div id="row2b"><p>Hugh Laurie</p></div>
<div></div>
<div></div>
<div></div>
<div></div>

19) Третий ряд:

<div></div>
<div id="row3a"></div>
<div id="row3b"></div>
<div></div>
<div></div>

20) Четвертый ряд:

<div></div>
<div></div>
<div></div>
<div id="row4a"></div>
<div></div>
<div></div>
<div></div>
<div></div>

21) Пятый ряд с текстовым абзацем:

<div></div>
<div id="row5a"></div>
<div id="row5b"></div>
<div id="row5c"><p>Between 2004 and 2012, Laurie starred as an acerbic physician specialising in diagnostic medicine, Dr. Gregory House</p></div>
<div></div>

22) И завершающий шаблон шестой ряд:

<div></div>
<div></div>
<div id="row6a"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

23) Закрываем идентификатор грида и оставшиеся теги </body> и </html>.

24) Задание на внимательность - используя псевдокласс :hover сделайте так, чтобы при наведении курсора на грид отображалось скрытое под маской фото (как в примере).

Если все верно, то результат будет выглядеть как в примере: https://konoplevtech4.blogspot.com/2020/05/masked-grid.html. Ответы на задание принимаются в комментариях к данному посту до 12:00 25 мая.