Metin için çıkıntılı bir arka plan ve çizgi ayırıcıları elde etme?

Uğur · Mar 16, 2025, 11:23 ÖÖ

Size yeterlilik seviyelerim hakkında bir fikir vermek için, WP Bakery ve The7 tema oluşturucusunu kullanarak küçük işletmeler için Wordpress web siteleri tasarlıyorum. Wordpress sitelerimdeki CSS düzenleyicisi aracılığıyla CSS'yi inceleyebilir ve özel CSS ekleyebilirim, ancak başlangıç seviyesindeyim. Hızla ilerliyorum ve tasarım ve geliştirme yapmaktan keyif alıyorum. Becerilerimi ağırlıklı olarak CSS ve ön uç geliştirmenin diğer alanlarında geliştirmek istiyorum. Neyse, hepinizle tanıştığıma memnun oldum ve soruma geçeyim.

1. satır, çoğunlukla resim olarak oluşturduğum 2 afiş içeriyor.
2. satır, tema oluşturucumdaki bir afiş öğesini kullanarak şu ana kadar Wordpress'te elde edebildiğim 1 afiş içeriyor.

1. satır sadece elde etmek istediğim etkiyi göstermek için orada. Metnin üstünde ve altında bulunan arka plan ve ayırıcı çizginin bir görüntünün parçası olmasını istemiyorum. Bunları CSS ile oluşturmak istiyorum. 2. satır üzerinde çalıştığım pankartı içeriyor.

Doğrulamak gerekirse, elde edemediğim iki alan şunlardır;

Afişlerin Etrafında Çıkıntılı Kırmızı Arka Plan (aradığım etkiyi elde etmek için bir çeşit negatif dolguya ihtiyaç duyacağını tahmin ediyorum?)
Her pankartın içindeki başlık metninin üstünde ve altında bulunan kırmızı çizgi ayırıcılar.

cakal · Mar 16, 2025, 11:27 ÖÖ

@uğur Çıkıntılı kırmızıyı birkaç şekilde elde edebilirsiniz:
1. Sert kenarlı bir kutu gölgesi kullanma: box-shadow: -0.5rem -0.25rem red;
2. ::after veya ::before gibi bir pseudo element kullanmak, ancak bu biraz daha zorlaşıyor çünkü yığınlama sırası hakkında endişelenmeniz gerekiyor. Bunu aşağıya ekledim.
Kopyanın üstündeki ve altındaki kenarlıklar için, kendim sözde öğeleri kullanırdım:

Kod Seç

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: grid;
            place-content: center;
            height: 100vh;
        }
        div{
            background-color: white;
            width: 500px;
            height: 500px;
            margin-inline: auto;
            outline: 1px solid pink;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            &::after{
                background-color: red; /* adjust as needed */
                content:''; /* needed for the element to render */
                display: block;
                margin-inline: auto;
                position: absolute;
                width: 100%;
                height: 100%;
                left: -20px;
                top: -10px;
                z-index: -1;
            }
        }
        h1{
            position: relative;
            text-align: center;
            padding-block-start: 50px;
            padding-block-end: 50px;
            margin: 0;
            &::before{
                background-color: red; /* adjust as needed */
                content:''; /* needed for the element to render */
                display: block;
                margin-inline: auto;
                position: absolute;
                width: 80%; /* adjust as needed */
                height: 2px; /* adjust as needed for rule thickness */
                right: 0;
                left: 0;
                top: 0;
            }
            &::after{
                background-color: red; /* adjust as needed */
                content:''; /* needed for the element to render */
                display: block;
                margin-inline: auto;
                position: absolute;
                width: 80%; /* adjust as needed */
                height: 2px; /* adjust as needed for rule thickness */
                right: 0;
                left: 0;
                bottom: 0;
            }
        }
    </style>
</head>
<body>
    <div><h1>This is my headline</h1></div>
</body>
</html>

Uğur · Mar 16, 2025, 11:30 ÖÖ

Merhaba @cakal Ayrıntılı yanıtınız için çok teşekkür ederim.

Kutu gölgesi talimatlarını takip etmeyi ve çalıştırmayı başardım - harika! Çok tatmin edici.🙂

Yukarıdaki ve aşağıdaki ayırma çizgilerinin HTML'si benim için biraz daha zor, çünkü HTML bilgim yetersiz, bu yüzden bu bölüme başlamadan önce HTML okuluna gitmek için eğitim almam gerekebilir.

Haberler:

Metin için çıkıntılı bir arka plan ve çizgi ayırıcıları elde etme?

Uğur

cakal

Uğur