Content Marketing

คุณสมบัติ CSS3 ที่คุณอาจไม่รู้: Flexbox, Grid Layouts, Custom Properties, Transitions, Animations และพื้นหลังหลากหลาย

สไตล์ชีตแบบเรียงซ้อน (CSS) พัฒนาต่อไป และเวอร์ชันล่าสุดอาจมีคุณลักษณะบางอย่างที่คุณอาจไม่ทราบด้วยซ้ำ ต่อไปนี้คือการปรับปรุงและวิธีการที่สำคัญบางส่วนที่นำมาใช้กับ CSS3 พร้อมด้วยตัวอย่างโค้ด:

  • รูปแบบกล่องที่ยืดหยุ่น (Flexbox): โหมดเลย์เอาต์ที่ช่วยให้คุณสร้างเลย์เอาต์ที่ยืดหยุ่นและตอบสนองสำหรับหน้าเว็บ ด้วย flexbox คุณสามารถจัดตำแหน่งและกระจายองค์ประกอบภายในคอนเทนเนอร์ได้อย่างง่ายดาย n ตัวอย่างนี้, the .container การใช้คลาส display: flex เพื่อเปิดใช้งานโหมดเค้าโครงเฟล็กซ์บ็อกซ์ เดอะ 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 ของ เปิดข้อมูลเชิงลึก และผู้ก่อตั้ง Martech Zone. Douglas ได้ช่วยเหลือสตาร์ทอัพ MarTech ที่ประสบความสำเร็จหลายสิบราย ได้ช่วยเหลือในการตรวจสอบสถานะมูลค่ากว่า 5 พันล้านดอลลาร์ในการซื้อกิจการและการลงทุนของ Martech และยังคงช่วยเหลือบริษัทต่างๆ ในการปรับใช้และทำให้กลยุทธ์การขายและการตลาดเป็นไปโดยอัตโนมัติ Douglas เป็นผู้เชี่ยวชาญด้านการเปลี่ยนแปลงทางดิจิทัลและ MarTech ที่ได้รับการยอมรับในระดับสากล ดักลาสยังเป็นผู้เขียนหนังสือ Dummie's Guide และหนังสือความเป็นผู้นำทางธุรกิจที่ได้รับการตีพิมพ์อีกด้วย

    บทความที่เกี่ยวข้อง

    กลับไปด้านบนปุ่ม
    ปิดหน้านี้

    ตรวจพบการบล็อกโฆษณา

    Martech Zone สามารถจัดหาเนื้อหานี้ให้คุณโดยไม่มีค่าใช้จ่าย เนื่องจากเราสร้างรายได้จากไซต์ของเราผ่านรายได้จากโฆษณา ลิงก์พันธมิตร และการสนับสนุน เรายินดีอย่างยิ่งหากคุณจะลบตัวปิดกั้นโฆษณาของคุณเมื่อคุณดูไซต์ของเรา