мазмун Marketing

Сиз билбеши мүмкүн болгон CSS3 функциялары: Flexbox, Тор макеттери, Ыңгайлаштырылган касиеттер, Өткөөлдөр, Анимациялар жана Бир нече Фондор

Каскаддык стилдердин барактары (CSS) өнүгүүнү улантууда жана акыркы версияларда сиз билбеген кээ бир өзгөчөлүктөр болушу мүмкүн. Бул жерде код мисалдары менен бирге CSS3 менен киргизилген негизги жакшыртуулардын жана методологиялардын айрымдары:

  • Ийкемдүү кутуча схемасы (Flexbox): веб-баракчалар үчүн ийкемдүү жана жооп берүүчү макеттерди түзүүгө мүмкүндүк берген макет режими. Flexbox менен сиз элементтерди контейнердин ичинде оңой тегиздеп, тарата аласыз. бул мисалда, .container класс колдонот display: flex flexbox жайгашуу режимин иштетүү үчүн. The justify-content касиет коюлган center контейнердин ичиндеги бала элементти туурасынан ортого салуу үчүн. The align-items касиет коюлган center бала элементти вертикалдуу борборлоштуруу үчүн. The .item класс бала элемент үчүн фон түсүн жана толтурууну белгилейт.

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 тордун жайгашуу режимин иштетүү. The grid-template-columns касиет коюлган repeat(2, 1fr) туурасы бирдей эки мамычаны түзүү. The gap мулк тор клеткаларынын ортосундагы аралыкты орнотот. The .grid-item класс тор элементтери үчүн фон түсүн жана толтурууну белгилейт.

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 класс элементтин туурасын, бийиктигин жана баштапкы фон түсүн белгилейт. The transition касиет коюлган background-color 0.5s ease фон түсүнүн касиетине өзгөртүүнү жеңилдетүү убакыт функциясы менен жарым секунданын ичинде жандандыруу үчүн. The .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;
}

жыйынтык

Hover
Мына!
  • Animations: CSS3 веб-баракчаларда анимацияларды түзүү үчүн бир катар жаңы касиеттерди жана ыкмаларды киргизди. Бул мисалда биз анимацияны колдонуу менен коштук animation мүлк. Биз аныктадык @keyframes кутуча 0 градустан 90 градуска чейин 0.5 секунддун ичинде айланышы керектигин белгилеген анимация эрежеси. Качан кутучаны алып келгенде, spin кутучаны айландыруу үчүн анимация колдонулат. The 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. Бул мисалда биз –primary-color деп аталган CSS өзгөрмөсүн аныктап, ага маани беребиз #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, элементтин жогорку сол бурчунда жайгашкан. The background-position касиет ар бир сүрөттүн жайгашуусун көзөмөлдөө үчүн колдонулат. The 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 стартаптарына жардам берди, Martech сатып алууларына жана инвестицияларына 5 миллиард доллардан ашык каражатты текшерүүгө жардам берди жана компанияларга сатуу жана маркетинг стратегияларын ишке ашырууда жана автоматташтырууда жардам берүүнү улантууда. Дуглас эл аралык деңгээлде таанылган санариптик трансформация жана MarTech эксперти жана спикери. Дуглас ошондой эле Dummie's guide жана бизнес лидерлик китебинин басылып чыккан автору.

    Тектеш макалалар

    Артка жогорку баскычы
    жакын

    Adblock аныкталды

    Martech Zone Бул мазмунду сизге эч кандай акы төлөбөй бере алат, анткени биз сайтыбызды жарнамадан түшкөн киреше, өнөктөштүк шилтемелер жана демөөрчүлүк аркылуу акча табабыз. Биздин сайтты көрүп жатканыңызда жарнама блокаторуңузду алып салсаңыз, биз ыраазыбыз.