Web-дизайн. 4 курс. Практическое занятие №5. Neomorphism-дизайн с модулем часов

ноября 10, 2024

Web-дизайн. 4 курс. Практическое занятие №5. Neomorphism-дизайн с модулем часов

Вам нужно создать интерактивный блок, выполненный по правилам неоморфизма. Для этого потребуются стили CSS, динамический сценарий в JavaScript и интеграция стилей и динамики в HTML.

1. Разворачиваем псевдокласс root в котором через двойное тире обозначаем алиасы цветов: основной и его разновидности: темнее и светлее. Используйте алиасы далее в виде имен цветов, цвета также используйте свои:

:root {

--primary-light: #87CEEB;

--primary: #4169E1;

--primary-dark: #00008B;

--white: #FFFFFF;

--blueLight-1: #87CEFA;

--blueLight-2: #7B68EE;

--blueLight-3: #ADD8E6;

--blueDark: #1E90FF;

}

2. Обозначаем общий селектор:

*, *::before, *::after {

margin: 0;

padding: 0;

box-sizing: inherit;

}

3. Задаем селектор страницы. В скобках в свойстве фона используется соответствующий алиас в виде --blueLight-1

html {

box-sizing: border-box;

font-size: 62.5%;

overflow-y: scroll;

background: var();

}

4. Указываем размеры отображаемого объекта:

@media screen and (min-width: 300px) {

html {

font-size: 75%;

}

5. Объявите общий блок соответствующим классом и укажите в нем следующие параметры и нужный вам цвет:

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

font-family: "Roboto", sans-serif;

background: var();

6. Объявите общим классом все объекты внутри общего блока, укажите следующие параметры и цвета их тени:

width: 25rem;

height: 40rem;

border-radius: 3rem;

box-shadow: 0.8rem 0.8rem 1.4rem var(), -0.2rem -0.2rem 1.8rem var();

padding: 4rem;

display: grid;

grid-template-columns: 17.6rem 19rem 20.4rem;

grid-template-rows: repeat(autofit, min-content);

grid-column-gap: 5rem;

grid-row-gap: 2.5rem;

align-items: center;

7. Откройте класс переключателей и соответствующих им классов селекторов. В скобках добавьте свои цвета:

.switch {

grid-column: 1/2;

display: grid;

grid-template-columns: repeat(2, min-content);

grid-gap: 3rem;

justify-self: center;

}

.switch input {

display: none;

}

.switch__1, .switch__2 {

width: 6rem;

}

.switch__1 label, .switch__2 label {

display: flex;

align-items: center;

width: 100%;

height: 3rem;

box-shadow: 0.3rem 0.3rem 0.6rem var(), -0.2rem -0.2rem 0.5rem var(--white);

background: rgba(255, 255, 255, 0);

position: relative;

cursor: pointer;

border-radius: 1.6rem;

}

.switch__1 label::after, .switch__2 label::after {

content: "";

position: absolute;

left: 0.4rem;

width: 2.1rem;

height: 2.1rem;

border-radius: 50%;

background: var();

transition: all 0.4s ease;

}

.switch__1 label::before, .switch__2 label::before {

content: "";

width: 100%;

height: 100%;

border-radius: inherit;

background: linear-gradient(330deg, var() 0%, var(--primary) 50%, var() 100%);

opacity: 0;

transition: all 0.4s ease;

}

.switch input:checked ~ label::before {

opacity: 1;

}

.switch input:checked ~ label::after {

left: 57%;

background: var();

}

8. Создайте класс часов и связанные с ним классы, также укажите алиасы цветов в скобках:

.clock {

grid-column: 1/2;

grid-row: 2/2;

width: 12rem;

height: 12rem;

justify-self: center;

box-shadow: 0.3rem 0.3rem 0.6rem var(), -0.2rem -0.2rem 0.5rem var(--white);

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

position: relative;

}

.clock .hand {

position: absolute;

transform-origin: bottom;

bottom: 6rem;

border-radius: 0.2rem;

z-index: 200;

}

.clock .hours {

width: 0.4rem;

height: 3.2rem;

background: var();

}

.clock .minutes {

width: 0.4rem;

height: 4.6rem;

background: var();

}

.clock .seconds {

width: 0.2rem;

height: 5.2rem;

background: var();

}

.clock .point {

position: absolute;

width: 0.8rem;

height: 0.8rem;

border-radius: 50%;

background: var();

z-index: 300;

}

.clock .marker {

width: 95%;

height: 95%;

border-radius: 50%;

position: relative;

box-shadow: inset 0.2rem 0.2rem 0.5rem var(), inset -0.2rem -0.2rem 0.5rem var(--white);

}

.clock .marker::after {

content: "";

width: 60%;

height: 60%;

position: absolute;

box-shadow: inset 1px 1px 1px var(), inset -1px -1px 1px var(--white);

border-radius: 50%;

top: 20%;

left: 20%;

filter: blur(1px);

}

.clock .marker__1, .clock .marker__2, .clock .marker__3, .clock .marker__4 {

position: absolute;

border-radius: 0.1rem;

box-shadow: inset 1px 1px 1px var(), inset -1px -1px 1px var(--white);

}

.clock .marker__1, .clock .marker__2 {

width: 0.2rem;

height: 0.6rem;

left: 5.6rem;

}

.clock .marker__3, .clock .marker__4 {

width: 0.6rem;

height: 0.2rem;

top: 5.6rem;

}

.clock .marker__1 {

top: 2%;

}

.clock .marker__2 {

top: 98%;

transform: translateY(-0.6rem);

}

.clock .marker__3 {

left: 2%;

}

.clock .marker__4 {

left: 98%;

transform: translateX(-0.6rem);

}

9. Откройте класс текстового поля и связанные с ним классы. Не забудьте про цвета:

.textbox {

grid-column: 1/2;

grid-row: 10/2;

justify-self: center;

width: 17rem;

height: 4rem;

border-radius: 1rem;

box-shadow: 0.3rem 0.3rem 0.6rem var(), -0.2rem -0.2rem 0.5rem var(--white);

display: flex;

justify-content: space-between;

align-items: center;

}

.textbox__icon {

width: 3rem;

height: 3rem;

border-radius: 1rem;

margin: 0 0 0 0.2rem;

display: flex;

justify-content: center;

align-items: center;

font-size: 1.8rem;

color: var();

}

.textbox p {

font-size: 0.9rem;

margin-left: -1.8rem;

color: var();

}

.textbox__close {

width: 1.6rem;

height: 1.6rem;

margin: 0 0.5rem;

display: flex;

font-size: 1.6rem;

color: var();

cursor: pointer;

}

10. Откройте класс переключателя типа "радио" и связанные с ним элементы. Пропишите в них свои цвета:

.squarebox {

grid-column: 1/2;

grid-row: 15/2;

width: 17.4rem;

height: 4rem;

box-shadow: 0.3rem 0.3rem 0.6rem var(), -0.2rem -0.2rem 0.5rem var(--white);

border-radius: 1rem;

display: flex;

align-items: center;

position: relative;

}

.squarebox input {

display: none;

}

.squarebox > input:checked + label {

transition: all 0.5s ease;

color: var();

}

.squarebox__1, .squarebox__2, .squarebox__3 {

width: 5.8rem;

height: 3.6rem;

font-size: 1.4rem;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

color: var();

transition: all 0.5s ease;

}

.squarebox__1:hover, .squarebox__2:hover, .squarebox__3:hover {

color: var(--primary);

}

.squarebox__color {

position: absolute;

height: 3.4rem;

width: 6.2rem;

margin-left: 0.3rem;

border-radius: 0.8rem;

box-shadow: inset 0.2rem 0.2rem 0.5rem var(), inset -0.2rem -0.2rem 0.5rem var(--white);

pointer-events: none;

}

#tab-1:checked ~ .squarebox__color {

transform: translateX(0);

transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}

#tab-2:checked ~ .squarebox__color {

transform: translateX(4.8rem);

transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}

#tab-3:checked ~ .squarebox__color {

transform: translateX(10.6rem);

transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}

11. Откройте класс бегунка и связанные с ним элементы. Цвета ваши:

.slider {

grid-column: 1/2;

grid-row: 19/2;

align-self: center;

display: flex;

flex-direction: column;

}

.slider__box {

width: 100%;

height: 1rem;

cursor: pointer;

box-shadow: inset 0.2rem 0.2rem 0.5rem var(), inset -0.2rem -0.2rem 0.5rem var(--white);

border-radius: 1rem;

position: relative;

display: flex;

justify-content: center;

align-items: center;

}

.slider__btn {

width: 2rem;

height: 2rem;

border-radius: 50%;

background: var(--white);

position: absolute;

box-shadow: 0px 0.1rem 0.3rem 0px var();

z-index: 200;

display: flex;

justify-content: center;

align-items: center;

}

.slider__btn:hover ~ .slider__tooltip {

opacity: 1;

}

.slider__btn::after {

content: "";

position: absolute;

width: 0.8rem;

height: 0.8rem;

border-radius: 50%;

box-shadow: inset 0.2rem 0.2rem 0.5rem var(), inset -0.2rem -0.2rem 0.5rem var(--white);

}

.slider__color {

height: 100%;

width: 50%;

position: absolute;

left: 0;

z-index: 100;

border-radius: inherit;

background: var();

background: linear-gradient(-1deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);

}

.slider__tooltip {

position: absolute;

top: 2.6rem;

height: 2.5rem;

width: 3rem;

border-radius: 0.6rem;

display: flex;

justify-content: center;

align-items: center;

font-size: 1.2rem;

color: var();

box-shadow: 0.3rem 0.3rem 0.6rem var(), -0.2rem -0.2rem 0.5rem var(--white);

opacity: 0;

transition: opacity 0.3s ease;

}

12. Откройте заголовочную часть HTML:

<head>

<title>Neomorph</title>

13. Закройте </head>, внутри <body> разверните сначала класс общего блока (пункт 5), затем класс всех объектов внутри общего блока (6).

14. Теперь последовательно укажите классы переключателя:

</div>

</div>

15. Классы часов:

</div>

16. Класс текстового блока (в нем укажите произвольный текст)

<ion-icon name="color-palette"></ion-icon></div>

<p>Ваш текст</p>

<ion-icon name="close"></ion-icon>

</div>

17. Класс переключателя, в котором укажите произвольный текст:

</div>

18. Класс слайдера:

</div>

19. Закройте общие классы.

20. В JavaScript укажите общий сценарий отображения времени:

const hours = document.querySelector('.hours');

const minutes = document.querySelector('.minutes');

const seconds = document.querySelector('.seconds');

21. Кнопок:

const play = document.querySelector('.play');

const pause = document.querySelector('.pause');

const playBtn = document.querySelector('.circle__btn');

const wave1 = document.querySelector('.circle__back-1');

const wave2 = document.querySelector('.circle__back-2');

22. Слайдера:

const container = document.querySelector('.slider__box');

const btn = document.querySelector('.slider__btn');

const color = document.querySelector('.slider__color');

const tooltip = document.querySelector('.slider__tooltip');

23. Данных времени:

clock = () => {

let today = new Date();

let h = (today.getHours() % 12) + today.getMinutes() / 59; // 22 % 12 = 10pm

let m = today.getMinutes(); // 0 - 59

let s = today.getSeconds(); // 0 - 59

h *= 30; // 12 * 30 = 360deg

m *= 6;

s *= 6; // 60 * 6 = 360deg

rotation(hours, h);

rotation(minutes, m);

rotation(seconds, s);

// call every second

setTimeout(clock, 500);

}

24. Управления мышью:

rotation = (target, val) => {

target.style.transform = `rotate(${val}deg)`;

}

window.onload = clock();

dragElement = (target, btn) => {

target.addEventListener('mousedown', (e) => {

onMouseMove(e);

window.addEventListener('mousemove', onMouseMove);

window.addEventListener('mouseup', onMouseUp);

});

onMouseMove = (e) => {

e.preventDefault();

let targetRect = target.getBoundingClientRect();

let x = e.pageX - targetRect.left + 10;

if (x > targetRect.width) { x = targetRect.width};

if (x < 0){ x = 0};

btn.x = x - 10;

btn.style.left = btn.x + 'px';

let percentPosition = (btn.x + 10) / targetRect.width * 100;

color.style.width = percentPosition + "%";

tooltip.style.left = btn.x - 5 + 'px';

tooltip.style.opacity = 1;

tooltip.textContent = Math.round(percentPosition) + '%';

};

onMouseUp = (e) => {

window.removeEventListener('mousemove', onMouseMove);

tooltip.style.opacity = 0;

btn.addEventListener('mouseover', function() {

tooltip.style.opacity = 1;

});

btn.addEventListener('mouseout', function() {

tooltip.style.opacity = 0;

});

};

dragElement(container, btn);

playBtn.addEventListener('click', function(e) {

e.preventDefault();

pause.classList.toggle('visibility');

play.classList.toggle('visibility');

playBtn.classList.toggle('shadow');

wave1.classList.toggle('paused');

wave2.classList.toggle('paused');

});

25. Закройте теги </body> и </html>

Если все верно, то интерактивный блок будет отображаться как в примере ниже. Другое цветовое решение можно увидеть по ссылке: https://konoplevdesign3.blogspot.com/2022/10/neomorphism.html

Ссылки на выполненное задание принимаются в комментариях к данному посту до 15:00 13 ноября.

Neomorph