Məzmun Marketinq
Bilmədiyiniz CSS3 Xüsusiyyətləri: Flexbox, Grid Layouts, Xüsusi Xüsusiyyətlər, Keçidlər, Animasiyalar və Çoxlu Fonlar
Kaskad üslub cədvəlləri (CSS) təkamül etməyə davam edir və ən son versiyalar sizin hətta bilmədiyiniz bəzi xüsusiyyətlərə malik ola bilər. Budur, kod nümunələri ilə birlikdə CSS3 ilə təqdim edilən əsas təkmilləşdirmələr və metodologiyalardan bəziləri:
- Çevik Qutu Düzeni (Flexbox): veb səhifələr üçün çevik və həssas tərtibatlar yaratmağa imkan verən tərtibat rejimi. Flexbox ilə siz asanlıqla konteyner daxilində elementləri uyğunlaşdıra və paylaya bilərsiniz. bu misalda
.container
sinif istifadə edirdisplay: flex
flexbox layout rejimini aktivləşdirmək üçün. Thejustify-content
əmlak təyin olunurcenter
alt elementi konteyner daxilində üfüqi mərkəzləşdirmək. Thealign-items
əmlak təyin olunurcenter
uşaq elementi şaquli olaraq mərkəzləşdirmək üçün. The.item
sinif uşaq elementi üçün fon rəngi və padding təyin edir.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
Nəticə
Mərkəzləşdirilmiş Element
- Şəbəkə düzümü: veb səhifələr üçün mürəkkəb şəbəkə əsaslı planlar yaratmağa imkan verən başqa bir layout rejimi. Şəbəkə ilə siz sətirləri və sütunları təyin edə və sonra elementləri şəbəkənin xüsusi xanalarına yerləşdirə bilərsiniz. Bu nümunədə,
.grid-container
sinif istifadə edirdisplay: grid
grid layout rejimini aktivləşdirmək üçün. Thegrid-template-columns
əmlak təyin olunurrepeat(2, 1fr)
bərabər eni iki sütun yaratmaq üçün. Thegap
xassə grid hüceyrələri arasındakı məsafəni təyin edir. The.grid-item
sinif grid elementləri üçün fon rəngini və dolğunluğu təyin edir.
HTML
<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>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
Nəticə
Satış 1
Satış 2
Satış 3
Satış 4
- Keçidlər: CSS3 veb səhifələrdə keçid yaratmaq üçün bir sıra yeni xüsusiyyətlər və üsullar təqdim etdi. Məsələn,
transition
xüsusiyyət zamanla CSS xassələrində dəyişiklikləri canlandırmaq üçün istifadə edilə bilər. Bu nümunədə,.box
sinif element üçün eni, hündürlüyü və ilkin fon rəngini təyin edir. Thetransition
əmlak təyin olunurbackground-color 0.5s ease
asan-in-out vaxt funksiyası ilə yarım saniyə ərzində fon rəngi xüsusiyyətində dəyişiklikləri canlandırmaq. The.box:hover
sinif siçan göstəricisi onun üzərində olduqda elementin fon rəngini dəyişir və keçid animasiyasını işə salır.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
Nəticə
Hover
Budur!
Budur!
- Animasiyalar: CSS3 veb səhifələrdə animasiyalar yaratmaq üçün bir sıra yeni xüsusiyyətlər və üsullar təqdim etdi. Bu misalda biz istifadə edərək animasiya əlavə etdik
animation
əmlak. Biz müəyyən etdik@keyframes
qutunun 0 saniyə ərzində 90 dərəcədən 0.5 dərəcəyə qədər fırlanmasını təyin edən animasiya üçün qayda. Qutunun üzərinə əyildikdə,spin
qutunu fırlatmaq üçün animasiya tətbiq edilir. Theanimation-fill-mode
əmlak təyin olunurforwards
başa çatdıqdan sonra animasiyanın son vəziyyətinin saxlanmasını təmin etmək.
HTML
<div class="rotate"></div>
CSS
.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;
}
Nəticə
Hover
Budur!
Budur!
- CSS Xüsusi Xüsusiyyətləri: Başqa adla CSS dəyişənləri, fərdi xüsusiyyətlər CSS3-də təqdim edildi. Onlar CSS-də öz fərdi xassələrinizi müəyyən etməyə və istifadə etməyə imkan verir ki, bu da üslub vərəqlərində dəyərləri saxlamaq və təkrar istifadə etmək üçün istifadə edilə bilər. CSS dəyişənləri iki tire ilə başlayan adla müəyyən edilir, məsələn
--my-variable
. Bu misalda biz –primary-color adlı CSS dəyişənini təyin edirik və ona qiymət veririk#007bff
, bir çox dizaynda əsas rəng olaraq istifadə edilən mavi rəngdir. Biz bu dəyişəni təyin etmək üçün istifadə etdikbackground-color
istifadə edərək, düymə elementinin xassəsidirvar()
funksiyası və dəyişən adına keçid. Bu, dəyişənin dəyərini düymə üçün fon rəngi kimi istifadə edəcək.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Çoxsaylı Fonlar: CSS3 elementin yerləşdirilməsi və yığılma qaydasına nəzarət etmək imkanı ilə element üçün çoxlu fon şəkilləri təyin etməyə imkan verir. Fon iki şəkildən ibarətdir,
red.png
vəblue.png
, istifadə edərək yüklənirbackground-image
əmlak. İlk görüntü,red.png
, elementin sağ alt küncündə yerləşir, ikinci şəkil isə,blue.png
, elementin yuxarı sol küncündə yerləşir. Thebackground-position
xassə hər bir təsvirin yerləşdirilməsinə nəzarət etmək üçün istifadə olunur. Thebackground-repeat
xassə şəkillərin necə təkrarlanmasına nəzarət etmək üçün istifadə olunur. İlk görüntü,red.png
, təkrarlanmamaq üçün təyin edilmişdir (no-repeat
), ikinci şəkil isə,blue.png
, təkrar etmək üçün təyin edilir (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}