Pseudo Öğelerle Dış Sınır (Padding) Kullanımı Nasıl Yapılır?

Adı : Pseudo Öğelerle Dış Sınır (Padding) Kullanımı Nasıl Yapılır?

Pseudo öğelerle dış sınır (padding), CSS'te bir elementin içeriğinin kenar boşluğu arasındaki mesafesine uygulanan bir tasarım tekniktir. Bunun için, pseudo öğeler kullanarak elemente yalnızca bir kenarlık ekleyebilirsiniz.

Pseudo öğelerin kullanımı, CSS3 ile yaygınlaşmıştır ve birçok web tasarımcı tarafından tercih edilen bir seçenek haline gelmiştir. Bu teknik ile tasarımınızı bir adım öne çıkarabilirsiniz.

Pseudo Öğelerle Dış Sınır (Padding) Kullanımı Örnekleri
1. Birakiyo
Örneğimizde, birakiyo class'ına sahip bir elementimiz var. Bu örnekte, ::before ve ::after pseudo öğeleri kullanarak, elementin sol ve sağ taraflarına kenarlık ekleyeceğiz.

.birakiyo {
padding: 20px;
background-color: #f2f2f2;
}
.birakiyo::before,
.birakiyo::after {
content: '';
border: 5px solid black;
position: absolute;
top: 0;
bottom: 0;
width: 5px;
}
.birakiyo::before {
left: 0;
}
.birakiyo::after {
right: 0;
}

2. Tek Sayfa Site Navigasyon
Bu örnek, tek sayfa site navigasyonuna farklı bir boyut kazandırmayı amaçlıyor. Bunun için, .menu-linkler class'ına sahip öğelerimize birpseudo öğesi kullanacağız ve aralarındaki boşluğu ayarlayacağız. Bu, siteye bir çizgi çizerek erişimin rahatlatılmasını sağlar.

.menu-linkler {
position: relative;
padding: 10px 15px;
background-color: #ccc;
display: inline-block;
}
.menu-linkler::before {
content: '';
position: absolute;
top: 50%;
left: -20px;
rigth: -20px;
height: 1px;
width: calc(100% + 40px);
background-color: #000;
transform: translateY(-50%);
}

3. Daire Şeklinde Kenarlık
Bu örnekte, bir daire şeklinde kenarlık oluşturacağız. Bunun için, .circle-box class'ına sahip öğelerimize pseudo öğesi uygulayacağız ve waurtial kenar kullanacağız. Bu, daire şeklinde bir dış sınır oluşturur.

.circle-box {
position: relative;
height: 200px;
width: 200px;
background-color: #f2f2f2;
margin: 50px;
padding: 20px;
text-align: center;
display: inline-block;
}
.circle-box::before {
content: '';
position: absolute;
top: -20px;
bottom: -20px;
left: -20px;
right: -20px;
border-radius: 50%;
border: 5px solid #000;
}

Sık Sorulan Sorular
1. Pseudo öğelerle dış sınır, normal dış sınırdan nasıl farklı çalışır?

Normal dış sınır, içeriğin yanı sıra içeriğin altındaki ve üstündeki her şeyi de etkileyebilir. Pseudo öğeler, yalnızca belirli bir kenarlık etkisi yaratmak için eklenirken, diğer kenarlar ve içerik üzerinde herhangi bir etkisi yoktur.

2. Birden fazla pseudo öğe kullanabilir miyim?

Evet, birden fazla pseudo öğe kullanabilirsiniz. Farklı özelliklere sahip birden fazla pseudo öğe kullanarak çarpıcı ve yaratıcı tasarımlar oluşturabilirsiniz, ancak aynı özelliği birden fazla kez eklememeniz önemlidir.

3. Pseudo öğelerin desteği hangi tarayıcılarda mümkün?

Pseudo öğeler, IE8 ve sonraki sürümlerinden, Firefox, Chrome, Safari ve Opera dahil olmak üzere modern web tarayıcıları tarafından tamamen desteklenmektedir."