CSS Bilenler Buyrun Burdan :)

Merhabalar,

elimde bir görsel var. Bu görsel bir heading'in arkasına gelecek şekilde ayaralamak istiyorum. Fakat bu heading de doğal olarak responsive olduğu için dedim CSS border ile yapılabilir.

Görsel linki : https://img.imgyukle.com/2023/09/01/rZcOOy.png

Yani başlık olacak bir h1, bu yazacağımız css görseldeki gibi olup başlığı çerçeveleyecek.

Konu hakkında yardımcı olabilecek arkadaşlar varsa çok sevinirim. Teşekkürler.

Kodları göndermezseniz size kimse yardımcı olamaz hocam.

Hizliresim r ulaşılamıyor

Ne kodu hocam? h1 üstüne css yazılacak. Konuyu okumadınız sanırım. Ha illa bir kod istiyorsanız buyrun

 h1 {
kod buraya 
}

Deneyebilir misiniz.

.heading {
position: relative;
}

.heading img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}

Linki yeniledim hocam.


Hocam bu görseldeki çerçeveyi CSS'e aktarmak istiyorum. Bu görseli kullansam da responsive durmayacak çünkü mobilde ve masaüstünde.

Yani görseldeki çerçeveyi bir h1 etiketi için CSS'e dökmek istiyorum kısaca.

Umarım anlatabilmişimdir, vallahi çok zor anlatmak

Hocam border ın kenar renkleri ayarlanıyor hatta calc ile uzunluğu da ayarlarsın
Dışa relative verirsin o kenar " simgeleri de absolute ile ayarlarsın, resim kullanmama gerek yok icon olarak ekleyebilirsin

Buraya kadar geldim zaten burda bir şey yok. Sadece calc ile uzunluğu ayarlayamadım borderda.

hocam ben tasarımdaki çizgi ve tırnak işaretlerini ps veya figma ile bölerdim. sonra şu şekilde bir yapı ayarlardım;

<div class="baslik-container">
  <h1>Başlık</h1>
  <div class="sol-ust-tirnak">görsel</div>
  <div class="sag-ust-cizgi">görsel</div>
  <div class="sol-alt-cizgi">görsel</div>
  <div class="sag-alt-tirnak">görsel</div>
</div>

.baslik-container {
  position: relative;
  /*istenilen padding değeri */
}
.sol-ust-tirnak {
  position: absolute;
  left: 0;
  top: 0;
}

.sag-ust-cizgi {
  position: absolute;
  right: 0;
  top: 0;
}

.sol-alt-cizgi {
  position: absolute;
  left: 0;
  bottom: 0;
}

.sag-alt-tirnak {
  position: absolute;
  right: 0;
  bottom: 0;
}