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ə edir display: flex flexbox layout rejimini aktivləşdirmək üçün. The justify-content əmlak təyin olunur center alt elementi konteyner daxilində üfüqi mərkəzləşdirmək. The align-items əmlak təyin olunur center 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ə edir display: grid grid layout rejimini aktivləşdirmək üçün. The grid-template-columns əmlak təyin olunur repeat(2, 1fr) bərabər eni iki sütun yaratmaq üçün. The gap 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. The transition əmlak təyin olunur background-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!
  • 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. The animation-fill-mode əmlak təyin olunur forwards 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!
  • 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ə etdik background-color istifadə edərək, düymə elementinin xassəsidir var() 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.pngblue.png, istifadə edərək yüklənir background-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. The background-position xassə hər bir təsvirin yerləşdirilməsinə nəzarət etmək üçün istifadə olunur. The background-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;
    }

    Nəticə

    Douglas Karr

    Douglas Karr CMO-dur OpenINSIGHTS və təsisçisi Martech Zone. Duqlas onlarla uğurlu MarTech startapına kömək edib, Martech-in satınalmalarında və investisiyalarında 5 milyard dollardan çox dəyərində lazımi araşdırmaya kömək edib və şirkətlərə satış və marketinq strategiyalarının həyata keçirilməsində və avtomatlaşdırılmasında kömək etməyə davam edir. Duqlas beynəlxalq səviyyədə tanınan rəqəmsal transformasiya və MarTech eksperti və məruzəçisidir. Douglas həm də Dummie's guide və biznes liderliyi kitabının nəşr edilmiş müəllifidir.

    əlaqəli məqalələr

    Başa dön düyməsini basın
    yaxın

    Adblock Aşkarlandı

    Martech Zone bu məzmunu heç bir ödəniş etmədən sizə təqdim edə bilir, çünki biz reklam gəlirləri, filial bağlantıları və sponsorluqlar vasitəsilə saytımızdan pul qazanırıq. Saytımıza baxarkən reklam blokerinizi silsəniz çox şad olarıq.