Мазмұн Маркетинг

Сіз білмеуіңіз мүмкін 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;
}

нәтиже

Жүргізіңіз
Мұнда!
  • Анимациялар: 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;
}

нәтиже

Жүргізіңіз
Мұнда!
  • 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 Сізге бұл мазмұнды ақысыз ұсына алады, өйткені біз сайтымызды жарнамадан түсетін табыс, серіктестік сілтемелері және демеушілік арқылы монетизациялаймыз. Сайтымызды көрген кезде жарнама блокаторын алып тастасаңыз, біз ризамыз.