අන්තර්ගත අලෙවි

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

    ප්රතිඵල

    Douglas Karr

    Douglas Karr හි CMO වේ විවෘත INSIGHTS සහ නිර්මාතෘ Martech Zone. ඩග්ලස් සාර්ථක MarTech ආරම්භක දුසිම් ගණනකට උදව් කර ඇත, මාර්ටෙක් අත්පත් කර ගැනීම් සහ ආයෝජන සඳහා ඩොලර් 5 කට වඩා වැඩි කඩිසරකමකට සහාය වී ඇත, සහ ඔවුන්ගේ විකුණුම් සහ අලෙවිකරණ උපාය මාර්ග ක්‍රියාත්මක කිරීමට සහ ස්වයංක්‍රීය කිරීමට සමාගම්වලට දිගටම සහාය වේ. ඩග්ලස් යනු ජාත්‍යන්තරව පිළිගත් ඩිජිටල් පරිවර්තනයක් වන අතර MarTech විශේෂඥයෙකු සහ කථිකයෙකි. ඩග්ලස් ඩමිගේ මාර්ගෝපදේශකයෙකු සහ ව්‍යාපාර නායකත්ව පොතක ප්‍රකාශිත කතුවරයෙකි.

    සබැඳි පුවත්

    ඉහළට බොත්තම
    සමීප

    Adblock අනාවරණය විය

    Martech Zone වෙළඳ දැන්වීම් ආදායම, අනුබද්ධ සබැඳි සහ අනුග්‍රාහකත්ව හරහා අපි අපගේ වෙබ් අඩවියෙන් මුදල් උපයන නිසා කිසිදු වියදමකින් තොරව ඔබට මෙම අන්තර්ගතය ලබා දීමට හැකි වේ. ඔබ අපගේ වෙබ් අඩවිය නරඹන විට ඔබේ දැන්වීම් අවහිර කරන්නා ඉවත් කරන්නේ නම් අපි අගය කරන්නෙමු.