ഉള്ളടക്കം മാര്ക്കവറ്റിംഗ്
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;
}