Маркетингии Content

Хусусиятҳои 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 синф паҳнӣ, баландӣ ва ранги ибтидоии заминаро барои элемент муқаррар мекунад. Дар transition молу мулк муқаррар карда шудааст background-color 0.5s ease барои аниматсия кардани тағирот дар моликияти ранги замина дар тӯли ним сония бо функсияи вақти осон. Дар .box:hover class вақте ки нишоннамои муш дар болои он ҷойгир аст, ранги пасзаминаи элементро тағир медиҳад ва аниматсияи гузаришро ба вуҷуд меорад.

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

Натиҷаи

Hover
Ин ҷо!
  • мутаҳаррикро: 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;
}

Натиҷаи

Hover
Ин ҷо!
  • Хусусиятҳои фармоишии CSS: Ҳамчунин маълум аст тағирёбандаҳои 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 ба шумо имкон медиҳад, ки тасвирҳои пасзаминаи сершуморро барои унсур бо қобилияти назорат кардани ҷойгиршавӣ ва тартиби stacking он муайян кунед. Замина аз ду тасвир иборат аст, 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 мебошад. Дуглас инчунин муаллифи нашршудаи дастури Dummie ва китоби роҳбарияти тиҷорат аст.

    Мақолаҳо марбут

    Бозгашт ба боло
    наздик

    Блоки рекламавӣ ошкор карда шуд

    Martech Zone қодир аст, ки ин мундариҷаро ба шумо бепул пешниҳод кунад, зеро мо сайти худро тавассути даромади таблиғотӣ, истинодҳои шарикӣ ва сарпарастӣ монетизатсия мекунем. Мо миннатдор хоҳем буд, агар шумо ҳангоми дидани сайти мо блокатори таблиғоти худро хориҷ кунед.