Content Marketing
CSS3-ի առանձնահատկությունները, որոնց մասին դուք կարող եք տեղյակ չլինեք՝ Flexbox, Ցանցային դասավորություններ, հատուկ հատկություններ, անցումներ, անիմացիաներ և բազմաթիվ նախապատմություններ
Կասկադային ոճի թերթիկներ (CSS) շարունակեք զարգանալ, և վերջին տարբերակները կարող են ունենալ որոշ առանձնահատկություններ, որոնց մասին դուք նույնիսկ չգիտեք: Ահա մի քանի հիմնական բարելավումներ և մեթոդաբանություններ, որոնք ներդրվել են CSS3-ով, ինչպես նաև կոդերի օրինակներ.
- Ճկուն տուփի դասավորություն (Flexbox): դասավորության ռեժիմ, որը թույլ է տալիս ստեղծել ճկուն և արձագանքող դասավորություններ վեբ էջերի համար: Flexbox-ի միջոցով դուք կարող եք հեշտությամբ հարթեցնել և բաշխել տարրերը տարայի մեջ: այս օրինակում
.container
դասի օգտագործումըdisplay: flex
flexbox-ի դասավորության ռեժիմը միացնելու համար: Այնjustify-content
գույքը սահմանված էcenter
երեխայի տարրը կոնտեյների մեջ հորիզոնական կենտրոնացնելու համար: Այնalign-items
գույքը սահմանված էcenter
երեխայի տարրը ուղղահայաց կենտրոնացնելու համար: Այն.item
class-ը սահմանում է ֆոնի գույնը և լրացումը երեխայի տարրի համար:
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
Արդյունք
Կենտրոնացված տարր
- Ցանցային դասավորություն. դասավորության մեկ այլ ռեժիմ, որը թույլ է տալիս ստեղծել ցանցի վրա հիմնված բարդ դասավորություններ վեբ էջերի համար: Ցանցի միջոցով դուք կարող եք նշել տողեր և սյունակներ, այնուհետև տարրեր տեղադրել ցանցի հատուկ բջիջներում: Այս օրինակում
.grid-container
դասի օգտագործումըdisplay: grid
ցանցի դասավորության ռեժիմը միացնելու համար: Այնgrid-template-columns
գույքը սահմանված էrepeat(2, 1fr)
ստեղծել հավասար լայնությամբ երկու սյունակ: Այնgap
հատկությունը սահմանում է ցանցի բջիջների միջև հեռավորությունը: Այն.grid-item
class-ը սահմանում է ֆոնի գույնը և լիցքավորումը ցանցի տարրերի համար:
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
Արդյունք
Կոդ 1
Կոդ 2
Կոդ 3
Կոդ 4
- Անցումներ: CSS3-ը ներկայացրեց մի շարք նոր հատկություններ և տեխնիկա վեբ էջերում անցումներ ստեղծելու համար: Օրինակ, ի
transition
հատկությունը կարող է օգտագործվել ժամանակի ընթացքում CSS հատկությունների փոփոխությունները աշխուժացնելու համար: Այս օրինակում.box
class-ը սահմանում է տարրի լայնությունը, բարձրությունը և սկզբնական ֆոնի գույնը: Այնtransition
գույքը սահմանված էbackground-color 0.5s ease
ֆոնի գույնի հատկության փոփոխությունները կես վայրկյանի ընթացքում շարժելու համար՝ հեշտացնելու ժամանակի գործառույթով: Այն.box:hover
դասը փոխում է տարրի ֆոնի գույնը, երբ մկնիկի ցուցիչը գտնվում է դրա վրա՝ գործարկելով անցումային անիմացիան:
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
Արդյունք
Սավառնել
Ահա՛:
Ահա՛:
- անիմացիա: CSS3-ը ներկայացրեց մի շարք նոր հատկություններ և տեխնիկա վեբ էջերում անիմացիաներ ստեղծելու համար: Այս օրինակում մենք ավելացրել ենք անիմացիա՝ օգտագործելով
animation
սեփականություն. Մենք սահմանել ենք ա@keyframes
անիմացիայի կանոնը, որը սահմանում է, որ տուփը պետք է պտտվի 0 աստիճանից մինչև 90 աստիճան 0.5 վայրկյանի ընթացքում: Երբ տուփը սավառնում է,spin
անիմացիան կիրառվում է տուփը պտտելու համար: Այնanimation-fill-mode
գույքը սահմանված էforwards
ապահովելու համար, որ անիմացիայի վերջնական վիճակը պահպանվի այն ավարտելուց հետո:
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
Արդյունք
Սավառնել
Ահա՛:
Ահա՛:
- CSS Custom Properties: Հայտնի է նաեւ որպես CSS փոփոխականներ, մաքսային հատկությունները ներդրվել են CSS3-ում։ Նրանք թույլ են տալիս սահմանել և օգտագործել ձեր սեփական հատուկ հատկությունները CSS-ում, որոնք կարող են օգտագործվել ձեր ոճաթերթերում արժեքները պահելու և վերօգտագործելու համար: CSS փոփոխականները նույնացվում են անունով, որը սկսվում է երկու գծիկով, ինչպես օրինակ
--my-variable
. Այս օրինակում մենք սահմանում ենք CSS փոփոխական, որը կոչվում է –primary-color և տալիս ենք դրա արժեքը#007bff
, որը կապույտ գույն է, որը սովորաբար օգտագործվում է որպես հիմնական գույն շատ դիզայնի մեջ: Մենք օգտագործել ենք այս փոփոխականը՝ սահմանելու համարbackground-color
կոճակի տարրի հատկությունը՝ օգտագործելովvar()
ֆունկցիան և անցնելով փոփոխականի անունով: Սա կօգտագործի փոփոխականի արժեքը որպես կոճակի ֆոնի գույն:
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Բազմաթիվ նախապատմություններ. CSS3-ը թույլ է տալիս մի տարրի համար նշել մի քանի ֆոնային պատկերներ՝ դրա դիրքավորումն ու կուտակման կարգը վերահսկելու ունակությամբ: Ֆոնը կազմված է երկու պատկերից,
red.png
ևblue.png
, որոնք բեռնված են՝ օգտագործելովbackground-image
սեփականություն. Առաջին պատկերը,red.png
, տեղադրված է տարրի ներքևի աջ անկյունում, մինչդեռ երկրորդ պատկերը,blue.png
, գտնվում է տարրի վերին ձախ անկյունում: Այնbackground-position
հատկությունն օգտագործվում է յուրաքանչյուր պատկերի դիրքավորումը վերահսկելու համար: Այնbackground-repeat
հատկությունը օգտագործվում է վերահսկելու, թե ինչպես են պատկերները կրկնվում: Առաջին պատկերը,red.png
, սահմանված է չկրկնվելու համար (no-repeat
), մինչդեռ երկրորդ պատկերը,blue.png
, սահմանված է կրկնել (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}