Այսօր եկել է ամենահետաքրքիր պահը, որտեղ մենք սկսելու ենք այն ոճավորել CSS-ի միջոցով։ Այս դասի ընթացքում մենք կկենտրոնանանք մոդալի ձևավորման վրա։ Կաշխատենք ընդհանուր տեսքի, input դաշտերի, կոճակների, տեքստերի և այլնի վրա։ Ինչպես միշտ, ամեն ինչ կկատարենք քայլ առ քայլ, ավելի լավ հասկանալու համար։

Առաջին քայլով, կմաքրենք բրաուզերային default-ները:

Բոլոր բրաուզերներն ունեն իրենց դեֆոլտ ձևավորումները։ Օրինակ՝p teeg-ը կարող է margin ունենալ Chrome-ում, բայց չունենալ Firefox-ում։ Սա կարող է խառնաշփոթ առաջացնել։ Դրա համար միշտ հարկավոր է սկսել reset-ով։

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

Ինչպես հիշում ենք * նշանակում է, որ style-երը կիրառվում են բոլոր էլեմենտներին։
margin-ը արտաքին, իսկ padding-ը ներքին հեռավորություններն են։
box-sizing: border-box-ը նշանակում է՝ padding-ն ու border-ը պետք է ներառվեն էլեմենտի չափի մեջ։ Սա թույլչ չի տա անսպասելի չափից դուրս գալը։

Հաջորդը Body-ի բազային ձևավորումն է։

Մեր ամբողջ մոդալը տեղակայված է body-ի մեջ, այնպես որ եկեք դարձնենք այն կենտրոնացված և հագեցած համապատասխան ֆոնով։ Դրա համար body-ին տալիս ենք․

body {

background-color: #f4f4f4;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

այստեղ background-color-ը մոխրագույն է՝ նուրբ, չշեղող։
font-family-ն sans-serif։
display: flex հատկության կիրառումը թույլ է տալիս մոդալը ճկունորեն դասավորել, իսկ հաջորդող երկու հատկությունների շնորհիվ՝ այն կգա էջի կենտրոն։ Երբ այս հատկությունները կիրառվում են body տարրի վրա, էջում տեղադրված ամբողջ բովանդակությունը՝ ներառյալ մոդալը, կհայտնվեն էկրանի կենտրոնում։
height: 100vh-ը նշանակում է՝ ամբողջ էկրանին համապատասխանող բարձրություն։ Իսկ vh բացվում է որպես view height

Մեր մոդալը տեղադրված է .modal class ունեցող div-ի մեջ։ Եկեք ձևավորենք այս կոնտեյները։ Modal-ին տանք

.modal {

background-color: white;

padding: 2rem;

border-radius: 10px;

width: 40%;

box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) որը ցույց տալիս սև գույն 0.1 թափանցելիությամբ;

}

padding: 2rem՝ այն ներքին կոնտենտը մոդալի եզրերից մի քիչ առանձնացնելու համար է։
border-radius՝ փոքր կլորություն հաղորդելու համար։
width: 40%՝ որպեսի մոդալը զբաղեցնի ընդամենը 40 տոկոսը։
և box-shadow՝ մեղմ ստվեր, որպեսզի տարանջատվի այն ֆոնից։

Անցնելով առաջ հաջորդը Լոգոյի ձևավորում է։

Ինչպես տենսում ենք ֆիգմայում, լոգոն պետք է լինի մեջտեղում, այս դեպքում կարող ենք մի փոքր այլ կերպ լուծենք խնդիրը, օրինակ margin: auto ի շնորհիվ։

.modal-logo img {

display: block;

margin: 10px auto;

width: 50%;

height: auto;

}

Վերլուծելով կոդը կտեսնենք որ ունենք

display: block քանի որ img inline tag է։
margin: 10px auto, 10 պիքսելը վերևից և ներքևից հեռավորությունն է, իսկ auto-ն թելադրում է պահել հավասար հեռավորություն թե աջից, թե ձախից, որի արդյունքում էլ նկարը հայտնվում է կենտրոնում։
և width-ը որը սահմանափակում է չափը, թույլ չտալով խոշոր էկրաններին նկարին ծավալվել, կամ հակառակը։ Իսկ height-ը ապահովում է նկարի ճիշտ չափերը (aspect ratio-ն )

Հաջորդ մեր քայլը Թաբերի ձևավորումն է։

Այս հատվածը վերաբերում է այն տարրերին, որոնք փոխում են մոդալի ներսում գտնվող բովանդակությունը՝ օրինակ՝ “Sign Up” և “Log In” բաժինները, կամ տանում են այլ էջեր: Դրանք կոչվում են թաբեր (tabs)։

Եկե՛ք դիտարկենք կոդը մաս առ մաս և բացատրենք, թե ինչ նպատակի է ծառայում յուրաքանչյուր հատկություն: Այստեղ modal-tab class ով div ին տվել ենք

.modal-tabs {

display: flex;

justify-content: center;

gap: 1rem;

margin-bottom: 1.5rem;

}

display: flex; Ինչը նշանակում է, որ .modal-tabs կոնտեյները (որը պարունակում է թաբերը) դառնում է flexbox տարր։ Սա թույլ է տալիս թաբերը դասավորել կողք-կողքի՝ հորիզոնական ուղղությամբ։
justify-content: center; Սա նշանակում է, որ թաբերը տեղակայվում են կենտրոնում
gap: 1rem; Սա ապահովում է հորիզոնական տարածք թաբերի միջև։
և margin-bottom: 1.5rem; Սա ստեղծում է բացվածք թաբերի և դրանցից ներքևի բովանդակության՝ (օրինակ՝ ինփութ դաշտերի) միջև։ Առանց այս հատկության՝ թաբերը շատ մոտ կլինեին մնացած տարրերին։

իսկ tab class ով div-երին տալիս ենք

.tab {

cursor: pointer;

padding-bottom: 4px;

font-weight: 500;

color: #555;

border-bottom: 2px solid transparent;

}

cursor: pointer; Սա շատ կարևոր փոքր դետալ է։ Երբ օգտատերը հովեր է անում թաբի վրա, մկնիկը փոխվում է դեպի ձեռքի պատկեր։ Սա վիզուալ ազդանշան է, որ այն սեղմվող էլեմենտ է։
padding-bottom: 4px; Սա ավելացնում է փոքր բացվածք թաբի տեքստի և նրա ստորին սահմանի միջև։ Այն ապահովում է, որ ստորին սահմանագիծը չկպնի անմիջապես տեքստին։ Արդյունքում այն ունենում է ավելի մաքուր տեսք։
font-weight: 500; Թաբի տեքստը դառնում է միջին հաստության։ Սա օգնում է, որ այն աչքի ընկնի որպես թեթև վերնագիր՝ առանց չափազանց հաստ լինելու։
color: #555; Սա դարձնում է տարրը մուգ մոխրագույն, այլ ոչ ամբողջովին սև։ Նման երանգները հաճախ օգտագործվում են պասիվ կամ ոչ ակտիվ վիճակներ ցուցադրելու համար։
border-bottom: 2px solid transparent; Սա թույլ է տալիս պատրաստել ակտիվ սահմանի գիծ։ Թեև սկզբում սահմանագիծը տեսանելի չէ, բայց (transparent է) այն արդեն վերցնում է տարածք և դրա շնորհիվ երբ թաբը դառնում է ակտիվ ստորին սահմանագիծը հարթ փոխվում է, առանց որևէ էջի ցնցումների։ Սա կոկիկ և պրոֆեսիոնալ տարբերակ է փոխելու թաբերի ակտիվությունը։

Այն tab-ին, որը ունի նաև active կլասս, տալիս ենք

.tab.active {

color: #000;

border-color: #1da1f2;

}

color: #000;
Երբ թաբը ակտիվ է (այսինքն՝ ընտրված է), մենք նրա գույնը դարձ նում ենք ամբողջովին սև։ Սա ակնարկում է օգտատիրոջը՝ որ այն ներկայումս ակտիվ բաժինն է։

border-color: #1da1f2;

border-color- ի օգնությամբ Ստորին սահմանագծի գույնը դառնում է կապույտ (#1da1f2)։ որը նույնպես ընդգծում է ակտիվ վիճակը՝ միաժամանակ պահելով մինիմալիստական տեսք։

Իհարկե tab-երի փոփոխության գործընթացը պետք է կատարել javascrip-ի միջոցով, սակայն նմանատիպ էֆֆեկտ ստանալու համար կարող ենք :hover-ին տալ նույն հատկությունները։

.tab:hover {

color: #000;

border-color: #1da1f2;

}

Այժմ մկնիկը թաբերի վրա պահելիս նրանք կփոխվեն ցույց տալով ակտիվ թաբի տեսքը.

Շարունակելով մոդալի կառուցումը անցնում ենք Input դաշտերի ձևավորումանը։

.signup-form-ի ներսում գտնվող input դաշերին, որոնք ունեն type text, type email և type password տալիս ենք.

.signup-form input[type="text"],

.signup-form input[type="email"],

.signup-form input[type="password"] {

width: 100%;

padding: 0.75rem;

margin-top: 0.25rem;

margin-bottom: 1rem;

border: 1px solid #ccc;

և

border-radius: 6px;

}

Այս selector-ների մասին դեռ չենք խոսել, բայց ինչպես պատրեկացրեցիք, կարող ենք ընտրել էլեմենտը ըստ իր ատրիբուտի:

Այստեղ width: 100% → թելադրում է որ դաշտը պետք է գրավի ողջ լայնությունը իր կոնտեյների մեջ։
border: 1px solid #ccc → սահմանում է բաց մոխրագույն եզր՝ տեսանելի, բայց ոչ խիստ։
border-radius: 6px → անկյունները դարձնում է կլոր։ Սա այսօրվա մոդայիկ "flat" կամ "soft UI" ոճի մասը է։

Հաջորդիվ յուրաքանչյուր label-ին տալիս ենք.

.signup-form label {

display: block;

font-size: 0.9rem;

color: #333;

}

այստեղ Label-ը ցույց է տալիս, թե ինփութ դաշտը ինչ տվյալ է ակնկալում։
display: block → ստիպում է label-ը լինել ամբողջական տողի վրա՝ այլ տարրերի հետ կողք կողքի չհայտնվելու համար։
font-size: 0.9rem → շատ քիչ փոքրացնում էտեքստը
color: #333 → մուգ մոխրագույն, ոչ ամբողջովին սև։ Սա ավելի մեղմ է աչքի համար։

մեր հաջորդ քայլը փոքր տեղեկության հատվածն է։ small tagին տալիս ենք

.signup-form small {

display: block;

color: #888;

margin-bottom: 1rem;

}

Այս teg-ը սովորաբար օգտագործվում է նշելու ուշադրության արժանի մանրուքներ։ Օրինակ՝ գաղտնաբառի երկարությունը կամ էլ․ փոստի ֆորմատը։
color: #888 → բաց մոխրագույն է, որպեսզի այն չխանգարի հիմնական բովանդակությանը։

Շարունակելով հաջորդը Checkbox-ի և label-ի ոճավորումն է։

.checkbox-container {

display: flex;

align-items: start;

gap: 0.5rem;

margin-bottom: 1.5rem;

}

.checkbox-container input[type="checkbox"] {

margin-top: 0.3rem;

}

Սովորաբար checkbox-ը գալիս է label-ի կողքին։ Այս դեպքում օգտագործում ենք flex դասավորություն, որպեսզի checkbox-ը և նրա label-ը դասավորվեն կողք-կողքի։
` Ի տարբերություն align-items: center-ի, որն ուղղում է տարրերը ուղղահայաց կենտրոնում, start արժեքը դրանք դասավորում է կոնտեյների վերին հատվածում
gap: 0.5rem ապահովում է փոքր տարածքը երկու տարրերի միջև։

Հաջորդ հատվածը Sign up կոճակն է։ որին տալիս ենք

.signup-button {

width: 100%;

padding: 0.75rem;

background-color: #1da1f2;

border: none;

color: white;

font-weight: bold;

border-radius: 6px;

cursor: pointer;

transition: background-color 0.3s;

}

.signup-button:hover {

background-color: #0d8ddc;

}

Այստեղ լայնությունը 100% է, որպեսզի կոճակը համապատասխանի ինփութ դաշտերի չափին։
cursor: pointer → դարձնում է կոճակը սեղմելի, որտեղ մկնիկը վերածվում է ձեռքի։
transition: background-color 0.3s →թույլ է տալիս hover անելիս , գույնը փոփոխել սահուն կերպով։ Առանց Transition-ի, փոփոխությունը կլինի կտրուկ։

Մեր վերջին հատվածը Terms & Privacy տեքստի ոճավորումն է

.terms {

font-size: 0.75rem;

text-align: center;

margin-top: 1rem;

color: #666;

}

.terms a {

color: #1da1f2;

text-decoration: none;

}

Այս տեքստը հաճախ գալիս է ամենավերջում ցույց տալու համար, որ օգտատերը համաձայն է պայմաններին։
Հղումներն ունեն նույն կապույտ գույնը, ինչ կոճակը՝ color: #1da1f2։ Այն պահում է ամբողջ դիզայնի սիմետրիան։
text-decoration: none ի դեպքում հղումները չեն ունենում underline, որպեսզի չծանրացնեն տեսքը։ Բայց ցանկության դեպքում կարելի է ավելացնել underline :hover-ի ժամանակ։

Իսկ հիմա եկեք բացել perview ն և տեսնենք մեր պատրաստած էջը, ահա այն էջը որ ստեղծել ենք այս դասընթացի ընթացքում, որը ունի Responsive կառուցվածք :

Եվ այսպես այս դասի ընթացքում CSS-ի օգնությամբ վերափոխեցինք մեր HTML կառուցվածքը՝ դարձնելով այն գեղեցիկ, ժամանակակից և դիզայնին համապատասխան։ Կիրառեցինք բոլոր այն հիմնական տեխնիկաները, որոնք պետք են պարզ գեղեցիկ UI ստեղծելու համար:

Ահա և այսքանով ավարտեցինք այս դասընթացը: Հաջորդ և այս մակարդակի վերջին դասին կփորձենք մեր մոդալը դարձնել responsive: