ຕະຫຼາດເນື້ອໃນ
ຄຸນສົມບັດ CSS3 ທີ່ເຈົ້າອາດຈະບໍ່ຮູ້: Flexbox, Grid Layouts, Custom Properties, Transitions, Animation, and Multiple Background
Sheets ແບບ Cascading (CSS) ສືບຕໍ່ພັດທະນາແລະຮຸ່ນຫຼ້າສຸດອາດມີຄຸນສົມບັດບາງຢ່າງທີ່ເຈົ້າອາດຈະບໍ່ຮູ້ເຖິງ. ນີ້ແມ່ນບາງການປັບປຸງທີ່ສໍາຄັນແລະວິທີການແນະນໍາກັບ CSS3, ພ້ອມກັບຕົວຢ່າງລະຫັດ:
- ແຜນຜັງກ່ອງແບບຍືດຫຍຸ່ນ (Flexbox): ຮູບແບບການຈັດວາງທີ່ອະນຸຍາດໃຫ້ທ່ານສ້າງຮູບແບບທີ່ຍືດຫຍຸ່ນແລະຕອບສະຫນອງສໍາລັບຫນ້າເວັບ. ດ້ວຍ flexbox, ທ່ານສາມາດຈັດວາງແລະແຈກຢາຍອົງປະກອບພາຍໃນຖັງໄດ້ຢ່າງງ່າຍດາຍ. n ຕົວຢ່າງນີ້, ໄດ້
.container
ການນໍາໃຊ້ຫ້ອງຮຽນdisplay: flex
ເພື່ອເປີດໃຊ້ໂໝດການຈັດວາງ flexbox. ໄດ້justify-content
ຊັບສິນຖືກຕັ້ງເປັນcenter
ວາງອອກຕາມລວງນອນຂອງອົງປະກອບຂອງເດັກພາຍໃນຖັງ. ໄດ້align-items
ຊັບສິນຖືກຕັ້ງເປັນcenter
ການຈັດວາງອົງປະກອບຂອງເດັກໃນແນວຕັ້ງ. ໄດ້.item
ຊັ້ນຮຽນກໍານົດສີພື້ນຫລັງແລະ padding ສໍາລັບອົງປະກອບຂອງເດັກນ້ອຍ.
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
ຊັ້ນຮຽນກໍານົດສີພື້ນຫລັງແລະ padding ສໍາລັບລາຍການຕາຂ່າຍໄຟຟ້າ.
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;
}
ຜົນ
Hover
ທີ່ນີ້!
ທີ່ນີ້!
- ພາບເຄື່ອນໄຫວ: CSS3 ໄດ້ນໍາສະເຫນີຄຸນສົມບັດແລະເຕັກນິກໃຫມ່ຈໍານວນຫນຶ່ງສໍາລັບການສ້າງພາບເຄື່ອນໄຫວໃນຫນ້າເວັບ. ໃນຕົວຢ່າງນີ້, ພວກເຮົາໄດ້ເພີ່ມພາບເຄື່ອນໄຫວໂດຍໃຊ້
animation
ຄຸນສົມບັດ. ພວກເຮົາໄດ້ກໍານົດ a@keyframes
ກົດລະບຽບສໍາລັບການເຄື່ອນໄຫວ, ເຊິ່ງລະບຸວ່າປ່ອງຄວນຈະຫມຸນຈາກ 0 ອົງສາຫາ 90 ອົງສາໃນໄລຍະເວລາ 0.5 ວິນາທີ. ໃນເວລາທີ່ກ່ອງໄດ້ຖືກ hovered ຫຼາຍກວ່າ, ໄດ້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;
}
ຜົນ
Hover
ທີ່ນີ້!
ທີ່ນີ້!
- CSS Custom Properties: ເປັນທີ່ຮູ້ຈັກຍັງເປັນ ຕົວແປ CSS, ຄຸນສົມບັດທີ່ກໍາຫນົດເອງໄດ້ຖືກນໍາສະເຫນີໃນ CSS3. ພວກເຂົາອະນຸຍາດໃຫ້ທ່ານກໍານົດແລະນໍາໃຊ້ຄຸນສົມບັດທີ່ກໍາຫນົດເອງຂອງທ່ານເອງໃນ CSS, ເຊິ່ງສາມາດຖືກນໍາໃຊ້ເພື່ອເກັບຮັກສາແລະນໍາໃຊ້ຄືນມູນຄ່າຕະຫຼອດຮູບແບບຂອງທ່ານ. ຕົວແປ CSS ຖືກກໍານົດໂດຍຊື່ທີ່ເລີ່ມຕົ້ນດ້ວຍສອງ dashes, ເຊັ່ນ:
--my-variable
. ໃນຕົວຢ່າງນີ້, ພວກເຮົາກໍານົດຕົວແປ CSS ທີ່ເອີ້ນວ່າ -primary-color ແລະໃຫ້ມັນມີມູນຄ່າ#007bff
, ເຊິ່ງເປັນສີຟ້າທີ່ໃຊ້ທົ່ວໄປເປັນສີຕົ້ນຕໍໃນຫຼາຍການອອກແບບ. ພວກເຮົາໄດ້ໃຊ້ຕົວແປນີ້ເພື່ອກໍານົດbackground-color
ຄຸນສົມບັດຂອງອົງປະກອບປຸ່ມ, ໂດຍໃຊ້var()
function ແລະ passing ໃນຊື່ຕົວແປ. ນີ້ຈະໃຊ້ຄ່າຂອງຕົວແປເປັນສີພື້ນຫຼັງຂອງປຸ່ມ.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- ພື້ນຫຼັງຫຼາຍອັນ: CSS3 ຊ່ວຍໃຫ້ທ່ານສາມາດລະບຸຮູບພາບພື້ນຫຼັງຫຼາຍອັນສໍາລັບອົງປະກອບໃດຫນຶ່ງ, ມີຄວາມສາມາດຄວບຄຸມການຈັດຕໍາແຫນ່ງແລະການຈັດລໍາດັບຂອງມັນ. ພື້ນຫລັງແມ່ນປະກອບດ້ວຍສອງຮູບພາບ,
red.png
ແລະblue.png
, ເຊິ່ງຖືກໂຫລດໂດຍໃຊ້background-image
ຄຸນສົມບັດ. ຮູບພາບທໍາອິດ,red.png
, ແມ່ນ positioned ຢູ່ແຈລຸ່ມຂວາຂອງອົງປະກອບ, ໃນຂະນະທີ່ຮູບທີສອງ,blue.png
, ແມ່ນ positioned ຢູ່ແຈເທິງຊ້າຍຂອງອົງປະກອບ. ໄດ້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;
}