Merhabalar,
Bu yazımda CSS’ de sözde öğelerden bahsedeceğim. HTML üzerinde tanıtmanıza gerek kalmadan CSS ile seçtiğimiz bir öğenin Türkçe çevirisi olarak baktığımızda öncesi ve sonrasını seçebiliyoruz. Bazı durumlarda olaya CSS ile müdahale etmek istediğimizde hatta gerektiğinde oldukça işimize yarayan bir işlemdir.
Bu nasıl gerçekleşiyor örneklerle detaylandıralım;
Örneğin bir p etiketi oluşturalım. İçine yazdığımız metnin başına veya sonuna content ile bir metin, sayı veya karakter ekleyelim. Zaten ::before veya ::after kullandığınız zaman content kullanmanız zorunludur aksi takdirde sözde değerlerimiz çalışmayacaktır. Eğer herhangi bir şey kullanmak istemeyip tasarım amaçlı kullanacaksanız boş bir tırnak işareti (” “) açmanız yeterli olacaktır. Aşağıdan çeşitli örneklere göz atabilirsiniz.
See the Pen CSS ::before, ::after Örnekleri by Furkan Giray (@furkangiray_com) on CodePen.
Yukarıda neler oldu bitti örnekleri özetleyelim;
- metin classına sahip bir paragraf oluşturup css ile ::before ve ::after değerlerine erişim sağlayıp content: ” ” ile metin ekleyebildik.
- content ile sadece metin, sayı değil karakterler, ikonlar da ekleyebiliyoruz. Sıradaki örnekte karakter classına sahip bir paragraf içinde 3 adımlı yol şeması çizen a tagları mevcut. Css ile ilk a elemanının before değerine ve son a elemanının after değerine özel karakterler eklenmiş görünüyor. İkili kullanma açısından anlaşılması kolay bir örnek.
- Bir diğer konuşma balonu örneği ise yine sitelerde karşımıza çıkabilen bir örnek. Arka plan rengi olan bir paragrafa konuşma balonu efekti vermek için balon classının before değerini border vererek üçgen şekil oluşturup konumunu belirliyoruz.
- Alıntı görünümü vermek için yine before ve after değerlerini kullanabiliriz. Paragraf içinde span veya başka bir tag açıp class tanımlaması ve o classın before ve after değerlerine tırnak karakteri eklemeniz yeterli olacaktır. Diğer görünüm detayları için örneği inceleyebilirsiniz.
- Fotoğraf üzerine yazı yazmamız gerektiğinde bazı açık renkli fotoğraflarda yazı tam olarak okunmaz. Bu durumlarda fotoğrafa karartı vermek en mantıklı seçenek olabilir. Yine before veya after değerini kullanarak position:absolute özelliği ile vereceğimiz yarı opak siyah renk kodumuzu görselin tamamına yayıyoruz. Bu sayede fotoğraf üstündeki yazının daha net okunmasını sağlayabiliyoruz.
Örneklerle ::before ve ::after değerlerini nasıl kullanabileceğinizi anlatmaya çalıştım.
Umarım faydalı olmuştur.
Mutlu Kodlamalar 🙂
