Nasıl Yapılır?

Css Calc Fonksiyonu Kullanımı

Diyelim ki bir internet sayfa tasarımı yapıyorsunuz ve sayfanız dikey olarak ikiye bölünmüş iki kısımdan oluşacak.

Css Calc fonksiyonu asli olarak matamatiksel prosedür uygulamak amacıyla kullanılmaktadır. Css Calc işlevinin kullanılışını daha iyi anlatmak amacıyla numune üstünde çalışmalıyız.

Diyelim ki bir internet sayfa tasarımı yapıyorsunuz ve sayfanız dikey olarak ikiye bölünmüş iki kısımdan oluşacak. Bu seksiyonlerden biri sabit bir çözünürlüğe sahipken başka seksiyon kullanıcının ekran çözünürlüğüne göre hareketli olarak genişleyecek ya da daralacak.

Sol bölme 300 px genişliğinde menü bölmemiz olsun. Ve sağ bölmemiz hareketli olarak genişliği değişen içerik bölmemiz olsun.

Örnek Css Kodumuz:

.kutu { max-width:200px; padding:10px; display:block; background-color:#ddd; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; }

Açıklama: ‘sol‘ ve ‘sag‘ adinda iki kutu oluşturduk ve yüksekliğini %100 yaptık. Sol kutu 300 px genişliğinde ve sağ kutu css calc fonksiyonu ile 100% – 300px olarak ayarladık.

Oluşturduğumuz iki kutu yan yana ve bütün ekranı kaplayacak şekilde duracaktır.

Aynı şekilde calc fonksiyonunu yükseklikte kullanabilirsiniz. Ek olarak Calc fonksiyonu ile pikseller üzerinde toplama ve çıkarma işlemi yapabilirsiniz.

Daha fazla göster

İlgili Makaleler

Close
Close