Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Matematik Fonksiyonları Kullanımı konusunu öğreneceğiz.
CSS'de matematiksel fonksiyonları sayesinde hesaplamalar yapabiliriz. Bu fonksiyonlar calc(), max() ve min() olmak üzere 3 tanedir.
CSS'de calc fonksiyonu, matematiksel hesaplamalar yapmakta kullanılır. Fonksiyon içine yazdığınız matematiksel işlemleri değer olarak atayacaktır. Matematiksel işlemler için kullanılacak operatörler şunlardır : ( +, - , * , /).
<!DOCTYPE html>
<html>
<head>
<style>
#box {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<h1>calc() Kullanımı</h1>
<p>Ekranın her iki tarafı ile ekranın kenarları arasında 50 piksel boşluk olacak şekilde bir div oluşturun:</p>
<div id="box">Lorem ipsum...</div>
</body>
</html>
CSS'de max fonksiyonu, parametre verilmiş değerlerden en büyük olanını geri döndürür.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
</style>
</head>
<body>
<h1>max() Kullanımı</h1>
<p>#box'ın genişliğini en büyük değere, %50 veya 300 piksele ayarlamak için max() kullanın.</p>
<div id="box">Lorem ipsum...</div>
<p>Etkiyi görmek için tarayıcı penceresinin boyutu ile oynayın.</p>
</body>
</html>
CSS'de min fonksiyonu, parametre verilmiş değerlerden en küçük olanını geri döndürür.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
</style>
</head>
<body>
<h1>min() Kullanımı</h1>
<p>#box'ın genişliğini en küçük değere, %50 veya 300 piksele ayarlamak için max() kullanın.</p>
<div id="box">Lorem ipsum...</div>
<p>Etkiyi görmek için tarayıcı penceresinin boyutu ile oynayın.</p>
</body>
</html>