3.7 C
İstanbul
Çarşamba, Şubat 21, 2024
Ana SayfaYazılımCSS pseudo kullanarak HTML ögelerin önüne veya arkasına görsel eklemek

CSS pseudo kullanarak HTML ögelerin önüne veya arkasına görsel eklemek

- Reklam -

CSS, web sayfalarının görünümünü belirlemede önemli bir rol oynar. Bu programlama dilinde birçok özellik ve seçici (selector) vardır. Bu seçicilerden biri olan :before, HTML öğelerinin içeriğinin başına önceden belirlenmiş metin veya görseller eklemeye yarar. Aynı şekilde :after seçicisi de öğelerin içeriğinin sonuna eklemeler yapmamızı sağlar. Bu sayede, web sayfalarında ilgi çekici tasarımlar oluşturmak ve öğelerin işlevselliğini artırmak mümkün olur. Bu yazıda, :before seçicisi kullanılarak metnin öncesine veya sonrasına görsel eklemenin nasıl yapılacağını öğreneceksiniz.

- Sponsorlu -
Fiyatbulucu.com ile aradığınız ürünlerin güncel fiyatlarını karşılaştırın, fiyat geçmişini görüntüleyin ve doğru zamanda, doğru yerden, doğru fiyatla satın alın!

Pseudo elementler (yalancı ögeler) nelerdir?

“Pseudo” CSS’de, gerçek HTML öğelerinin yanı sıra stil uygulamak için kullanılan sahte öğelerdir. Bunlar, belirli durumlarda veya belirli öğelerin belirli durumlarında stil uygulamak için kullanılır.

- Reklam -

Örneğin, “:hover” sahte öğesi, bir fare imleci öğenin üzerindeyken stil uygulamak için kullanılır. Benzer şekilde, “:first-child” sahte öğesi, bir öğenin bir başka öğenin ilk çocuğu olması durumunda stil uygulamak için kullanılır.

Pseudo sınıfları, gerçek HTML öğeleri gibi kullanılabilir ve stil sayfalarında tanımlanabilir. Bu, web geliştiricilerinin belirli öğelerin belirli durumlarında stil uygulamasına olanak tanır ve web sayfalarının görünümünü daha özelleştirilebilir hale getirir.

Bu yazının konusu görsel eklemek olduğu için :before ve :after ögeleri üzerine yoğunlaşacağız.

- Ansiklopedika Topluluğu'ndan -

Ansiklopedika Images yayında!

Telif hakkı bulunmayan yüzlerce ücretsiz ve yüksek kaliteli görseli keşfedin.

Görsel kütüphanesi

:before nedir?

:before CSS’te bir öncü öğe veya yalancı öğe (pseudo-element) olarak adlandırılır. Bu yalancı öğe, bir HTML öğesi içindeki ilk çocuk öğeden önce belirli içeriği eklemek için kullanılır. Bu eklenen içerik özelleştirilebilir ve öğenin stilini değiştirerek sayfada daha fazla özelleştirme sağlar.

Örneğin, bir <h1> başlığı için bir simge veya içerik eklemek isterseniz, aşağıdaki CSS kodunu kullanabilirsiniz:

h1:before {
  content: "?";
  margin-right: 10px;
}

Bu kod, <h1> başlığından önce “?” simgesini ekleyecektir. content özelliği yalnızca :before ve :after yalancı öğelerde kullanılabilir ve içerik olarak herhangi bir metin, sayı, simge veya URL’yi alabilir.

:before yalancı öğesini kullanarak, sayfanın görünümünü değiştirmek için öğelerinizi özelleştirebilirsiniz. Ancak, her öğeye bir yalancı öğe eklemek, sayfa yüklemesi için gereksiz ekstra HTML koduna neden olabilir, bu nedenle gerektiği yerlerde kullanılmalıdır.

Görsel ekleme

.che:before {
	content: url(https://resources.premierleague.com/premierleague/badges/20/t8.png);
	margin-right: 5px;
}

Bu CSS kodu, .che sınıfına sahip bir öğenin (<div class="che">) içeriğinin başına bir resim ekler. content özelliği, :before yalancı öğesinde kullanıldığında, içeriğin ne olacağını belirtmek için kullanılır. Burada, url() fonksiyonu kullanılarak resim dosyasının URL adresi belirtilir. Bu örnekte, resim dosyası “https://resources.premierleague.com/premierleague/badges/20/t8.png” adresinden alınır.

margin-right özelliği, .che:before yalancı öğesinin sağ tarafındaki boşluğu ayarlar. Bu örnek için, resmin sağında 5 piksel boşluk bırakılır.

Sonuç olarak, bu CSS kodu, .che sınıfına sahip bir öğenin içeriğinin başına, Premier League logosunun küçük bir versiyonunu ekler. Bu özelleştirme, örneğin bir futbol takımının web sitesinde kullanılabilir.

:before kullanmanın avantajları şunlardır:

  1. HTML kodunda herhangi bir değişiklik yapmadan sayfaya içerik eklemeyi sağlar.
  2. Görüntülemeyle ilgili özellikler (örneğin background-color, color, font-size, padding, margin, text-align vb.) kullanılabilir, böylece eklenen içerik istenen şekilde biçimlendirilebilir.
  3. Sayfaya ekstra HTML öğeleri eklemeden, sayfanın tasarımını ve kullanılabilirliğini artırabilir.
  4. Birden fazla yalancı öğe kullanarak bir HTML öğesinin çeşitli bölümlerine ayrı ayrı stiller ve içerikler eklemek mümkündür.
- Advertisement -

Son içerikler

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz