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

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


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

I) Внедренный шрифт Google;
II) Параметры стилей в CSS;
III) HTML;

Фото для фона-иллюстрации загрузите в репозиторий.


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 27 мая.

Комментарии

  1. Елизавета Петухова25 мая 2022 г. в 12:13

    Здравствуйте! Лабораторная 5. Переживаю, что снова все съехало в сторону. Надеюсь, у Вас хорошо отобразится.
    https://lizo4ckapetuhova.blogspot.com/2022/05/this-demo-requires-css-grid_25.html

    ОтветитьУдалить
  2. Елизавета Петухова25 мая 2022 г. в 13:50

    Лабораторная 6.

    https://lizo4ckapetuhova.blogspot.com/2022/05/6.html

    ОтветитьУдалить
  3. Евгений Рыженьков28 мая 2022 г. в 12:25

    Здравствуйте, отправляю несданные практики:

    3: https://evgenijryzhenkov.blogspot.com/2022/04/blog-post.html

    4: https://evgenijryzhenkov.blogspot.com/2022/05/menu-this-layout-requires-css-grid.html

    5: https://evgenijryzhenkov.blogspot.com/2022/05/menu-this-layout-requires-css-grid_26.html

    6: https://evgenijryzhenkov.blogspot.com/2022/05/blog-post.html (почему-то стрелки сбились в одно место, хотя еще 2 дня назад все было в порядке)

    7: https://evgenijryzhenkov.blogspot.com/2022/05/blog-post_28.html (анимация без причины съехала вниз)

    8: https://evgenijryzhenkov.blogspot.com/2022/05/flip.html

    9: https://evgenijryzhenkov.blogspot.com/2022/05/blog-post_46.html

    ОтветитьУдалить
  4. Елизавета Петухова28 мая 2022 г. в 15:23

    Лабораторная 7:

    https://lizo4ckapetuhova.blogspot.com/2022/05/7-display-animation-keyframes.html

    ОтветитьУдалить
  5. Елизавета Петухова29 мая 2022 г. в 09:23

    Лабораторная 8:
    https://lizo4ckapetuhova.blogspot.com/2022/05/8-bootstrap-flip.html

    Лабораторная 9:
    https://lizo4ckapetuhova.blogspot.com/2022/05/9-masked.html

    ОтветитьУдалить
  6. Алёна Огурцова29 мая 2022 г. в 10:55

    Здравствуйте!

    Лаб. 7: https://atenaogur.blogspot.com/2022/05/7-display-animation-keyframes.html

    Лаб. 8: https://atenaogur.blogspot.com/2022/05/8-bootstrap-flip.html

    Лаб. 9: https://atenaogur.blogspot.com/2022/05/9-masked.html

    ОтветитьУдалить
  7. Валерия Гриднева29 мая 2022 г. в 11:09

    лабораторная шесть: https://leragridneva.blogspot.com/2022/05/6.html

    ОтветитьУдалить
  8. Валерия Гриднева29 мая 2022 г. в 11:09

    лабораторная четыре: https://leragridneva.blogspot.com/2022/05/blog-post_29.html

    ОтветитьУдалить
  9. Валерия Хисамутдинова29 мая 2022 г. в 11:10

    Добрый вечер! Лабораторная 9: https://valeriyakhisamutdinova.blogspot.com/2022/05/james-hugh-calum-laurie-is-english.html

    ОтветитьУдалить
  10. Валерия Гриднева29 мая 2022 г. в 11:10

    лабораторная три: https://leragridneva.blogspot.com/2022/05/3.html

    ОтветитьУдалить
  11. Валерия Гриднева29 мая 2022 г. в 11:10

    лабораторная пять: https://leragridneva.blogspot.com/2022/05/5.html

    ОтветитьУдалить
  12. Валерия Гриднева29 мая 2022 г. в 11:11

    лабораторная 9: https://leragridneva.blogspot.com/2022/05/9_29.html

    ОтветитьУдалить
  13. Валерия Гриднева29 мая 2022 г. в 11:11

    лабораторная 7: https://leragridneva.blogspot.com/2022/05/7.html

    ОтветитьУдалить
  14. Мария Дымшакова31 мая 2022 г. в 00:01

    Здравствуйте, практическая 7: https://dymmrr.blogspot.com/2022/05/blog-post.html , Практическая 8: https://dymmrr.blogspot.com/2022/05/8.html , практическая 9: https://dymmrr.blogspot.com/2022/05/9.html

    ОтветитьУдалить
  15. Viktoria Kotova6 июня 2022 г. в 02:26

    Дмитрий Эдуардович, добрый день!
    Отправляю все предыдущие практики за исключением 8 и 9, так как их ещё выполняю:
    Лабораторная 4: https://kotovavs.blogspot.com/2022/06/4-css-gl.html
    Лабораторная 5: https://kotovavs.blogspot.com/2022/06/5-tiles-css-gl.html
    Лабораторная 6: https://kotovavs.blogspot.com/2022/06/6.html
    Лабораторная 7: https://kotovavs.blogspot.com/2022/06/7-display-animation-keyframes.html (в данной практике возникли проблемы с масштабированием слоёв и по задумке они должны были отображаться иначе, но как-то поправить это мне не совсем удалось)

    ОтветитьУдалить
  16. Viktoria Kotova6 июня 2022 г. в 06:33

    И теперь уже добрый вечер!

    Лабораторная 8: https://kotovavs.blogspot.com/2022/06/8.html
    Лабораторная 9: https://kotovavs.blogspot.com/2022/06/9-masked.html

    ОтветитьУдалить

Отправить комментарий

Популярные сообщения