Содржина Маркетинг

Карактеристики на 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: Исто така познат како 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. Даглас е исто така објавен автор на водич за Dummie и книга за бизнис лидерство.

    поврзани написи

    Вратете се на почетокот копче
    Затвори

    Откриен е блок за рекламирање

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