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;
    }

    Արդյունք

    Douglas Karr

    Douglas Karr -ի CMO-ն է OpenINSIGHTS և հիմնադիրը Martech Zone. Դուգլասը օգնել է MarTech-ի տասնյակ հաջողակ ստարտափների, աջակցել է ավելի քան 5 միլիարդ դոլարի չափով Martech-ի ձեռքբերումների և ներդրումների պատշաճ ուսումնասիրությանը և շարունակում է աջակցել ընկերություններին իրենց վաճառքի և շուկայավարման ռազմավարությունների իրականացման և ավտոմատացման գործում: Դուգլասը միջազգայնորեն ճանաչված թվային փոխակերպման և MarTech փորձագետ և խոսնակ է: Դուգլասը նաև Դումմիի ուղեցույցի և բիզնեսի առաջնորդության գրքի հրատարակված հեղինակ է:

    Առնչվող հոդվածներ

    Վերադառնալ սկիզբ կոճակը
    փակել

    Հայտնաբերվել է Adblock

    Martech Zone կարող է անվճար տրամադրել ձեզ այս բովանդակությունը, քանի որ մենք դրամայնացնում ենք մեր կայքը գովազդից ստացված եկամուտների, փոխկապակցված հղումների և հովանավորությունների միջոցով: Մենք երախտապարտ կլինենք, եթե մեր կայքը դիտելիս հեռացնեիք ձեր գովազդային արգելափակիչը: