අන්තර්ගත අලෙවි
CSS3 විශේෂාංග ඔබ නොදන්නවා විය හැක: Flexbox, Grid Layouts, Custom Properties, Transitions, Animations, සහ Multiple Backgrounds
කැස්කැඩින් ස්ටයිල් ෂීට් (CSS) දිගටම විකාශනය වන අතර නවතම අනුවාදවල ඔබ නොදන්න සමහර විශේෂාංග තිබිය හැක. කේත උදාහරණ සමඟින් CSS3 සමඟ හඳුන්වා දුන් ප්රධාන වැඩිදියුණු කිරීම් සහ ක්රමවේද කිහිපයක් මෙන්න:
- නම්යශීලී පෙට්ටි පිරිසැලසුම (Flexbox): වෙබ් පිටු සඳහා නම්යශීලී සහ ප්රතිචාරාත්මක පිරිසැලසුම් නිර්මාණය කිරීමට ඔබට ඉඩ සලසන පිරිසැලසුම් මාදිලියකි. flexbox සමඟ, ඔබට පහසුවෙන් බහාලුමක් තුළ මූලද්රව්ය පෙළගස්වා බෙදා හැරීම කළ හැකිය. මෙම උදාහරණයෙන්, the
.container
පන්ති භාවිතා කරයිdisplay: flex
flexbox layout මාදිලිය සක්රීය කිරීමට. එම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;
}
ප්රතිඵල
අයිතමය 1
අයිතමය 2
අයිතමය 3
අයිතමය 4
- සංක්රාන්ති: CSS3 විසින් වෙබ් පිටු මත සංක්රාන්ති නිර්මාණය කිරීම සඳහා නව ගුණාංග සහ තාක්ෂණික ක්රම ගණනාවක් හඳුන්වා දෙන ලදී. උදාහරණයක් ලෙස, ද
transition
කාලයත් සමඟ CSS ගුණාංගවල වෙනස්කම් සජීවීකරණය කිරීමට දේපල භාවිතා කළ හැක. මෙම උදාහරණයේ දී, ද.box
class මඟින් මූලද්රව්ය සඳහා පළල, උස සහ ආරම්භක පසුබිම් වර්ණය සකසයි. එමtransition
දේපල ලෙස සකසා ඇතbackground-color 0.5s ease
පහසු-ඉන්-ඉන්-ඉන්-අවුට් කාල ශ්රිතයක් සමඟින් තත්පර භාගයක් පුරා පසුබිම් වර්ණ ගුණාංගයේ වෙනස්කම් සජීවීකරණය කිරීමට. එම.box:hover
class mouse pointer එක උඩින් ඇති විට මූලද්රව්යයේ පසුබිම් වර්ණය වෙනස් කරයි, සංක්රාන්ති සජීවිකරණය අවුලුවයි.
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
දේපල. අපි නිර්වචනය කර ඇත a@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
. මෙම උදාහරණයේදී, අපි -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
, මූලද්රව්යයේ වම් ඉහළ කෙළවරේ ස්ථානගත කර ඇත. එම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;
}