CSS calc() Fonksiyonu

calc() fonksiyonu CSS özellik değerleri için basit bir hesaplama yapmanızı sağlar. calc() CSS3'te oldukça yeni ve hala nadiren kullanılan fonksiyondur. Css calc(), stil sayfasının içindeki hesaplamalar için kullanılır. calc() fonksiyonu matematiksel ifadelerin kullanılmasına izin verir:

CSS'de matematik kullanabilmek, özellikle karmaşık mizanpajlar oluştururken çok kullanışlı bir özelliktir. Her türlü ünitenin katılımıyla doğrudan stil tanımlarında basit aritmetik işlemleri ayarlamanıza olanak tanır. Boyutları, konumları, dönüşümleri ve hatta öğelerin renklerini hesaplamak için çok uygundur. Tüm bunların nerede kullanışlı olabileceğini ve buna değer olup olmadığını görelim.

CSS calc() Fonksiyonu


Calc() fonksiyonu, uzunluk değerlerini dinamik olarak hesaplamak için kullanılır.

CSS Sözdizimi:

calc(expression)

expression:Gereklidir. Matematiksel bir ifade. Sonuç değer olarak kullanılacaktır. Aşağıdaki operatörler kullanılabilir: + - * /

Tarayıcı Desteği

Fonksiyon
calc() 26.0 9.0 16.0 7.0 15.0

ÖRNEK:

  
  width: calc(100% - 80px);
  
  

Calc() Değerler


Geri dönüş değeri

Bir özelliği tanımlamak için calc() fonksiyonu kullanıyorsanız, tarayıcının calc() fonksiyonu desteklememesi durumunda bir geri dönüş genişliği değeri tanımlamak iyi bir fikir olabilir. Geri dönüş değeri ana değerden önce gelmelidir.

  
  width: 95%;
  width: calc(100% - 100px);
  
  

Pek çok kişi, önişlemcilerin yalnızca mantık ve hesaplamalardan oluştuğunu düşünür, ancak calc() fonksiyonu dünyada hiçbir ön işlemcinin yapamadıklarını yapabilir: herhangi bir ölçü birimini karıştırır. Önişlemciler, yalnızca ölçüm birimlerini, açısal ölçüm birimleri, zaman, frekans, çözünürlük ve bazı uzunluk birimleri gibi sabit ilişkilerle karıştırabilir.

  
div {
   font-size: calc(3em + 5px);
   padding: calc(1vmax + -1vmin);
   transform: rotate(calc(1turn - 32deg));
   background: hsl(180, calc(2*25%), 65%); 
   line-height: calc(8/3);
   width: calc(23vmin - 2*3rem);
   }
  
  

Sözdizimini anlamak için işte birkaç örnek:

  
div {
  width: calc(70%/3); 
  width: calc(50% - 2em); 
  width: calc((50% + 2em) / 2 + 14px);
  width: calc(100% / 3 - 2 * 1em - 2 * 1px);
  margin: calc(1rem - 2px) calc(1rem - 1px);
  background-position: calc(50% + 20px) calc(50% + 20px), 50% 50%;
  background-image: linear-gradient(to right, silver, white 50px, white calc(100% - 50px), silver);
   }
  
  

ÖZET


CSS calc() fonksiyonu, modern web uygulamalarınız için güzel, akıcı ve duyarlı web tasarımları yapmanıza yardımcı olacak basit bir püf noktasıdır.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

5336

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.