Css de Border Yükseklik Ayarları

Paylaşan Admin

11 Temmuz 2019 Perşembe

Css kullanırken kenar çizgileri bazen nesne de taşma yapar ve kaymalara neden olur. Liste düzenin de oluşturduğumuz bir menü de fare üzerine gelince üst veya alt border değerini kullanarak efek vermek isteyebiliriz. Bu bir üst nesneyi etkiler ve yükseklik veya en değerlerinde değişme olur.


Bunun gibi durumlarda farklı alternatifler kullanabiliriz.
İlk Yöntem: Background kullanmak
background:url(line.png) bottom right no-repeat;


İkinci Yöntem: box-sizing

.div { 
 width: 300px; 
 height: 100px; 
 border: 3px solid blue; 
}

div tag en 306 boy 106 değerini alacak

.div { 
 width: 300px; 
 height: 100px; 
 border: 3px solid blue; 
 box-sizing: border-box; 
}

box-sizing padding ve border değerlerinden gelen ölçülerin nesneye eklemez, nesne varsayılan ölçüsünü kabul eder.

Üçün Yöntem: Sonuncu yöntemim ::after pseudo elementi

.main-menu > li:hover > a::after { 
 color: #333333; 
 content: '';
 height: 3px;
 width: 100%;
 position: absolute;
 right: 0;
 bottom: 0;
 background-color: #F56969;
}

Menüler için ideal bir yöntem. Width ve Height değerleri nesne için sabit olarak kullanılabilir. Kullanabileceğim 3 yöntem pratik ve en az kodla şuan da bunlar.

Bunu Paylaş :