ഉള്ളടക്കം മാര്ക്കവറ്റിംഗ്

CSS3 സവിശേഷതകൾ നിങ്ങൾ അറിഞ്ഞിരിക്കാനിടയില്ല: ഫ്ലെക്സ്ബോക്സ്, ഗ്രിഡ് ലേഔട്ടുകൾ, ഇഷ്‌ടാനുസൃത പ്രോപ്പർട്ടികൾ, സംക്രമണങ്ങൾ, ആനിമേഷനുകൾ, കൂടാതെ ഒന്നിലധികം പശ്ചാത്തലങ്ങൾ

കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ (സി.എസ്.എസ്) വികസിക്കുന്നത് തുടരുക, ഏറ്റവും പുതിയ പതിപ്പുകൾക്ക് നിങ്ങൾ അറിയാത്ത ചില സവിശേഷതകൾ ഉണ്ടായിരിക്കാം. കോഡ് ഉദാഹരണങ്ങൾക്കൊപ്പം CSS3-ൽ അവതരിപ്പിച്ച ചില പ്രധാന മെച്ചപ്പെടുത്തലുകളും രീതിശാസ്ത്രങ്ങളും ഇതാ:

  • ഫ്ലെക്സിബിൾ ബോക്സ് ലേഔട്ട് (ഫ്ലെക്സ്ബോക്സ്): വെബ് പേജുകൾക്കായി വഴക്കമുള്ളതും പ്രതികരിക്കുന്നതുമായ ലേഔട്ടുകൾ സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു ലേഔട്ട് മോഡ്. ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഒരു കണ്ടെയ്നറിനുള്ളിൽ ഘടകങ്ങൾ എളുപ്പത്തിൽ വിന്യസിക്കാനും വിതരണം ചെയ്യാനും കഴിയും. ഈ ഉദാഹരണത്തിൽ, ദി .container ക്ലാസ് ഉപയോഗങ്ങൾ display: flex ഫ്ലെക്സ്ബോക്സ് ലേഔട്ട് മോഡ് പ്രവർത്തനക്ഷമമാക്കാൻ. ദി justify-content പ്രോപ്പർട്ടി സജ്ജീകരിച്ചിരിക്കുന്നു center കണ്ടെയ്നറിനുള്ളിലെ ചൈൽഡ് എലമെന്റ് തിരശ്ചീനമായി കേന്ദ്രീകരിക്കാൻ. ദി align-items പ്രോപ്പർട്ടി സജ്ജീകരിച്ചിരിക്കുന്നു center കുട്ടിയുടെ മൂലകത്തെ ലംബമായി കേന്ദ്രീകരിക്കാൻ. ദി .item ക്ലാസ് ചൈൽഡ് എലമെന്റിന് പശ്ചാത്തല നിറവും പാഡിംഗും സജ്ജമാക്കുന്നു.

എച്ച്ടിഎംഎൽ

<div class="container">
  <div class="item">Centered Element</div>
</div>

സി.എസ്.എസ്

.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 ക്ലാസ് ഗ്രിഡ് ഇനങ്ങൾക്ക് പശ്ചാത്തല നിറവും പാഡിംഗും സജ്ജമാക്കുന്നു.

എച്ച്ടിഎംഎൽ

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

സി.എസ്.എസ്

.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 ഘടകത്തിന്റെ വീതി, ഉയരം, പ്രാരംഭ പശ്ചാത്തല നിറം എന്നിവ ക്ലാസ് സജ്ജമാക്കുന്നു. ദി transition പ്രോപ്പർട്ടി സജ്ജീകരിച്ചിരിക്കുന്നു background-color 0.5s ease ഈസി-ഇൻ-ഔട്ട് ടൈമിംഗ് ഫംഗ്‌ഷൻ ഉപയോഗിച്ച് അര സെക്കൻഡിൽ പശ്ചാത്തല വർണ്ണ പ്രോപ്പർട്ടിയിലെ മാറ്റങ്ങൾ ആനിമേറ്റ് ചെയ്യാൻ. ദി .box:hover മൗസ് പോയിന്റർ അതിന് മുകളിലായിരിക്കുമ്പോൾ ക്ലാസ് എലമെന്റിന്റെ പശ്ചാത്തല നിറം മാറ്റുന്നു, ഇത് സംക്രമണ ആനിമേഷൻ പ്രവർത്തനക്ഷമമാക്കുന്നു.

എച്ച്ടിഎംഎൽ

<div class="box"></div>

സി.എസ്.എസ്

.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 ആനിമേഷൻ പൂർത്തിയായതിന് ശേഷവും അതിന്റെ അവസാന നില നിലനിർത്തിയെന്ന് ഉറപ്പാക്കാൻ.

എച്ച്ടിഎംഎൽ

<div class="rotate"></div>

സി.എസ്.എസ്

.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).

    എച്ച്ടിഎംഎൽ

    <div id="multibackground"></div>

    സി.എസ്.എസ്

    #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 ആണ് ഓപ്പൺ ഇൻസൈറ്റുകൾ യുടെ സ്ഥാപകനും Martech Zone. വിജയകരമായ ഡസൻ കണക്കിന് മാർടെക് സ്റ്റാർട്ടപ്പുകളെ ഡഗ്ലസ് സഹായിച്ചിട്ടുണ്ട്, മാർടെക് ഏറ്റെടുക്കലുകളിലും നിക്ഷേപങ്ങളിലും $5 ബില്ലിൽ കൂടുതൽ ശ്രദ്ധ ചെലുത്തുന്നതിൽ സഹായിച്ചിട്ടുണ്ട്, കൂടാതെ കമ്പനികളുടെ വിൽപ്പന, വിപണന തന്ത്രങ്ങൾ നടപ്പിലാക്കുന്നതിലും ഓട്ടോമേറ്റ് ചെയ്യുന്നതിലും കമ്പനികളെ തുടർന്നും സഹായിക്കുന്നു. അന്താരാഷ്ട്രതലത്തിൽ അംഗീകൃത ഡിജിറ്റൽ പരിവർത്തനവും മാർടെക് വിദഗ്ധനും സ്പീക്കറുമാണ് ഡഗ്ലസ്. ഡമ്മിയുടെ ഗൈഡിന്റെയും ബിസിനസ് ലീഡർഷിപ്പ് പുസ്തകത്തിന്റെയും പ്രസിദ്ധീകരിച്ച എഴുത്തുകാരൻ കൂടിയാണ് ഡഗ്ലസ്.

    ബന്ധപ്പെട്ട ലേഖനങ്ങൾ

    മുകളിലേയ്ക്ക് മടങ്ങുക ബട്ടൺ
    അടയ്ക്കുക

    ആഡ്ബ്ലോക്ക് കണ്ടെത്തി

    Martech Zone പരസ്യ വരുമാനം, അനുബന്ധ ലിങ്കുകൾ, സ്പോൺസർഷിപ്പുകൾ എന്നിവയിലൂടെ ഞങ്ങൾ ഞങ്ങളുടെ സൈറ്റിൽ നിന്ന് ധനസമ്പാദനം നടത്തുന്നതിനാൽ ഈ ഉള്ളടക്കം നിങ്ങൾക്ക് ഒരു ചെലവും കൂടാതെ നൽകാൻ കഴിയും. നിങ്ങൾ ഞങ്ങളുടെ സൈറ്റ് കാണുമ്പോൾ നിങ്ങളുടെ പരസ്യ ബ്ലോക്കർ നീക്കം ചെയ്താൽ ഞങ്ങൾ അഭിനന്ദിക്കുന്നു.