9.1 Psevdo-siniflərdən istifadə edərək interaktivliyin artırılması
CSS-dəki psevdo-siniflər və psevdo-elementlər veb səhifələrdə dizaynı və istifadəçi təcrübəsini (UX) təkmilləşdirmək üçün güclü alətlərdir. Onların köməyi ilə interaktiv və dinamik elementlər yaratmaq, vizual qəbulediciliyi yaxşılaşdırmaq və əlçatanlığı artırmaq mümkündür.
Təqdim olunan məqsədlər üçün psevdo-siniflərdən və psevdo-elementlərdən necə istifadə oluna biləcəyinə bir neçə nümunə baxaq.
1. Kursorun yönləndirilməsi
:hover psevdo-sinifi, istifadəçi elementi kursor ilə işarə etdikdə onun üslubunu dəyişməyə imkan verir. Bu xüsusilə düymələr və keçidlər üçün faydalıdır.
Nümunə: Düymənin kursora yönləndirilərkən rənginin dəyişməsi
Bu nümunədə, düymənin fon rəngi kursor yönləndirildikdə dəyişir, bu da vizual əks əlaqəni artırır və interfeysi daha interaktiv edir:
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
<button>Click Me</button>
2. Elementin fokuslanması
:focus psevdo-sinifi forma elementlərinə fokuslandıqda onları üslublamaq üçün istifadə olunur. Bu istifadəçilərin hansı forma elementini hal-hazırda doldurduqlarını görməyə kömək edir.
Nümunə: Fokuslanmış giriş sahəsinin üslublaşdırılması
Bu nümunədə giriş sahəsi fokuslandıqda mavi xətt və kölgə alır, bu da aktiv forma elementinin görünüşünü yaxşılaşdırır:
input[type="text"] {
border: 1px solid #ccc;
padding: 10px;
}
input[type="text"]:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
<input type="text">
3. Aktiv elementin vəziyyəti
:active psevdo-sinifi, element aktivləşdirildiyi anda (məsələn, düymə siçanla basıldıqda) tətbiq olunur.
Nümunə: Düymə basıldıqda onun üslublandırılması
Bu nümunədə düymə bir qədər kiçilir və rəngi dəyişir, bu da basılma effektini yaradır:
button:active {
background-color: #2c3e50;
transform: scale(0.98);
}
<button>Click Me</button>
9.2 Psevdoelementlərlə vizual qavrayışın yaxşılaşdırılması
4. Kontent əlavə etmək: ::before və ::after
::before və ::after psevdoelementləri HTML kodunu dəyişmədən, elementdən əvvəl və sonra kontent əlavə etməyə imkan verir.
Nümunə: Linkin qarşısına ikon əlavə etmək
Bu nümunədə ikon link mətninin qarşısına əlavə olunur, vizual qavrayışı yaxşılaşdırır və istifadəçilərə bunun link olduğunu bildirir:
a::before {
content: "🔗";
margin-right: 5px;
}
<a href="#">Here</a>
Nümunə: Paraqrafdan sonra dekorativ element əlavə etmək
Bu nümunədə paraqrafdan sonra dekorativ element əlavə olunur, səhifənin vizual dizaynını artırır:
p::after {
content: "❦";
display: block;
text-align: right;
color: #e74c3c;
}
<p>Content</p>
5. İlk hərf və sətirin stilləşdirilməsi: ::first-letter və ::first-line
::first-letter və ::first-line psevdoelementləri mətnin ilk hərfini və ilk sətrini stilləşdirməyə imkan verir, tipoqrafik effektlər yaradır.
Nümunə: Paraqrafın ilk hərfinin stilləşdirilməsi
Bu nümunədə paraqrafın ilk hərfi böyüdülür və mavi rəngə boyanır, "daxil edilmiş" ilk hərf effekti yaradır ki, bu da tez-tez jurnal dizaynında istifadə olunur:
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
float: left;
margin-right: 0.1em;
}
<p>Content</p>
Nümunə: Paraqrafın ilk sətrinin stilləşdirilməsi
Bu nümunədə paraqrafın ilk sətri qalın şriftlə və yaşıl rənglə vurğulanır, mətnin oxunaqlığını artırır:
p::first-line {
font-weight: bold;
color: #2ecc71;
}
<p>Content</p>
9.3 Psevdo-klaslar və psevdo-elementlər vasitəsilə əlçatanlığın yaxşılaşdırılması
6. Forma elementlərinin vəziyyəti
Forma psevdo-klasları elementləri onların vəziyyətindən asılı olaraq stilizasiya etməyə imkan verir və bu da əlçatanlıq və istifadəçi interfeysini yaxşılaşdırır.
Nümunə: Seçilmiş checkbox-un stilizasiyası
Bu nümunədə seçilmiş checkbox yaşıl rəngə boyanır, bu da vizual əks əlaqəni yaxşılaşdırır:
input[type="checkbox"]:checked {
background-color: #2ecc71;
}
<input type="checkbox" checked>
Nümunə: Deaktiv olunmuş input sahəsinin stilizasiyası
Bu nümunədə deaktiv olunmuş input sahəsi açıq boz fon və mətn alır ki, bu da onun əlçatan olmadığını vizual göstərir:
input:disabled {
background-color: #f0f0f0;
color: #999;
}
<input type="text" disabled>
Nümunə: Yanlış input sahəsinin stilizasiyası
Bu nümunədə yanlış input sahəsi qırmızı sərhəd alır, bu da istifadəçilərə məlumat daxil edərkən səhvləri müəyyənləşdirməyə kömək edir:
input:invalid {
border-color: #e74c3c;
}
<input type="text">
9.4 Tam reallaşdırma nümunəsi
/* Linkdən əvvəl ikon əlavə etmək */
a::before {
content: "🔗";
margin-right: 5px;
}
/* Abzasın ilk hərfinin üzərində mouse olarkən stilizasiya */
p:hover::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
}
/* Düymənin stilizasiyası */
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
button:active {
background-color: #2c3e50;
transform: scale(0.98);
}
/* Fokusda olan input sahəsinin stilizasiyası */
input[type="text"]:focus,
input[type="email"]:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
/* Seçilmiş checkbox-ın stilizasiyası */
input[type="checkbox"]:checked {
background-color: #2ecc71;
}
/* İnaktiv input sahəsinin stilizasiyası */
input:disabled {
background-color: #f0f0f0;
color: #999;
}
/* Səhv input sahəsinin stilizasiyası */
input:invalid {
border-color: #e74c3c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Psevdo-siniflər və psevdo-elementlərin istifadəsi nümunələri</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">İkonlu link</a>
<p>Bu abzasa mouse gətir ki, ilk hərfin effektini görəsən.</p>
<button>Düymə</button>
<form>
<label>
Mətni daxil edin:
<input type="text" required>
</label>
<br>
<label>
Email daxil edin:
<input type="email" required>
</label>
<br>
<label>
<input type="checkbox" checked> Checkbox
</label>
<br>
<button type="submit">Göndər</button>
<button type="button" disabled>İnaktiv düymə</button>
</form>
</body>
</html>
Psevdo-siniflər və psevdo-elementlər veb-səhifələrdə dizaynı və istifadəçi təcrübəsini təkmilləşdirmək üçün güclü vasitələr təqdim edir. Onlardan istifadə edərək interaktiv və dinamik elementlər yaratmaq, vizual təəssüratı yaxşılaşdırmaq, əlçatanlığı artırmaq və interfeysləri istifadəçilər üçün daha rahat və xoş hala gətirmək mümkündür.
Bu alətlərin başa düşülməsi və düzgün tətbiqi müasir və effektiv veb-dizaynlar yaratmaq üçün çoxlu imkanlar açır.
GO TO FULL VERSION