CSS Dersleri 34 - Matematiksel Fonksiyonlar


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 calc Kullanımı

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 max Kullanımı

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 min Kullanımı

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>

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla