![](https://hayti.am/wp-content/uploads/2024/02/css-template_01.png)
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
body {
font-family: Inter, sans-serif;
background-color: black;
}
.div-01 {
display: flex;
position: relative;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: black;
height: 100vh;
}
.div-02 {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@keyframes effect {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
.effect {
--stripesDark: repeating-linear-gradient(100deg,
#000 0%,
#000 7%,
transparent 10%,
transparent 12%,
#000 16%);
--rainbow: repeating-linear-gradient(100deg, rgb(147, 80, 17) 20%, rgb(244, 209, 8) 40%,
rgb(9, 150, 244) 80%);
;
background-image: var(--stripesDark), var(--rainbow);
background-size: 300%, 200%;
background-position: 50% 50%, 50% 50%;
filter: blur(10px) opacity(90%) saturate(200%);
mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
pointer-events: none;
position: absolute;
top: -2.5rem;
right: 400px;
bottom: -2.5rem;
left: -2.5rem;
opacity: 0.5;
}
.effect::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--stripesDark), var(--rainbow);
background-size: 200%, 100%;
animation: effect 20s linear infinite;
background-attachment: fixed;
mix-blend-mode: difference;
}
.h1-01 {
display: flex;
position: relative;
color: #ffffff;
font-size: 20px;
line-height: 1;
font-weight: 700;
align-items: center;
border: 2px solid white;
border-radius: 15px;
opacity: 0.8;
}
.span-01 {
padding: 0.5rem;
margin-left: 0.25rem;
background-color: white;
line-height: 1;
border-radius: 0.75rem;
}
.span-02 {
color: #000000;
}
fieldset {
border-radius: 15px;
background: rgba(164, 164, 164, 0.2);
backdrop-filter: blur(20px);
border-radius: 15px;
}
label {
display: inline-block;
}
input {
height: 35px;
border-radius: 15px;
width: 200px;
}
.lab_inputs {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.inputDiv {
color: white;
}
form {
position: absolute;
}
.div-03 {
text-align: center;
}
.btn-01 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
background: rgb(0, 140, 255);
color: #ffffff;
font-size: 0.875rem;
line-height: 1.25rem;
border-radius: 90px;
border-width: 1px;
width: 200px;
height: 35px;
}
hayti
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
Вставляет начертания шрифтов Inter из Google Fonts в два удобрения (400 и 700) и отмечает, что он должен отображаться через тип «swap».
body {
font-family: Inter, sans-serif;
background-color: black;
}
Семейство шрифтов определяет Inter (или sans-serif, если он недоступен) для всего документа.
Устанавливает черный цвет фона body.
.div-01 {
display: flex;
position: relative;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: black;
height: 100vh;
}
Определяет блок типа flex по столбцу и центрирует его содержимое как по горизонтали, так и по вертикали.
Устанавливает черный цвет фона.
Высота устанавливается на 100 высоты области просмотра.
.div-02 {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Скрывает прокрутку.
Располагает элемент так, чтобы он покрывал всю область просмотра.
@keyframes effect {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
Определяет кадровую анимацию, называемую «effect», которая изменяет положение фона из одного состояния в другое.
.effect {
--stripesDark: repeating-linear-gradient(100deg,
#000 0%,
#000 7%,
transparent 10%,
transparent 12%,
#000 16%);
--rainbow: repeating-linear-gradient(100deg, rgb(147, 80, 17) 20%, rgb(244, 209, 8) 40%,
rgb(9, 150, 244) 80%);
;
background-image: var(--stripesDark), var(--rainbow);
background-size: 300%, 200%;
background-position: 50% 50%, 50% 50%;
filter: blur(10px) opacity(90%) saturate(200%);
mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
pointer-events: none;
position: absolute;
top: -2.5rem;
right: -2.5rem;
bottom: -2.5rem;
left: -2.5rem;
opacity: 0.5;
}
Различные свойства: свойства фона, фильтры, маска, положение и прозрачность.
Настраивает сложный эффект с градиентным фоном, размытием и другими стилями.
Позиция является «абсолютной» для перемещения элемента.
.effect::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--stripesDark), var(--rainbow);
background-size: 200%, 100%;
animation: effect 20s linear infinite;
background-attachment: fixed;
mix-blend-mode: difference;
}
Различные свойства конечного результата анимации: положение элемента, свойства фона, анимация и т. д.
Снято с использованием ранее определенного элемента effect и @keyframes.
background-attachment — фиксирует фоновое изображение, чтобы оно не перемещалось вместе с содержимым страницы.
mix-blend-mode – выполняет смешивание цветов фона и переднего плана.
В результате получается непрерывно повторяющаяся анимация длительностью 20 секунд и с одинаковой скоростью, которая постоянно меняет положение фона (.effect, effect::after) и отображает эффект путем смешивания цветов фона.
.h1-01 {
display: flex;
position: relative;
color: #ffffff;
font-size: 20px;
line-height: 1;
font-weight: 700;
align-items: center;
border: 2px solid white;
border-radius: 15px;
opacity: 0.8;
}
Различные свойства: тип flex, положение, цвет, размер шрифта, высота строки, толщина шрифта и прозрачность.
Стилизирует заголовок.
.span-01 {
padding: 0.5rem;
margin-left: 0.25rem;
background-color: white;
line-height: 1;
border-radius: 0.75rem;
}
Различные свойства: отступы, поля, цвет фона, высота строки и радиус границы.
Стилизованный прямоугольник с закругленными углами на белом фоне.
.span-02 {
color: #000000;
}
Устанавливает цвет текста на черный.
fieldset {
border-radius: 15px;
background: rgba(164, 164, 164, 0.2);
backdrop-filter: blur(20px);
border-radius: 15px;
}
label {
display: inline-block;
}
input {
height: 35px;
border-radius: 15px;
width: 200px;
}
Различные свойства для стилизации элементов формы, включая радиус границы, фон, смещение, высоту и ширину.
.lab_inputs {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
Определяет гибкий контейнер для элементов формы.
form {
position: absolute;
}
позиция формы установлена на «абсолютную», чтобы отделить ее.
.div-03 {
text-align: center;
}
Кнопка центрирует элемент.
.btn-01 {
background: rgb(0, 140, 255);
color: #ffffff;
font-size: 0.875rem;
line-height: 1.25rem;
border-radius: 90px;
border-width: 1px;
width: 200px;
height: 35px;
}
Различные свойства: фон, цвет, размер шрифта, высота строки, радиус границы, ширина границы, ширина и высота.
Устанавливает стиль кнопки.