Free Webmaster
  • Anasayfa
  • Web Tasarım & Yazılım
    • Asp
    • Php
    • Html & Css
    • Jquery & Javascript
    • WordPress
    • Webmaster Araçları
  • Teknoloji
    • Yazılım & Donanım
    • Mobil
  • İnternet
    • Öneriler
  • Eğlence
  • Yaşam
  • Diğer
Sonuç Bulunamadı
View All Result
Free Webmaster
  • Anasayfa
  • Web Tasarım & Yazılım
    • Asp
    • Php
    • Html & Css
    • Jquery & Javascript
    • WordPress
    • Webmaster Araçları
  • Teknoloji
    • Yazılım & Donanım
    • Mobil
  • İnternet
    • Öneriler
  • Eğlence
  • Yaşam
  • Diğer
Sonuç Bulunamadı
View All Result
Free Webmaster
Sonuç Bulunamadı
View All Result
Ana Sayfa Web Tasarım & Yazılım Html & Css

Css Calc Fonksiyonu Kullanımı

Hüseyin Yazar Hüseyin
27 Aralık 2014
Kategori Html & Css
0
0
Css Calc Fonksiyonu Kullanımı
0
SHARES
3.1k
VIEWS
Facebook'ta PaylaşTwitter'da PaylaşGoogle'da Paylaş

Css Calc fonksiyonu temel olarak matamatiksel işlem yapmak için kullanılmaktadır. Css calc fonksiyonunun kullanılışını daha iyi anlatmak için örnek üzerinde çalışmalıyız.

Diyelim ki bir web sayfa tasarımı yapıyorsunuz ve sayfanız dikey olarak ikiye bölünmüş iki kısımdan oluşacak. Bu bölümlerden biri sabit bir çözünürlüğe sahipken diğer bölüm kullanıcının ekran çözünürlüğüne göre dinamik olarak genişleyecek veya daralacak.

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

Css Calc Fonksiyonu Kullanım
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.sol{
      width:300px;
      height:100%;
      display:block;
      background-color:#fee;
      float:left;
}
.sag{
      width:calc(100% - 300px);
      height:100%;
      display:block;
      background-color:#eef;
      float:left;
}

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.

Etiketler: csscss calccss iki kutu yan yanacss ile genişlik hesaplamacss3

Related Posts

Css Calc Fonksiyonu Kullanımı
Html & Css

Css İle Arka Plan Resimini Ekrana Sığdırmak

Yazar Hüseyin
27 Aralık 2014
Css Calc Fonksiyonu Kullanımı
Html & Css

Css İle Uzun Kelimelerin Sonuna 3 Nokta Koymak

Yazar Hüseyin
27 Ağustos 2014

Bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Popüler Yazılar

  • Android Telefon Güvenli Mod ve Güvenli Moddan Çıkma

    Android Telefon Güvenli Mod ve Güvenli Moddan Çıkma

    1 paylaşım
    Paylaş 1 Tweet 0
  • Android Telefonlarda Gizli Kısayol Kodları

    0 paylaşım
    Paylaş 0 Tweet 0
  • Css İle Arka Plan Resimini Ekrana Sığdırmak

    0 paylaşım
    Paylaş 0 Tweet 0
  • Vodafone Modem (K3773) ile Turkcell ve Diğer Hatları Çalıştırmak

    0 paylaşım
    Paylaş 0 Tweet 0
  • Css Calc Fonksiyonu Kullanımı

    0 paylaşım
    Paylaş 0 Tweet 0

Kategoriler

  • Asp
  • Diğer
  • Html & Css
  • İnternet
  • Mobil
  • Öneriler
  • Teknoloji
  • Webmaster Araçları
  • Wordpress
  • Yazılım & Donanım

Dost Siteler

Kürtaj Hakkında

Hyundai Türkiye

© 2018 Free Webmaster • Tüm Hakları Saklıdır.

Sonuç Bulunamadı
View All Result
  • Anasayfa
  • Web Tasarım & Yazılım
    • Asp
    • Php
    • Html & Css
    • Jquery & Javascript
    • WordPress
    • Webmaster Araçları
  • Teknoloji
    • Yazılım & Donanım
    • Mobil
  • İnternet
    • Öneriler
  • Eğlence
  • Yaşam
  • Diğer

© 2018 Free Webmaster - Tüm Hakları Saklıdır.

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
Bu site çerezleri kullanmaktadır. Bu web sitesini kullanmaya devam ederek, kullanılan çerezlere onay vermiş olursunuz. Gizlilik ve Çerez Poltikası'nı ziyaret et.