İçerik Pazarlama

Farkında Olmayabileceğiniz CSS3 Özellikleri: Flexbox, Izgara Yerleşimleri, Özel Özellikler, Geçişler, Animasyonlar ve Çoklu Arka Planlar

Basamaklı Stil Şablonu (CSS) gelişmeye devam eder ve en son sürümler, farkında bile olmayabileceğiniz bazı özelliklere sahip olabilir. Kod örnekleriyle birlikte CSS3 ile sunulan bazı önemli iyileştirmeler ve metodolojiler aşağıda verilmiştir:

  • Esnek Kutu Düzeni (Flexbox): web sayfaları için esnek ve duyarlı düzenler oluşturmanıza olanak tanıyan bir düzen modu. Flexbox ile öğeleri bir kap içinde kolayca hizalayabilir ve dağıtabilirsiniz. n bu örnekte, .container sınıf kullanımları display: flex flexbox düzen modunu etkinleştirmek için. bu justify-content özellik olarak ayarlandı center alt öğeyi kap içinde yatay olarak ortalamak için. bu align-items özellik olarak ayarlandı center alt öğeyi dikey olarak ortalamak için. bu .item class, alt öğe için arka plan rengini ve dolguyu ayarlar.

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;
}

Sonuç

Ortalanmış Eleman
  • Izgara düzeni: web sayfaları için karmaşık ızgara tabanlı düzenler oluşturmanıza izin veren başka bir düzen modu. Izgara ile satırları ve sütunları belirleyebilir ve ardından ızgaranın belirli hücrelerine öğeler yerleştirebilirsiniz. Bu örnekte, .grid-container sınıf kullanımları display: grid ızgara düzeni modunu etkinleştirmek için. bu grid-template-columns özellik olarak ayarlandı repeat(2, 1fr) eşit genişlikte iki sütun oluşturmak için. bu gap özelliği ızgara hücreleri arasındaki boşluğu ayarlar. bu .grid-item class, ızgara öğeleri için arka plan rengini ve dolguyu ayarlar.

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;
}

Sonuç

Ürün 1
Ürün 2
Ürün 3
Ürün 4
  • Geçişler: CSS3, web sayfalarında geçişler oluşturmak için bir dizi yeni özellik ve teknik tanıttı. Örneğin, transition özelliği, zaman içinde CSS özelliklerinde meydana gelen değişiklikleri canlandırmak için kullanılabilir. Bu örnekte, .box class, öğenin genişliğini, yüksekliğini ve ilk arka plan rengini ayarlar. bu transition özellik olarak ayarlandı background-color 0.5s ease kolay giriş zamanlama işleviyle arka plan rengi özelliğindeki değişiklikleri yarım saniyenin üzerinde canlandırmak için. bu .box:hover class, fare işaretçisi öğenin üzerindeyken öğenin arka plan rengini değiştirerek geçiş animasyonunu tetikler.

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;
}

Sonuç

Duraksamak
İşte!
  • Animasyonlar: CSS3, web sayfalarında animasyonlar oluşturmak için bir dizi yeni özellik ve teknik tanıttı. Bu örnekte, kullanarak bir animasyon ekledik. animation mülk. tanımladık @keyframes kutunun 0 saniyelik bir süre boyunca 90 dereceden 0.5 dereceye dönmesi gerektiğini belirten animasyon kuralı. Kutu üzerine gelindiğinde, spin kutuyu döndürmek için animasyon uygulanır. bu animation-fill-mode özellik olarak ayarlandı forwards animasyonun son halinin, bittikten sonra da korunmasını sağlamak için.

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;
}

Sonuç

Duraksamak
İşte!
  • CSS Özel Özellikleri: Ayrıca olarak bilinir CSS değişkenleri, özel özellikler CSS3'te tanıtıldı. Stil sayfalarınız boyunca değerleri depolamak ve yeniden kullanmak için kullanılabilen CSS'de kendi özel özelliklerinizi tanımlamanıza ve kullanmanıza olanak tanırlar. CSS değişkenleri, örneğin iki tire ile başlayan bir adla tanımlanır.
    --my-variable. Bu örnekte, –primary-color adında bir CSS değişkeni tanımlıyoruz ve ona bir değer veriyoruz. #007bff, birçok tasarımda ana renk olarak yaygın olarak kullanılan mavi bir renktir. ayarlamak için bu değişkeni kullandık. background-color kullanarak, bir düğme öğesinin özelliği var() işlev ve değişken adını geçirme. Bu, düğme için arka plan rengi olarak değişkenin değerini kullanacaktır.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Çoklu Arka Planlar: CSS3, konumlandırmasını ve yığınlama sırasını kontrol etme yeteneği ile bir öğe için birden çok arka plan görüntüsü belirtmenize olanak tanır. Arka plan iki resimden oluşur, red.png ve blue.pngkullanılarak yüklenen background-image mülk. ilk görüntü, red.png, öğenin sağ alt köşesinde konumlandırılırken, ikinci görüntü, blue.png, öğenin sol üst köşesinde bulunur. bu background-position özelliği, her görüntünün konumunu kontrol etmek için kullanılır. bu background-repeat özelliği, görüntülerin nasıl tekrarlanacağını kontrol etmek için kullanılır. ilk görüntü, red.png, tekrar etmeyecek şekilde ayarlandı (no-repeat), ikinci görüntü ise, blue.png, tekrarlanacak şekilde ayarlandı (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;
    }

    Sonuç

    Douglas Karr

    Douglas Karr CMO'su AÇIK İÇGÖRÜLER ve kurucusu Martech Zone. Douglas düzinelerce başarılı MarTech startup'ına yardımcı oldu, Martech satın almaları ve yatırımlarında 5 milyar doların üzerindeki durum tespitine yardımcı oldu ve şirketlere satış ve pazarlama stratejilerini uygulama ve otomatikleştirme konusunda yardımcı olmaya devam ediyor. Douglas, uluslararası alanda tanınan bir dijital dönüşüm ve MarTech uzmanı ve konuşmacısıdır. Douglas aynı zamanda Dummie's Guide ve iş liderliği kitabının yayınlanmış yazarıdır.

    İlgili Makaleler

    Başa dön düğmeye
    Kapanış

    Adblock Algılandı

    Martech Zone sitemizden reklam geliri, bağlı kuruluş bağlantıları ve sponsorluklar yoluyla para kazandığımız için size bu içeriği ücretsiz olarak sağlayabilir. Sitemizi gezerken reklam engelleyicinizi kaldırırsanız seviniriz.