Yazıya Arka Plan Verme

Css ile Yazıya Arka Plan Vermek
Css ile Yazıya Arka Plan Vermek
Bu yazımda çok popüler olmayan ama kullanışlı olduğunu düşündüğüm Yazıya Arka Plan verme özelliğinden bahsettim. Nasıl yapıldığına göz atmak için yazının devamını okuyabilirsiniz.

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 🙂 

0 Shares:
2 comments
  1. Merhaba. resimsiz olarak nasıl yaparız? h etiketlerini otomatik renkli arkaplan olsun mesela.

    1. Merhaba, Otomatik renkli arkaplan örneğinden kastınızı tam olarak anlayamadım. Detay verirseniz yardımcı olmaya çalışayım.

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
Görseli Yuvarlak Yapma
Devamını Oku

Görseli Yuvarlak Yapma

Bu yazımda img etiketiyle eklenen bir görseli Css özelliği border-radius ile nasıl yuvarlak yapabiliriz bu konudan bahsettim. Detaylar için yazımın devamını okuyabilirsiniz.

Devamını Oku

CSS ::before, ::after
Devamını Oku

::before, ::after Kullanımı

CSS: before ve: after özellikleri, sözde öğeler olarak da bilinen özelliklerdir. Bir elemanın içeriğinden önce veya sonra bir şey eklemek için kullanılırlar. Detaylar için yazımı inceleyebilirsiniz.

Devamını Oku