Садржај маркетинг

ЦСС3 функције којих можда нисте свесни: Флекбок, распореди мреже, прилагођена својства, прелази, анимације и више позадина

Каскадни листови стилова (ЦСС) настављају да се развијају и најновије верзије могу имати неке функције којих можда нисте ни свесни. Ево неких од главних побољшања и методологија уведених са ЦСС3, заједно са примерима кода:

  • Флексибилни распоред кутије (Флекбок): режим изгледа који вам омогућава да креирате флексибилне и прилагодљиве изгледе за веб странице. Помоћу флекбок-а можете лако поравнати и дистрибуирати елементе унутар контејнера. у овом примеру, .container класа користи display: flex да бисте омогућили режим флексбокс распореда. Тхе justify-content својство је постављено на center да хоризонтално центрирате подређени елемент унутар контејнера. Тхе align-items својство је постављено на center да вертикално центрирате подређени елемент. Тхе .item класа поставља боју позадине и паддинг за дете елемент.

ХТМЛ-

<div class="container">
  <div class="item">Centered Element</div>
</div>

ЦСС

.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 цласс поставља боју позадине и паддинг за ставке мреже.

ХТМЛ-

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

ЦСС

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

Резултат

Предмет КСНУМКС
Предмет КСНУМКС
Предмет КСНУМКС
Предмет КСНУМКС
  • Прелази: ЦСС3 је увео низ нових својстава и техника за креирање прелаза на веб страницама. На пример, тхе transition својство се може користити за анимирање промена у ЦСС својствима током времена. У овом примеру, .box цласс поставља ширину, висину и почетну боју позадине за елемент. Тхе transition својство је постављено на background-color 0.5s ease да анимирате промене својства боје позадине у трајању од пола секунде помоћу функције мерења времена за једноставно улазак. Тхе .box:hover класа мења боју позадине елемента када је показивач миша преко њега, покрећући анимацију прелаза.

ХТМЛ-

<div class="box"></div>

ЦСС

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: blue;
}

Резултат

Лебдети
Овде!
  • Анимације: ЦСС3 је увео низ нових својстава и техника за креирање анимација на веб страницама. У овом примеру смо додали анимацију користећи animation имовина. Дефинисали смо а @keyframes правило за анимацију, које наводи да оквир треба да се ротира од 0 степени до 90 степени у трајању од 0.5 секунди. Када се оквир пређе преко, spin анимација се примењује за ротирање кутије. Тхе animation-fill-mode својство је постављено на forwards како би се осигурало да се коначно стање анимације задржи након што се заврши.

ХТМЛ-

<div class="rotate"></div>

ЦСС

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

Резултат

Лебдети
Овде!
  • ЦСС прилагођена својства: Такође познат као ЦСС променљиве, прилагођена својства су уведена у ЦСС3. Они вам омогућавају да дефинишете и користите сопствена прилагођена својства у ЦСС-у, која се могу користити за чување и поновну употребу вредности у вашим стиловима. ЦСС променљиве се идентификују именом које почиње са две цртице, као нпр
    --my-variable. У овом примеру дефинишемо ЦСС променљиву под називом –примари-цолор и дајемо јој вредност #007bff, која је плава боја која се обично користи као примарна боја у многим дизајнима. Користили смо ову променљиву за подешавање background-color својство елемента дугмета, коришћењем var() функцију и прослеђивање имена променљиве. Ово ће користити вредност променљиве као боју позадине за дугме.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Више позадина: ЦСС3 вам омогућава да одредите више позадинских слика за елемент, уз могућност контроле његовог позиционирања и редоследа слагања. Позадина се састоји од две слике, red.png blue.png, који се учитавају помоћу background-image имовина. Прва слика, red.png, налази се у десном доњем углу елемента, док је друга слика, blue.png, налази се у левом горњем углу елемента. Тхе background-position својство се користи за контролу позиционирања сваке слике. Тхе background-repeat својство се користи да контролише како се слике понављају. Прва слика, red.png, подешено је да се не понавља (no-repeat), док друга слика, blue.png, подешено је да се понавља (repeat).

    ХТМЛ-

    <div id="multibackground"></div>

    ЦСС

    #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 је ЦМО оф ОпенИНСИГХТС и оснивача Martech Zone. Доуглас је помогао десетинама успешних МарТецх стартапова, помогао је у дубинској пажњи од преко 5 милијарди долара у Мартецх аквизицијама и инвестицијама, и наставља да помаже компанијама у имплементацији и аутоматизацији њихових продајних и маркетиншких стратегија. Доуглас је међународно признати стручњак за дигиталну трансформацију и МарТецх стручњак и говорник. Даглас је такође објављени аутор Думмие'с водича и књиге о пословном лидерству.

    Повезани чланци

    Назад на врх дугмета
    близу

    Адблоцк откривен

    Martech Zone је у могућности да вам пружи овај садржај без икаквих трошкова јер ми монетизујемо наш сајт путем прихода од огласа, партнерских веза и спонзорстава. Били бисмо захвални ако бисте уклонили свој блокатор огласа док гледате наш сајт.