İç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. bujustify-content
özellik olarak ayarlandıcenter
alt öğeyi kap içinde yatay olarak ortalamak için. bualign-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. bugrid-template-columns
özellik olarak ayarlandırepeat(2, 1fr)
eşit genişlikte iki sütun oluşturmak için. bugap
ö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. butransition
ö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!
İş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. buanimation-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!
İş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ğivar()
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
veblue.png
kullanılarak yüklenenbackground-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. bubackground-position
özelliği, her görüntünün konumunu kontrol etmek için kullanılır. bubackground-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;
}