Css ile Başlıklara ArkaPlan Vermek

Değerli dostlarım, bu yazımızda Css ile başlıklara nasıl arkaplan resmi ekleriz bunu öğreneceğiz. Öncelikle başlığımızda bir kelimeyi vurgulamak istediğimizde, o kelimeye arkaplan resmi uygulamak tasarım açısından oldukça göze hitap eden bir hal alacaktır.

Yukarıda yer alan resmi inceleyelim ve nasıl yapıldığını öğrenelim.

İlk olarak buraya tıklayarak bir arkaplan seçip indirelim. Eğer örnekte yer alan arkaplan’ın aynısını istiyorsanız buraya tıklayıp indirin. şimdi hemen Html kodlarımıza geçelim.

Html Kodlarımız

Html kodlarımız aşağıdaki gibidir. H1 elementi ile başlık oluşturup içerisine bir adet span elementi ekliyoruz. Span elementi içerisine vurgulamak istediğimiz kelimeyi yazalım.

<h1><span class="highlight">Vurgulu Başlık</span> Güzel bir başlık

Css Kodlarımız

Şimdi ise Css kodlarımıza geçip başlık içerisinde yer alan span elementimizi özelleştirelim. Aşağıdaki örnek kodları inceleyelim.

.highlight {
  background: url(yellow-brushstroke.png);
  background-repeat: no-repeat;
  background-size: 100% 95%;
  padding: 8px 0;
}

Değerli dostlarım bu yazımızda bu kadar. Sormak istediğiniz herhangi bir soru olduğunda aşağıda yer alan yorumlar kısmına yazabilirsiniz. Diğer bir yazımızda görüşmek üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares