Jassif Team Institution

CSS User Interface

இந்த அத்தியாயத்தில் நீங்கள் பின்வரும் CSS பயனர் இடைமுக பண்புகளைப் பற்றி கற்றுக்கொள்வீர்கள்:

• resize
• outline-offset

CSS Resize

resize பண்பு ஒரு உறுப்பை பயனர் மீண்டும் அளவிட முடியுமா (மற்றும் எப்படி) என்பதைக் குறிப்பிடுகிறது.

இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

• horizontal - பயனர் உறுப்பை கிடைமட்டமாக (அகலம்) மீண்டும் அளவிட முடியும்
• vertical - பயனர் உறுப்பை செங்குத்தாக (உயரம்) மீண்டும் அளவிட முடியும்
• both - பயனர் உறுப்பை செங்குத்தாகவும் கிடைமட்டமாகவும் மீண்டும் அளவிட முடியும்
• none - பயனர் உறுப்பை மீண்டும் அளவிட முடியாது

CSS Resize - Only Width

பின்வரும் உதாரணம் பயனரை ஒரு <div> உறுப்பின் அகலத்தை மட்டும் மீண்டும் அளவிட அனுமதிக்கிறது:

div {
  resize: horizontal;
  overflow: auto;
}

CSS Resize - Only Height

பின்வரும் உதாரணம் பயனரை ஒரு <div> உறுப்பின் உயரத்தை மட்டும் மீண்டும் அளவிட அனுமதிக்கிறது:

div {
  resize: vertical;
  overflow: auto;
}

CSS Resize - Both Width and Height

பின்வரும் உதாரணம் பயனரை ஒரு <div> உறுப்பின் அகலம் மற்றும் உயரம் இரண்டையும் மீண்டும் அளவிட அனுமதிக்கிறது:

div {
  resize: both;
  overflow: auto;
}

CSS Disable Resize in Textarea

ஒரு <textarea> பெரும்பாலும் இயல்பாக மீண்டும் அளவிடக்கூடியதாக இருக்கும்.

இங்கே, நாம் <textarea> இல் மீண்டும் அளவிடும் தன்மையை முடக்க resize பண்பைப் பயன்படுத்தியுள்ளோம்:

textarea {
  resize: none;
}

CSS Outline Offset

outline-offset பண்பு ஒரு வெளிவரை மற்றும் உறுப்பின் விளிம்பு/எல்லைக்கு இடையே ஒரு இடத்தைச் சேர்க்கிறது. ஒரு உறுப்புக்கும் அதன் வெளிவரைக்கும் இடையே உள்ள இடம் வெளிப்படையானது.

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
}

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

Exercise

div {
  resize: ;
  overflow: auto;
}

CSS User Interface Properties

பின்வரும் அட்டவணை அனைத்து பயனர் இடைமுக பண்புகளையும் பட்டியலிடுகிறது: