Connect with us

Hi, what are you looking for?

CSS

CSS Dersleri: clamp() Fonksiyonu

CSS Dersleri: object-fit
CSS Dersleri: object-fit

Siberdefter Akademi’de CSS Dersleri kaldığı yerden devam ediyor dostlar ve bugün arayüz kodlarken işimize çok fazla yarayacak olan clamp() fonksiyonundan bahsediyor olacağız.

Arayüz kodlarken bir kompenentin ya da elementin çeşitli çözünürlüklere ve çeşitli alanlar için varsayılan başta olmak üzere minimum ve maksimum genişlikleri olabiliyor. Bu konuda ise CSS’in clamp() fonksiyonu işimize çok yarıyor.

div {
    width: clamp(minimum, default, maximum);
}

clamp() fonksiyonu üç adet parametre alıyor; minimum genişlik, varsayılan genişlik ve maksimum genişlik.

div {
    width: clamp(100px, 75%, 200px);
}

Bu yazdığımız kod bloğunda divlerimiz, eğer karşılayabiliyorsa bulunduğu alanda yüzde 75’lik genişliğe sahip olacak fakat karşılayamıyorsa daha küçük bir alansa 100px genişliğe sahip olacak ve asla 100 pikselin altına düşmeyecek.

Eğer divimizin bulunduğu alan yüzde 75 oranını karşılayamıyor ve yine de geniş bir alansa 200px bir genişliğe sahip olacak. CSS’de Clamp fonksiyonunu yalnızca genişliklerde değil; yükseklik, font boyutu gibi ihtiyacınız olan bir çok alanda kullanılabilir.

Advertisement. Scroll to continue reading.

Written By

Siberdefter'de Chief Executive Officer

Click to comment

Leave a Reply

E-posta hesabınız yayımlanmayacak.

Editörün Tavsiyeleri

CSS

Siberdefter Akademi’de CSS Dersleri kaldığı yerden devam ediyor ve bugün CSS’in sözde sınıflarından :not() methodunu öğreniyor olacağız. Özellikle detaylı arayüz çalışmalarında oldukça faydası dokunan...

CSS

Siberdefter’de CSS Dersleri kaldığı yerden devam ediyor dostlar, bugün ‘margin’ özelliği CSS’te ne işe yarar bize ne sağlar bunu öğreniyor olacağız. Bir websitesine girdiğimiz...

CSS

Merhaba dostlar, Siberdefter‘e hoş geldiniz. Bugün CSS Dersleri‘ne kaldığımız yerden devam ediyoruz, bugünb CSS ile bir yazıya nasıl renk verebiliriz ondan bahsediyor olacağız. Bir...

CSS

Merhaba dostlar, Siberdefter‘e hoş geldiniz. Bugün CSS Dersleri‘nde “object-fit” teriminden bahsediyor olacağız. CSS’te object-fit nedir, CSS’te object-fit kullanımı, CSS “object-fit” ne işe yarar? Bu...

Advertisement