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ınlacaktır.

9071

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.