ទីផ្សារមាតិកា
លក្ខណៈពិសេស CSS3 ដែលអ្នកប្រហែលជាមិនដឹងអំពី៖ Flexbox, Grid Layouts, Custom Properties, Transitions, Animations, and Multiple Background
សន្លឹករចនាប័ទ្មល្បាក់ (ជា CSS) បន្តវិវឌ្ឍ ហើយកំណែចុងក្រោយបំផុតអាចមានលក្ខណៈពិសេសមួយចំនួនដែលអ្នកប្រហែលជាមិនបានដឹង។ នេះគឺជាការកែលម្អ និងវិធីសាស្រ្តសំខាន់ៗមួយចំនួនដែលបានណែនាំជាមួយ CSS3 រួមជាមួយនឹងឧទាហរណ៍កូដ៖
- ប្លង់ប្រអប់ដែលអាចបត់បែនបាន (Flexbox)៖ របៀបប្លង់ដែលអនុញ្ញាតឱ្យអ្នកបង្កើតប្លង់ដែលអាចបត់បែនបាន និងឆ្លើយតបសម្រាប់គេហទំព័រ។ ជាមួយនឹង flexbox អ្នកអាចតម្រឹម និងចែកចាយធាតុនៅក្នុងកុងតឺន័របានយ៉ាងងាយស្រួល។ n ឧទាហរណ៍នេះ។
.container
ថ្នាក់ប្រើប្រាស់display: flex
ដើម្បីបើករបៀបប្លង់ flexbox ។ នេះ។justify-content
ទ្រព្យសម្បត្តិត្រូវបានកំណត់ទៅcenter
ដើម្បីផ្តេកដាក់កណ្តាលធាតុកុមារនៅក្នុងធុង។ នេះ។align-items
ទ្រព្យសម្បត្តិត្រូវបានកំណត់ទៅcenter
ដើម្បីដាក់កណ្តាលធាតុរបស់កុមារ។ នេះ។.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
ដើម្បីបើករបៀបប្លង់ក្រឡាចត្រង្គ។ នេះ។grid-template-columns
ទ្រព្យសម្បត្តិត្រូវបានកំណត់ទៅrepeat(2, 1fr)
ដើម្បីបង្កើតជួរឈរពីរដែលមានទទឹងស្មើគ្នា។ នេះ។gap
លក្ខណសម្បត្តិកំណត់គម្លាតរវាងក្រឡាក្រឡាចត្រង្គ។ នេះ។.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;
}
លទ្ធផល
ធាតុ ៤០៧
ធាតុ ៤០៧
ធាតុ ៤០៧
ធាតុ ៤០៧
- ដំណើរផ្លាស់ប្តូរ៖ 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;
}