|
|
# உங்கள் வங்கி செயலியை நவீன CSS மூலம் ஸ்டைல் செய்யுங்கள்
|
|
|
|
|
|
## திட்ட ஒவர்வியூ
|
|
|
|
|
|
உங்கள் செயலாற்றல் வங்கி பயன்பாட்டை கண்ணுக்கு இன்பமான, தொழில்முறை தோற்றம் கொண்ட வலை பயன்பாட்டாக மாற்றவும், நவீன CSS தொழில்நுட்பங்களைப் பயன்படுத்தி. பயனர் அனுபவத்தை மேம்படுத்தும் ஒருங்கிணைந்த வடிவமைப்பு முறைமை ஒன்றை நீங்கள் உருவாக்குவீர்கள், அதேசமயம் அணுகல் மற்றும் பதிலளிக்கும் வடிவமைப்பு கோட்பாடுகளைச் பேணுவீர்கள்.
|
|
|
|
|
|
இத்திறனாய்வு உங்களுக்கு நவீன வலை வடிவமைப்பு மாதிரிகளை செயல்படுத்தவும், ஒரேமை கொண்ட காட்சி அடையாளத்தை உருவாக்கவும், பயனர்கள் ஈர்க்கக்கூடியதும் நடைமுறை என்றும் இருக்கக்கூடிய இடைமுகத்தை உருவாக்கவுமாகவை சவால் செய்கிறது.
|
|
|
|
|
|
## வழிமுறைகள்
|
|
|
|
|
|
### படி 1: உங்கள் ஸ்டைல்ஷீட்டை அமைக்கவும்
|
|
|
|
|
|
**உங்கள் CSS அடித்தளத்தை உருவாக்கவும்:**
|
|
|
|
|
|
1. உங்கள் திட்ட மூலத்தில் `styles.css` என்ற புதிய கோப்பை **உருவாக்கவும்**
|
|
|
2. உங்கள் `index.html` கோப்பில் ஸ்டைல்ஷீட்டை **இணைக்கவும்**:
|
|
|
```html
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
```
|
|
|
|
|
|
3. CSS ரீசெட் மற்றும் நவீன இயல்புக்களுடன் **ஆரம்பிக்கவும்**:
|
|
|
```css
|
|
|
/* Modern CSS reset and base styles */
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
line-height: 1.6;
|
|
|
color: #333;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
|
|
|
### படி 2: வடிவமைப்பு முறைமை தேவைகள்
|
|
|
|
|
|
**இவைகளை செயல்படுத்தவும்:**
|
|
|
|
|
|
#### நிறங்களின் தொகுப்பு
|
|
|
- **முதன்மை நிறம்**: பொத்தான்கள் மற்றும் முக்கிய அடையாளங்களுக்கு தொழில்முறை நிறத்தைத் தேர்ந்தெடுக்கவும்
|
|
|
- **இரண்டாம் நிலை நிறம்**: உதவி மற்றும் இரண்டாம் நிலை நடவடிக்கைகளுக்கு பொருந்தக்கூடிய நிறம்
|
|
|
- **நியூட்ரல் நிறங்கள்**: உரை, எல்லைகள் மற்றும் பின்னணிகளுக்கான சாமான்ய கிரே நிறங்கள்
|
|
|
- **வெற்றி/பிழை நிறங்கள்**: வெற்றி நிலைகளுக்கு பச்சை, பிழைகளுக்கு சிவப்பு
|
|
|
|
|
|
#### எழுத்துரு
|
|
|
- **தலைப்பு வரிசை**: H1, H2 மற்றும் H3 கூறுகளுக்கு தெளிவான பட்டியலிடல்
|
|
|
- **உரை எழுத்து**: வாசிக்கக்கூடிய எழுத்து அளவு (குறைந்தது 16px) மற்றும் பொருத்தமான வரி உயரம்
|
|
|
- **படிவ அடையாளங்கள்**: தெளிவான, அணுகல் கூடிய உரை ஸ்டைலிங்
|
|
|
|
|
|
#### அணிவகுப்பு மற்றும் இடைவெளி
|
|
|
- **ஒத்த இடைவெளி**: இடைவெளி அளவீடு (8px, 16px, 24px, 32px) பயன்படுத்துக
|
|
|
- **கிரிட் முறைமை**: படிவங்கள் மற்றும் உள்ளடக்கப் பகுதிகளுக்கு ஒழுங்குபடுத்தப்பட்ட அமைப்பு
|
|
|
- **பதிலளிக்கும் வடிவமைப்பு**: மொபைல்-முதலில் அணுகும் விதம் மற்றும் வெவ்வேறு இடைவெளிகள்
|
|
|
|
|
|
### படி 3: கூறுகளின் ஸ்டைலிங்
|
|
|
|
|
|
**கீழ்காணும் குறிப்பிட்ட கூறுகளை ஸ்டைல் செய்யவும்:**
|
|
|
|
|
|
#### படிவங்கள்
|
|
|
- **உள்ளீட்டு புலங்கள்**: தொழில்முறை எல்லைகள், கவன நிலைகள் மற்றும் சரிபார்ப்புச் ஸ்டைல்
|
|
|
- **பொத்தான்கள்**: ஹோவர் விளைவுகள், முடக்கிய நிலைகள் மற்றும் ஏற்றுமதி காட்டிகள்
|
|
|
- **அடையாளங்கள்**: தெளிவான இடம் மற்றும் கடைசிப் புல அடையாளங்கள்
|
|
|
- **பிழை செய்திகள்**: காட்சி பிழை ஸ்டைலிங் மற்றும் உதவிய 메시ேஜ்கள்
|
|
|
|
|
|
#### வழிசெலுத்தல்
|
|
|
- **தலைப்பு பகுதி**: சுத்தமான, பிராண்ட்ட் வழிசெலுத்தல் பகுதி
|
|
|
- **இணைப்புகள்**: தெளிவான ஹோவர் நிலைகள் மற்றும் செயலில் உள்ள அடையாளங்கள்
|
|
|
- **லோகோ/தலைப்பு**: தனித்துவமான பிராண்டிங் கூறு
|
|
|
|
|
|
#### உள்ளடக்கப் பகுதிகள்
|
|
|
- **பிரிவுகள்**: வெவ்வேறு பகுதிகளுக்கு தெளிவான காட்சிப்படுத்தல்
|
|
|
- **கார்டுகள்**: கார்டு அடிப்படையிலான அமைப்புகள் பயன்படுத்தின் நிழல்கள் மற்றும் எல்லைகளைச் சேர்க்கவும்
|
|
|
- **பின்னணிகள்**: வெற்று இடம் மற்றும் மெல்லிய பின்னணிகளைச் சரியான முறையில் பயன்படுத்தவும்
|
|
|
|
|
|
### படி 4: மேம்படுத்தப்பட்ட அம்சங்கள் (ஆர்வலர்)
|
|
|
|
|
|
**இந்த முன்னேற்ற அம்சங்களை செயல்படுத்த யோசிக்கவும்:**
|
|
|
- **கருப்பு மூடு**: வெளிர் மற்றும் இருண்ட தீம்களுக்கு இடையில் மாற்றம்
|
|
|
- **மோசன்கள்**: மென்மையான மாற்றங்கள் மற்றும் குறுகிய இன்டர்ஆக்ஷன்கள்
|
|
|
- **ஏற்றும் நிலைகள்**: படிவ சமர்ப்பிப்புகளின் போது காட்சி பின்னூட்டம்
|
|
|
- **பதில் அளிக்கும் படங்கள்**: மாறுபட்ட திரை அளவுகளுக்கான ஒப்பான படங்கள்
|
|
|
|
|
|
## வடிவமைப்பு ஊக்குவிப்பு
|
|
|
|
|
|
**நவீன வங்கி பயன்பாட்டின் பண்புகள்:**
|
|
|
- **சுத்தமான, குறைந்த வடிவமைப்பு** நிறைய வெற்று இடத்துடன்
|
|
|
- **தொழில்முறை நிறம் தொகுப்பு** (வெண்ணிலா, பச்சை அல்லது நுட்பமான நியூட்ரல்ஸ்)
|
|
|
- **தெளிவான காட்சி வரிசை** முக்கியச் செயல் பொத்தான்களுடன்
|
|
|
- **அணுகல் கூடிய மோதல் விகிதங்கள்** WCAG வழிகாட்டுதலுக்கு ஏற்ப
|
|
|
- **மொபைல்-பதில் அளிக்கும் அமைப்புகள்** அனைத்து சாதனங்களிலும் செயல்படும் வகையில்
|
|
|
|
|
|
## தொழில்நுட்ப தேவைகள்
|
|
|
|
|
|
### CSS அமைப்பு
|
|
|
```css
|
|
|
/* 1. CSS Custom Properties (Variables) */
|
|
|
:root {
|
|
|
--primary-color: #007bff;
|
|
|
--secondary-color: #6c757d;
|
|
|
/* Add more variables */
|
|
|
}
|
|
|
|
|
|
/* 2. Base Styles */
|
|
|
/* Reset, typography, general elements */
|
|
|
|
|
|
/* 3. Layout */
|
|
|
/* Grid, flexbox, positioning */
|
|
|
|
|
|
/* 4. Components */
|
|
|
/* Forms, buttons, cards */
|
|
|
|
|
|
/* 5. Utilities */
|
|
|
/* Helper classes, responsive utilities */
|
|
|
|
|
|
/* 6. Media Queries */
|
|
|
/* Responsive breakpoints */
|
|
|
```
|
|
|
|
|
|
### அணுகல் தேவைகள்
|
|
|
- **நிற மோதல்**: சாதாரண உரைக்கான குறைந்தபட்சமாக 4.5:1 விகிதம் உறுதி செய்யவும்
|
|
|
- **கவன அடையாளங்கள்**: விசைப்பலகை வழிசெலுத்தலுக்கு காட்சிப்படுத்தும் கவன நிலைகள்
|
|
|
- **படிவ அடையாளங்கள்**: உள்ளீடுகளுடன் சரியாக இணைக்கப்பட்டவை
|
|
|
- **பதில் அளிக்கும் வடிவமைப்பு**: 320px முதல் 1920px அகல தளங்களிலேயும் பயன்பாட்டுக்குட்படும்
|
|
|
|
|
|
## மதிப்பீட்டு அமைப்பு
|
|
|
|
|
|
| முன்னனி | சிறந்த (A) | வல்லுநர் (B) | மேம்பாட்டு நிலை (C) | மேம்பாடு தேவை (F) |
|
|
|
|----------|---------------|----------------|----------------|----------------------|
|
|
|
| **வடிவமைப்பு முறைமை** | ஒருங்கிணைந்த நிறங்கள், எழுத்துரு மற்றும் இடைவெளியுடன் பரவலாக வடிவமைப்பை செயல்படுத்துகிறது | தெளிவான வடிவமைப்பு மாதிரிகள் மற்றும் நல்ல காட்சி வரிசையுடன் ஒரேமைப் பயன்படுத்துகிறது | சில இடர்களோ அல்லது欠缺மான வடிவமைப்பு கூறுகளோடு அடிப்படை ஸ்டைலிங் | குறைவான ஸ்டைலிங் மற்றும் முரண்பட்ட வடிவமைப்பு விருப்பங்கள் |
|
|
|
| **பயனர் அனுபவம்** | அருமையான பயனர் அனுபவத்துடன் ஞானமிக்க மற்றும் தொழில்முறை இடைமுகம் உருவாக்குகிறது | தெளிவான வழிசெலுத்தல் மற்றும் வாசிப்புக்கு எளிமையான நல்ல பயனர் அனுபவம் | சில UX மேம்பாடுகள் தேவைப்படும் அடிப்படை பயன்பாடு | மோசமான பயன்பாடு, வழிசெலுத்துவதும் வாசிப்பதும் கடினம் |
|
|
|
| **தொழில்நுட்ப செயலாக்கம்** | நவீன CSS தொழில்நுட்பங்களைப் பயன்படுத்தி, ஒழுங்கான குறியீடு அமைப்புடன் சிறந்த நடைமுறைகளை பின்பற்றுகிறது | CSS-ஐச் சரியாக செயல்படுத்தி நல்ல அமைப்பு மற்றும் தகுந்த தொழில்நுட்பங்களைப் பயன்படுத்துகிறது | CSS பதிவு சரியானது ஆனால் அமைப்பில் குறைவு அல்லது நவீன அணுகல்கள் இல்லை | மோசமான CSS செயலாக்கம், தொழில்நுட்பக் குறைகள் அல்லது உலாவி பொருந்தாமை |
|
|
|
| **பதில் அளிக்கும் வடிவமைப்பு** | அனைத்து சாதன அளவுகளிலும் அழகாக இயங்கும் முழுமையான பதிலளிப்பிடம் | சிறந்த பதிலளிப்பு செயல்பாடு, சில திரை அளவுகளில் சிறிய பிரச்சினைகள் | அடிப்படை பதிலளிப்பு செயல்பாடு, சில அமைப்பு பிரச்சினைகள் | பதிலளிப்பில்லாதது அல்லது மொபைல் சாதனங்களில் முக்கியக் குறைகள் |
|
|
|
| **அணுகல்** | WCAG வழிகாட்டுதலுடன் அருமையான விசைப்பலகை வழிசெலுத்தல் மற்றும் திரை வாசிப்பை ஆதரிக்கிறது | நல்ல அணுகல் நடைமுறைகள், சரியான மோதல் மற்றும் கவன அடையாளங்கள் | சில欠缺ங்களுடன் அடிப்படை அணுகல் கருதுகோள்கள் | மோசமான அணுகல், மாற்றுத்திறனாளிகளுக்கு கடினம் |
|
|
|
|
|
|
## சமர்ப்பிப்பு வழிகாட்டிகள்
|
|
|
|
|
|
**உங்கள் சமர்ப்பிப்பில் சேர்க்க வேண்டியது:**
|
|
|
- **styles.css**: உங்கள் முழுமையான ஸ்டைல்ஷீட்
|
|
|
- **புதுப்பிக்கப்பட்ட HTML**: நீங்கள் செய்த எந்த HTML திருத்தங்களும்
|
|
|
- **திரைபடங்கள்**: டெஸ்க்டாப் மற்றும் மொபைல் மடிக்கும் உங்கள் வடிவமைப்பைக் காட்டும் படங்கள்
|
|
|
- **README**: உங்கள் வடிவமைப்பு தேர்வுகள் மற்றும் நிற தொகுப்பு பற்றிய சுருக்க விளக்கம்
|
|
|
|
|
|
**போனஸ் புள்ளிகளை பெற:**
|
|
|
- **CSS தனிப்பட்ட பண்புகள்** பராமரிக்கக்கூடிய தீமிங்கிற்கு
|
|
|
- **மேம்பட்ட CSS அம்சங்கள்** Grid, Flexbox, அல்லது CSS அனிமேஷன்கள் போன்றவை
|
|
|
- **செயற்பாட்டு கவனிப்புகள்** சிறந்த CSS மற்றும் குறைந்த கோப்பு அளவு
|
|
|
- **கடவுச்சீட்டு உலாவி சோதனை** பல உலாவிகளுக்கு பொருந்துதலுடன்
|
|
|
|
|
|
> 💡 **திறமையான குறிப்பு**: முதலில் மொபைல் வடிவமைப்புடன் ஆரம்பித்து பின்னர் பெரிய திரைகளுக்குப் மேம்படுத்தவும். இந்த மொபைல்-முதலில் அணுகல் உங்கள் செயலி அனைத்து சாதனங்களிலும் நன்றாக இயங்குவதை உறுதி செய்து, நவீன வலை உருவாக்கும் சிறந்த நடைமுறைகளை பின்பற்றுகிறது.
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**புலம்பெயர்ப்பு அறிவிப்பு**:
|
|
|
இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டது. நாம் துல்லியத்தை நோக்கி முயலினாலும், தானாக yapılan மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்க வாய்ப்பு உள்ளது. படிப்புகளின் அசல் ஆவணம் அதன் சொந்த மொழியில் அதிகாரபூர்வமான மூலமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்காக, தொழில்நுட்பமான மனித மொழிபெயர்ப்பை பரிந்துரைக்கிறோம். இந்த மொழிபெயர்ப்பின் பயன்பாட்டால் ஏற்படும் எந்தத் தவறான புரிதல்கள் அல்லது தவறுதல்களுக்கு நாங்கள் பொறுப்பேற்கமாட்டோம்.
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
