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;
}