ЖМК-301/2. Веб-дизайн. Практическое занятие №11. Neomorphism-дизайн с навигационными карточками
Для создания неоморфизм страницы вам потребуется:
- базовый цвет для всех объектов на странице;
- цвет тени для контраста с основным цветом;
- три иллюстрации для отображения в навигационных карточках. Загрузите их в репозиторий.
CSS
1) Указываем шрифт. Если используйте свой, то замените его в названии:
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900&display=swap');
2) Объявляем псевдокласс root для глобальных переменных. Здесь нужно задать базовый цвет объектов, базовый цвет текста и базовый цвет светлых теней (рефлексов):
:root {
--base-background-color: основной цвет;
--base-text-color: цвет шрифта;
--reflection: цвет рефлексов;
}
3) Указываем общий селектор:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
4) Основное содержание страницы. При необходимости откорректируйте поля:
body {
display: flex;
margin-left: 70px;
margin-top: -25%;
justify-content: center;
align-items: center;
min-height: 100vh;
background: var(--base-background-color);
overflow-x: hidden;
}
5) Класс контейнера, в котором будут лежать карточки:
.container {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 1100px;
}
6) Вложенные карточки:
.container .card {
width: 320px;
margin: 20px;
padding: 40px 30px;
background: var(--base-background-color);
align-items: center;
border-radius: 40px;
box-shadow: -6px -6px 20px var(--reflection), 6px 6px 20px rgba(0, 0, 0, 0.1);
}
7) Они же при наведенном курсоре:
.container .card:hover {
box-shadow: inset -6px -6px 10px var(--reflection), inset 6px 6px 20px rgba(0, 0, 0, 0.1);
}
8) Отображение иллюстрации в карточках:
.container .card .imgNeoMorph {
position: relative;
text-align: center;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
box-shadow: 0 0 0 2px rgba(0,0,0,0.1),
0 0 0 5px var(--base-background-color),
6px 6px 20px rgba(0, 0, 0, 0.5),
-10px -8px 20px rgba(255,255,255,0.5);
}
.container .card .imgNeoMorph img {
width: 100px;
height: 100px;
border-radius: 50%;
}
9) Контент карточек, заголовков, абзацев и ссылок:
.container .card .contentNeoMorph {
position: relative;
margin-top: 20px;
text-align: center;
}
.container .card .contentNeoMorph h2 {
color: var(--base-text-color);
font-weight: 700;
font-size: 1.4rem;
letter-spacing: 2px;
}
.container .card .contentNeoMorph p {
color: var(--base-text-color);
}
.container .card .contentNeoMorph a {
display: inline-block;
padding: 10px 20px;
margin-top: 15px;
border-radius: 40px;
color: var(--base-text-color);
font-size: 16px;
text-decoration: none;
box-shadow: -6px -6px 20px var(--reflection), 6px 6px 20px rgba(0, 0, 0, 0.1);
}
.container .card .contentNeoMorph a:hover {
box-shadow: inset -4px -4px 10px var(--reflection), inset 4px 4px 10px rgba(0, 0, 0, 0.1);
}
.container .card a:hover span {
display: block;
transform: scale(0.98);
}
10) Теперь нам нужен класс, в котором будет находится текст, и к которому будет переход по ссылке из карточек. Создайте его со следующими значениями:
font-size: 16px;
color: white;
font-family: 'Montserrat', sans-serif;
border-radius: 40px;
box-shadow: -6px -6px 20px var(--reflection), 6px 6px 20px rgba(0, 0, 0, 0.1);
height: 200px;
display: flex;
padding: 10px 10px;
justify-content: center;
align-items: center;
11) Отдельно добавляем размер шрифта в абзацах карточек:
.container .card p {
font-size: 15px;
}
HTML
12) Указываем стандартные теги:
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<title>Ваше название</title>
13) Встраиваем CSS, закрываем </head>
14) Открываем <body> задаем класс контейнера:
<div class="container">
15) Указываем классы карты и изображения:
<div class="card">
<div class="imgNeoMorph">
16) Встраиваем изображения для первой карточки
17) закрываем класс изображения </div>
18) Открываем класс контента и указываем заголовок и текстовый абзац:
<div class="contentNeoMorph">
<h2>Venice</h2>
<p>Venice is a city in northeastern Italy and the capital of the region of Veneto. It is built on a group of 126 islands that are separated by expanses of open water and by canals; portions of the city are linked by 472 bridges.</p>
19) Добавляем кнопку в карточке. Также указываем закладку в адресации ссылки - ее имя нужно будет внедрить в класс текста далее для каждой из трех карточек разное:
<a href="#имя закладки"><span>текст кнопки</span></a>
20) Закрываем классы карточки и изображения:
</div>
</div>
21) Повторяем пункты 15-21 для второй и третьей карточки.
22) Закрываем класс контейнера:
</div>
23) Отделяем карточки от блоков текста с помощью тега <br>. Поставьте столько тегов, сколько необходимо.
24) Встройте класс из пункта 10 в HTML, добавив в атрибутах класса идентификатор из пункта 19 по типу: id="имя закладки"
Внутри класса разместите первый блок текста, относящийся к первой карточке.
25) Отделите блок текста от следующего с помощью тега <br>
26) Повторите пункты 24 и 25 для второго и третьего блока текста
27) Закройте оставшиеся теги:
</body>
</html>
Если все верно, то ваша страница будет выглядеть примерно так: https://konoplevdesign3.blogspot.com/p/neomorphism-cards-import-urlhttpsfonts.html
Ссылки на выполненное задание принимаются в комментариях к данному посту для ЖМК-302 до 17:00 17 апреля, для ЖМК-301 - до 17:00 20 апреля.
РЕЗУЛЬТАТЫ:
Акимкина Олеся - 5
Ананина Виктория - 5
Ахрарова Виктория - 5
Власов Максим - 5
Гостева Полина - 5
Григорьева Екатерина - 5
Дашенко Александра - 5
Зубко Сабина - 5
Климович Мария - 5
Кобякова Дарья - 5
Куликова Мария - 5
Маханек Вера - 5
Новая Валентина - 4
Орлова Арина - 5
Слободская Елизавета - 5
Хайруддинов Тимур - 5
Цветкова Виктория - 5
Чугунова Елизавета - 5
Шабалина Виктория - 5
Широкоумова Полина - 5
https://slobodskayaelizavta.blogspot.com/p/neomorphism-cards-import-urlhttpsfonts_73.html#sumka3
ОтветитьУдалитьhttps://makhanekvera.blogspot.com/2026/04/import-urlhttpsfonts.html#ss1
ОтветитьУдалитьКуликова Мария
ОтветитьУдалитьhttps://makhanekvera.blogspot.com/2026/04/import-urlhttpsfonts_15.html#ss2
А почему у вас не ваши задания в вашем блоге находятся?
Удалитьздравствуйте! у меня просто были проблемы с техникой https://kulikovam22.blogspot.com/2026/04/import-urlhttpsfonts.html
Удалитьhttps://kukukukukukukukuky.blogspot.com/p/cards.html#li - Чугунова Елизавета
ОтветитьУдалитьhttps://akimkinaolesia.blogspot.com/p/blog-page.html и еще прошлое задание: ( https://akimkinaolesia.blogspot.com/p/morphism-piano-piano-width-1200px_15.html )
ОтветитьУдалитьТекущее задание не принято. Код скопирован с моего примера и содержит пометку (водяной знак) об этом.
УдалитьИ предыдущее тоже по той же причине. Сделайте самостоятельно.
Удалитьhttps://maxvlasovblog.blogspot.com/p/neomorphism-import-urlhttpsfonts.html#swallow
ОтветитьУдалитьhttps://vikka56.blogspot.com/p/import-urlhttpsfonts_16.html
ОтветитьУдалитьhttps://gostevapolina.blogspot.com/2026/04/blog-post_16.html
ОтветитьУдалитьДИЗАЙН ШИКРЕН, ЭТО ЗАДУМКА
https://mediaeconomicsananina.blogspot.com/2026/04/valik-import-urlhttpsfonts_16.html
ОтветитьУдалитьhttps://wasabibixoxo.blogspot.com/2026/04/zaun-family-import-urlhttpsfonts.html
ОтветитьУдалитьhttps://besheniff.blogspot.com/p/rjhtqws-xvi.html
ОтветитьУдалитьПрактическое задание №11
ОтветитьУдалитьhttps://mariaklimovich.blogspot.com/p/songsfor.html#EVILFUCKINPICKME
Практическое задание №10
https://mariaklimovich.blogspot.com/p/blog-page_17.html
https://shadowdarksaid.blogspot.com/p/import-urlhttpsfonts_16.html
ОтветитьУдалитьhttps://polinashirokoumova.blogspot.com/2026/04/import-urlhttpsfonts_53.html
ОтветитьУдалить9 задание
ОтветитьУдалитьhttps://iamnovaiaa.blogspot.com/2026/04/blog-post.html
10 задание
https://iamnovaiaa.blogspot.com/2026/04/piano-piano-width-1000px-margin-top.html
11 задание
https://iamnovaiaa.blogspot.com/2026/04/import-urlhttpsfonts.html
https://akimkinaolesia.blogspot.com/p/blog-page_19.html , 🌊🌊🌊https://akimkinaolesia.blogspot.com/p/orchid_19.html 🌸🌸🌸
ОтветитьУдалитьhttps://dariakobykova.blogspot.com/2026/04/24-11.html
ОтветитьУдалитьhttps://dashenkoa.blogspot.com/p/neomorphism.html#break
ОтветитьУдалитьhttps://supervikaw.blogspot.com/p/import-urlhttpsfonts.html#class3
ОтветитьУдалитьАхрарова Виктория
ОтветитьУдалитьhttps://vikitoria999.blogspot.com/2026/04/flovers-dreams-import-urlhttpsfonts.html
https://philosopherarishka.blogspot.com/2026/04/import-urlhttpsfonts.html
ОтветитьУдалить