Агуулга маркетинг

Таны мэдэхгүй байж болох CSS3-ийн онцлогууд: Flexbox, Grid Layouts, Custom Properties, Transitions, Animations, and Multiple Backgrounds

Загварын каскадын хүснэгтүүд (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
Энд!
  • Зургууд: 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 мэргэжилтэн, илтгэгч юм. Дуглас бол Даммигийн гарын авлага, бизнесийн манлайллын номыг хэвлүүлсэн зохиолч юм.

    холбоотой зүйл

    Дээшээ буцах товч
    Хаах

    Adblock илэрсэн

    Martech Zone Бид зар сурталчилгааны орлого, түншлэлийн холбоос, ивээн тэтгэгчээр дамжуулан сайтаа мөнгөжүүлдэг учраас энэ агуулгыг танд ямар ч үнэгүйгээр өгөх боломжтой. Та манай сайтыг үзэж байхдаа зар хориглогчоо устгавал бид талархах болно.