Merhabalar,
Bu yazımda çok popüler olmayan ama kullanışlı olduğunu düşündüğüm Yazıya Arka Plan verme özelliğinden bahsedeceğim. Tasarım gereği veya sizden istenilmesi durumunda bu işlemin oldukça kolay olduğunu siz de anlayacaksınız.
Hemen bir örnek kullanımını tasarlayalım. Html üzerinde yazı yazacağımız etiketi tanımlayıp içine yazıyı yazalım.
<h1>Yazıya Arka Plan Görseli Verme Örneği</h1>
İşlemin Css tarafına geçelim. Belirli bir bölgeye arka plan vermek için background-image kullanmamız gerektiğini biliyoruz. Daha sonra url(‘ ‘) içine görselin dosya yolunu belirtiyoruz.
Aslında yazı içinde background-image kullanacağız. Onun yanında kullanacağımız diğer background terimi ise background-clip oluyor. Değerini text olarak belirliyoruz. Bu özellikte arkaplanın metine uygun uyarlanmasını sağlıyor.
Yazıya arka plan verdik ama yazının varsayılan rengini yani color özelliğinin değerini de transparent olarak ayarlamayı unutmayalım. Bu sayede yazı herhangi bir renge sahip olmayıp transparan niteliğinde direkt arka plandan gelen renkleri yansıtacak.
Açıklamalarımı Css üzerinde kodlamaya dökecek olursam aşağıdaki 3 özellik yazıya arka plan vermenizi kolaylıkla sağlayacaktır.
h1 {
background-image: url('gorsel.jpg');
background-clip: text;
-webkit-background-clip: text; /* Chrome Kullanıcıları İçin */
color: transparent;
}
İşlemlerimiz bu kadar. h1 etiketi tanımlandı ve arka plan görseli için gerekli özellikler Css tarafında yazıldı. Daha iyi anlamanız ve gözünüzde canlanması için Codepen üzerinden de göze hoş gelecek ilaveler yaparak işlemi sizinle paylaştım. Aşağıdan inceleyebilirsiniz.
See the Pen Yazıya Arka Plan Görseli Verme by furkangiray.com (@furkangiray_com) on CodePen.
Umarım işinize yarar ve anlaşılır bir paylaşım olmuştur. Anlamadığınız durumlarda yorumlar üzerinden soru sorabilir ve yazabilirsiniz.
Mutlu Kodlamalar 🙂
2 comments
Merhaba. resimsiz olarak nasıl yaparız? h etiketlerini otomatik renkli arkaplan olsun mesela.
Merhaba, Otomatik renkli arkaplan örneğinden kastınızı tam olarak anlayamadım. Detay verirseniz yardımcı olmaya çalışayım.