Tagcss

CSS Position Özellikleri

Merhaba arkadaşlar bu yazımda sizlere CSS’deki Position özelliklerinden bahsedeceğim. Position özellikleri bize elementin sayfadaki pozisyonunu belirlememizi sağlamaktadır. Bir elemente Position özelliğini verdikten sonra elemente top, bottom, left ve right gibi özellikler ile sayfadaki final pozisyonunun nasıl olacağını belirtebiliriz.

Position özelliğine 5 farklı değer verebilmekteyiz bunlar,

  • static
  • relative
  • absolute
  • fixed
  • sticky

Şimdi bu özelliklerin ne işe yaradıklarını anlatmak gerekirse

static

Static değeri verilmiş bir element sayfanın olması gerektiği gibi olmasını sağlar. Top, Bottom, Left, Right ve ya z-index özelliklerinin hiç biri bu değer de işlevi yoktur. Bu ön tanımlanmış bir değerdir.

relative

Relative değeri verilmiş element bulunduğu yere göre top, left, bottom, right özellikleri ilerleyecektir. Bunu kelimelerle anlatmak biraz kafanızı karıştırmış olabilir bu yüzden ben size hazırlamış olduğum fotoğraf ile anlatmak istiyorum.

Burada öncelikle ortadaki kutuya position: relative özelliğini verdik ve daha sonra top: 20px left: 20px özelliklerini verdik.

.box-2{
   position: relative;
   top:20px;
   left:20px;
}

absolute

Absolute değeri verilmiş element relative benzer bir özelliği vardır aradaki tek fark artık direkt olarak web sayfasının sol üst tarafı orijin olarak kabul edilir. Yani bir elemente absolute özelliği verirseniz top, left, bottom, right özelliği verdiğimiz de sayfanın sol üst kısmından bu işlemleri verecektir.

.box-2{
   position: absolute;
   top:  20px;
   left: 20px;
}

fixed

Fixed değeri verilmiş element, bu element sayfa yukarı veya aşağı çekilse bile element sayfanın belirlenen kısmında sabit olarak bulunacaktır. Bu elementin bulunacağı yeri top, left, bottom, right özellikleri ile belirleyebiliriz.

Örnek olarak eğer elementin sayfanın sağ alt kısmında bulunmasını istiyorsak şu css kodlarını yazmamız yeterli olacaktır.

.box{
   position: fixed;
   bottom: 0;
   right:  0;
}

kodunu yazdıktan sonra sayfanın sağ altında bulunacak elemente box adlı class değerini verirsek o element sayfanın sağ alt kısmında bulunacaktır.

sticky

Sticky değeri verilmiş bir element, relative ve fixed özellikleri arasında döner. Sayfada bulunduğu yere göre dururken eğer sayfanızı aşağı ve ya yukarı doğru kaydırırken bu elementten kurtulmaya çalıştığınız da fixed özelliği verilmiş bir element gibi davranmaya başlar ve element asıl olduğu yere geldiğinde tekrar relative bir elementmiş gibi davranmaya devam eder.

Buna örnek vermek gerekirse

Gördüğünüz gibi element kendi yerindeyken relative gibi davranırken sayfayı aşağı doğru kaydırmaya başladığımda fixed değeri verilmiş bir element gibi davranmaya başlıyor sayfayı tekrar yukarı kaydırdığımızda ve elementin asıl olması gereken yere geldiğinde tekrar relative olmaya devam ediyor.

Özet,

Bu yazımda sizlere CSS Position özelliklerinden bahsettim. Position özellikleri static, relative, absolute, fixed, sticky olmak üzere 5 farklı değer alabilmektedir. Herhangi bir elemente Position özelliği verilirse bu elemente top, bottom, left ve right gibi özellikler verirken atanan position değerine göre sayfada nasıl bir pozisyonda bulunacağını belirleriz.

Eğer bu yazımı beğendiyseniz ve CSS hakkında yazmış olduğum diğer yazıları merak ediyorsanız buraya tıklayabilirsiniz.

Ayrıca CSS Position Özellikleri hakkında daha detaylı bilgi almak isterseniz buraya tıklayınız.

Responsive CSS Grid Layout

Merhaba arkadaşlar bu yazımda sizlere kendinize ait Responsive CSS Grid Layout’unuzu yapmayı göstereceğim.

Öncelikle ihtiyacımız olan şey normalize.css dosyası Normalize CSS’in ne olduğunu ileri ki zamanlarda sizlere anlatacağım. Normalize CSS indirmek buraya tıklayınız.

Normalize CSS’i sisteminize ekledikten sonra kendi oluşturduğunuz bir CSS dosyasını da HTML kodlarınıza ekleyin ve head taglerinizin içine şu kodları eklemeyi unutmayın.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Oluşturacağımız Grid Sistemi HTML Olarak şu şekilde olacaktır.

<div class=”row”>

<div class=”col one”></div>

<div class=”col one”></div>

<div class=”col one”></div>

<div class=”col one”></div>


<div class=”col one”></div>


<div class=”col one”></div>

<div class=”col one”></div>


<div class=”col one”></div>


<div class=”col one”></div>

<div class=”col one”></div>


<div class=”col one”></div>


<div class=”col one”></div>

</div>

Şeklinde olacaktır yani 1 satırda maksimum 12 adet kolon bulunmak zorundadır.

Şimdi yapacağımız Grid Layout’un asıl kısmı olan CSS kısmına başlayalım ve en sonunda belirli hesaplamalar nasıl yapılır ondan bahsedeyim. Sizlere

CSS

*{
box-sizing: border-box;
}

body{
width: 100%;
min-width:320px;
max-width: 1200px;
margin: 0 auto;
}

.row{
padding: 20px;
width: 100%;
min-height: 1px;
float: left;
}

.col{
background: #FF0000;
min-height: 40px;
border-radius: 8px;
margin-left: 2.4%;
margin-right: 2.4%;
display: inline-block;
float: left;
}

.col:first-child{
margin-left: 0px;
}
.col:last-child{
margin-right: 0px;
}

.col.one{width: 3.93%;}
.col.two{width: 12.66%}
.col.three{width: 21.4%;}
.col.four{width: 30.13%}
.col.five{width: 38.867%;}
.col.six{width: 47.6%;}
.col.seven{width: 56.333%;}
.col.eight{width: 65.07%;}
.col.nine{width: 73.8%;}
.col.ten{width: 82.533%;}
.col.eleven{width: 91.27%;}
.col.twelve{width: 100%;}

@media (max-width: 768px){
.col{
width: 100% !important;
margin: 5px 0px 5px 0px;
}
}

Tüm CSS kodlarımız böyleyken teker teker sizlere bu kodları açıklamaya başlayalım.

*{
box-sizing: border-box;
}

*işareti tüm elemanların içindeki işlemlerden etkileneceğini temsil eder.

box-sizing, bir elementin genişliği ve uzunluğunun nasıl hesaplanacağını temsil eder.

box-sizing’i border-box olarak tanımlamak ise elementin genişliği ve uzunluğunun içinde ki içerik, padding ve border değerlerinin de eklenerek hesaplanmasını sağlar.

body{
width: 100%;
min-width:320px;
max-width: 1200px;
margin: 0 auto;
}

body, elementinde yaptığımız bu düzenlemeleri incelersek

Genişliğini %100 yapıyoruz böylece her zaman bulunduğu elementin maksimum genişliğinde olmasını sağlıyoruz.

Body elementinin minimum genişliğini 320px ve maksimum genişliğini ise 1200 px olarak ayarlıyoruz.

margin:0 auto; ise tüm elemanların ortalanmasını sağlıyor.

.row{
padding: 20px;
width: 100%;
min-height: 1px;
float: left;
}

row classına sahip elementlere verdiğimiz özellikleri incelersek

20 px bir padding veriyoruz böylece içerdeki tüm elemanlar yukarıdan, aşağıdan, sağdan ve soldan 20px ötelenmiş oluyor.

Hine genişliğini %100 yapıyoruz böylece içinde bulunduğu alanın genişliği kadar geniş olmasını sağlıyoruz.

Olabileceği minimum yüksekliği 1px veriyoruz ve float: left ile de sola yapıştırılmasını sağlıyoruz.

.col{
background: #FF0000;
min-height: 40px;
border-radius: 8px;
margin-left: 2.4%;
margin-right: 2.4%;
display: inline-block;
float: left;
}

col classına sahip elementlere verdiğimiz özellikleri incelersek,

arka plan rengi sadece doğru çalışıp çalışmadığını anlamak için

minimum uzunluğunu 40px olarak ayarlıyoruz.

border-radius ile köşelerinin kısımlarının dik olarak değil daha eğimli olmasını sağlıyoruz.

margin-left: 2.4% ve margin-right: 2.4% kısmını hesaplamaları anlatırken açıklayacağım.

display: inline-block kodu ise görünümünü inline-block olarak yani bir satır boyunca her elemanın yan yana olmasını amaçlıyor.

float: left ise hine sola doğru yatırılmasını sağlıyor.

.col:first-child{
margin-left: 0px;
}
.col:last-child{
margin-right: 0px;
}

Bu kodlar row’un içindeki col classına sahip ilk elemanın margin-left’ini 0px ve son elemanın margin-right özelliğini 0px e eşitliyor böylece en baştaki ve en sondaki elemanlar direkt olarak içinde bulundukları elemanın en köşelerinde olmuş oluyorlar.

Şimdi asıl karmaşık olan kısma geliyoruz önce kodları daha sonra ise hesaplamanın nasıl yapıldığını anlatacağım.

.col.one{width: 3.93%;}
.col.two{width: 12.66%}
.col.three{width: 21.4%;}
.col.four{width: 30.13%}
.col.five{width: 38.867%;}
.col.six{width: 47.6%;}
.col.seven{width: 56.333%;}
.col.eight{width: 65.07%;}
.col.nine{width: 73.8%;}
.col.ten{width: 82.533%;}
.col.eleven{width: 91.27%;}
.col.twelve{width: 100%;}

Bu kısım aslında en karmaşık olan kısım önce bir fotoğraf ile nasıl bir görüntümüz olduğunu göstereyim

İlk başta verdiğim HTML kodların dan bu tasarım ortaya çıkacaktır. Siyah olarak çizdiğim çizgiler ise her bir margin-left ve margin-right değerleridir. Hatırlıyorsanız bunlara %2.4 değerlerini vermiştik. Şimdi çizdiğim her çizgi için 2.4 olarak kabul edip toplarsam 52.8 değerini ve toplam sonucu 100’den çıkartırsam. 47.2 gibi bir değer çıkar bunu da 12’ye bölersek 3.93 değeri çıkar.

Şimdi burada yaptığımız şey şu tüm satırın genişliği %100 ve biz %100’den tüm margin-left ve margin-right değerlerini çıkartırsak aslında bu 12 siyah karenin kapladığı genişliği % değerini bulmuş oluyoruz daha sonra elde ettiğimiz değeri toplam kare miktarına bölersek tek 1 karenin kapladığı genişliği % olarak bulmuş oluyoruz. Yani eğer margin-left ve margin-right değerleri %2.4 den farklı olsaydı yukarı da yazmış olduğum tüm kodlar daha farklı olacaktı.

Şimdi son kısım olan bunları responsive hale getirme kısmına gelelim burada devreye @media kodları giriyor.

@media (max-width: 768px){
.col{
width: 100% !important;
margin: 5px 0px 5px 0px;
}
}

Burada yaptığımız işlem aslında basit kullandığımız cihaz da genişliğimiz 768px ve altındaysa col classına sahip elementlere şu işlemi uyguluyor.

genişliklerini alabilecekleri maksimum genişliğe eşitliyoruz yani artık yan yana değil de alt alta olmaya başlıyorlar daha sonra margin-top: 5px margin-right:0px margin-bottom: 5px ve margin-left: 0px’miş gibi gözükmesini istedik. Yukarıda verdiğim HTML kodu örneği yukarıda bahsettiğim şartlar sağlandığında

şeklinde gözükecektir. Yani her element sanki col twelve gibi davranmaya başlayacaktır.

Bu yazımda kendimize özel Responsive CSS Grid Layout’u oluşturmuş olduk. Bu konuda ki bazı hesaplamaların nasıl hesaplandığından bahsettik ve bu sistemin nasıl responsive hale getirebileceğimizden bahsettik.

Bu yazımı beğendiyseniz ve CSS hakkında yazmış olduğum diğer yazıları merak ediyorsanız buraya tıklayabilirsiniz.

Grid Tasarım Modülü

CSS Grid Tasarım Modülü, web site tasarımlarında kullanılan Grid sistemini kolaylaştırmak amacıyla oluşturulan bir modüldür. Modern Web Tarayıcıları tarafından desteklenmektedir ve bizi float ve position gibi işlemleri kullanmaktan kurtarır.

Bu yazımda Grid Tasarım Modülüne şu konulardan bahsederek giriş yapacağım

  • Display Özelliği
  • Grid Sütün
  • Grid Satır
  • Grid Boşlukları
  • Grid Çizgileri

Display Özelliği

Bir HTML Elementi, Grid sistemini kullanabilmesi için display özelliğinin grid ve ya inline-grid olması gerekmektedir.

.class-name{

display:grid;

}

.class-name{

display: inline-grid;

}

class-name özelliğinin sahip elementin bütün alt elementleri(child elements) grid özelliğine sahip olacaktır.

Grid Sütun

Yukarıdaki fotoğrafda da görebileceğiniz gibi yukarıdan aşağıya doğru sıralanan elemanlara Grid Sütun adını vermekteyiz

Grid Satır

Yukarıdaki fotoğrafda da gördüğünüz gibi soldan sağa doğru sıralanan elemanlar ise satır olarak adlandırılır.

Grid Boşlukları

Grid boşlukları, fotoğrafda gördüğümüz siyah çizgilerin arasında ki boşluğu temsil eder yani tüm satır/sütunların arasında boşlukları temsil eder.

3 farklı kullanımını vardır

  • grid-column-gap
  • grid-row-gap
  • grid-gap

grid-column-gap

grid-column-gap, sütunlar arasındaki boşluğu ayarlamamızı sağlar.

.class-name{

display: grid;

grid-column-gap: 50px;

}

grid-row-gap

grid-row-gap, satırlar arasındaki boşluğu ayarlamamızı sağlar.

.class-name{

display:grid;

grid-row-gap: 50px;

}

grid-gap

grid-gap, yukarıdaki 2 özellik için 2 farklı satır yerine tek bir satırda ortak bir boyut ve ya farklı farklı boyutlandırmalar için kullanılması için hazırlanmıştır.

.class-name{

display:grid;

grid-gap: 50px;

}

Hem satırların hem sütunların arasındaki boşluğu 50px yapar.

.class-name{

display:grid;

grid-gap: 50px 100px;

Sütunlar arasında 50px boşluk, satırlar arasında 100px boşluk olmasını sağlar.

Grid Çizgileri

Sütunlar üzerindeki çizgilere Sütun Çizgileri(Column Lines)

Satır üzerindeki çizgilere Satır Çizgileri(Row Lines)

Grid çizgilerini bir alt elemanın ne kadar boyutu olması gerektiğini ayarlarken kullanıyoruz.

.item1{

grid-column-start:1;

grid-column-end:3;

}

item1 elementini 1. sütundan 3. sütuna kadar kaplanıcak alanı kaplamasını sağlar.

.item1{

grid-row-start:1;

grid-row-end:3;

}

item1 elementinin 1. satırdan 3. satıra kadar kaplanıcak alanı kaplamasını sağlar.

Grid Çizgilerini kullanarak bir elementin sayfada ne kadar yer kaplayacağını belirleyebileceğiz.

Bu yazımda Grid Tasarım Modülüne giriş yapmış olduk ileriki yazılarımda bu konu hakkında ilerlemeye devam edeceğim. Eğer bu yazımı beğendiyseniz ve diğer yazılarımı da incelemek istiyorsanız tıklayınız.

Web’in Temel Öğeleri

Bu yazımızda Web’in Temel Öğelerinin neler olduğunu, bunların ne işe yaradıklarını ve birbirleri arasındaki ilişkiden bahsedeceğim.

Web’in Temel Öğelerini listeleyecek olursak,

  • HTML
  • CSS
  • Javascript

olmak üzere 3 adet temel öğe olduğundan bahsedebiliriz.

HTML Nedir ?

HTML, web sitelerinin tasarlanmasında kullanılan bir işaretleme dilidir. Bir programlama dili değildir. Kullandığımız tarayıcılar HTML kodlarını işleyerek bize Web sayfalarını sunar.

CSS Nedir ?

CSS, aslında bizim HTML ile hazırladığımız Web Sayfalarını görsel ve renklendirme gibi işlemleri yapmamızı sağlar. Yani HTML ile hazırladığımız siteyi görselleştirir ve daha anlaşılır bir hale getirir.

Javascript Nedir ?

Bir internet adresinin tarayıcınızda girip “ENTER” tuşuna bastığınız anda o sayfanın kaynak kodları, web server ve yorumlayıcılardan milisaniyeler içerisinde gelir ve bize sabit bir görüntü olarak çıktı verir. İşte Javascript burada devreye girer ve bir ikonun bir anda küçülmesi bir butonun bir anda yok olması ve ya 1 link’e tıkladığımızda yeni bir sayfanın açılması yerine aynı sayfada o işlemleri yapabilmemizi bir elementi başka bir yere anlık taşıyabilmemizi sağlar.

HTML, CSS ve Javascript’in Birbirleri Arasındaki İlişki

  • HTML’i bir web sayfasındaki içerik olarak düşünebiliriz.
  • CSS ise bize bir sunum verir yani yazmış olduğunuz HTML kodlarının sunuma hazır hale gelmesinden CSS sorumludur.
  • Javascript ile de Web Sayfasını etkileşimle hale getirmiş oluruz.

Şimdi bunları biraz detaylandırırsak HTML ile işte başlıklar, paragraflar, fotoğraflar’ı Web sayfasına ekledik ama böyle bırakırsak ne sizin gözünüze hoş gelir ne de başka birinin hoşuna gider. İşte CSS ile bu başlığın rengi Kırmızı olsun puntosu şu olsun, paragrafın rengi gri olsun puntosu şu olsun, fotoğrafın boyutu axa piksel olsun bir sarı renk çerçevesi olsun diyebiliyoruz ama böyle bırakır isek her şey sürekli olarak yerinde sabit olarak durur herhangi bir farklılık yapmak isterse kullanıcı yapamaz işte Javascript’de bunu sağlıyor yani bir yandanda kullanıcıyıda Web Sayfasıyla bir etkileşime sokuyor ve böylece mükemmel diyebileceğimiz bir Web Sayfasını ortaya çıkartabiliyoruz.

 

Kısacası bu 3.lüyü 3 Silahşöhler olarak tanımlayabiliriz.