@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;
}
Սահմանում է flez տեսակի բլոկ ըստ սյունակի և կենտրոնացնում է դրա բովանդակությունը ինչպես հորիզոնական, այնպես էլ ուղղահայաց:
Սահմանում է ֆոնի գույնը սև:
Բարձրությունը սահմանում է 100 տեսադաշտի բարձրության:
.div-02 {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Թաքցնում է scrolling -ը:
Տեղադրում է էլեմենտն այնպես, որ ծածկի ամբողջ տեսադաշտը:
@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;
}
Տարբեր հատկություններ՝ ֆոնային հատկություններ, զտիչներ, դիմակ, դիրք և թափանցիկություն:
Կազմաձևում է բարդ էֆեկտ գրադիենտ ֆոնի, մշուշման և այլ ոճերի հետ:
Դիրքն ‘absolute’ է՝ էլեմենտի տեղաշարժման համար։
.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;
}
Տարբեր հատկություններ form -ի էլեմենտների ոճավորման համար՝ ներառյալ եզրագծի շառավիղը, ֆոնը, շեղվածություն, բարձրությունը և լայնությունը:
.lab_inputs {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
Սահմանում է ճկուն(flex) կոնտեյներ form-ի էլեմենտների համար:
form {
position: absolute;
}
form-ի դիրքը սահմանում է ‘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;
}
Տարբեր հատկություններ՝ ֆոնը, գույնը, տառաչափը, տողի բարձրությունը, եզրագծի շառավիղը, սահմանագծի լայնությունը, լայնությունը և բարձրությունը:
Սահմանում է կոճակի ոճը: