CSSSunum Bileşenleri

Celal Murat KANDEMİRESOGÜ – Eğitim Fakültesi - BÖTEtwitter.com/cmkandemir

İçindekiler� Kenarlıklar - Borders

� Taşma - Overflow

� Kenar boşlukları ve –girintiler Margins and Paddings

� Kutu modeli - The Box Model

�Genişlik/Yükseklik - Width and Height

�Diğer CSS Özellikleri2

Kenarlıklar

3

Kenarlıklar

� border-width: thin, medium, thick veyasayısal değer (e.g. 10px)

� border-color: renk isimleri veya RGB değer

� border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

�Her bir özellik sol, sağ, üst ve alt kenar için ayrı ayrı tanımlanabilir.

� border-top-style, border-left-color, …

4

Kenarlık Steno Özellikleri� border: kenarlık özelliklerini bir kerede

ayarlamak için steno kuralı:

aşağıdakine eş değerdir:

� Steno kuralı tüm kenarlar için uygulanabilir: border-top, border-left, border-right, border-bottom

�When to avoid border:05

border: 1px solid red

border-width:1px;border-color:red;border-style:solid;

CSS3 – Kenarlık resmi�Normal kenarlık yerine görüntü kullanılmasına

imkan verir.

�Örnek:

� border-image özeliiği 3 bölümden oluşur:

�Daha detaylı açıklama:

� http://css-tricks.com/6883-understanding-border-image/

6

border-image: url(border-image.png) 25% repeat;

CSS3 –Yuvarlatılmış Köşeler

7

CSS3 –Yuvarlatılmış Köşeler

� CSS 3 ile gelmiştir.

� Tüm önemli tarayıcılarda geçerlidir.

� Firefox, IE 9, Chrome, Opera ve Safari

� border-radius özelliği ile belirlenir

� Köşe yarıçapı üç şekilde tanımlanabilir:

border-radius: [<uzunluk>|<%>][<uzunluk>|<%>]?

border-radius: 15px;

border-radius: 15px 20px;

border-radius: 15px 15px 15px 10px;

CSS3 –Yuvarlatılmış Köşeler

� http://cssround.com/

9

Taşma -Overflow

Taşma

� overflow: İçeriğin belirlenenden daha fazla alana gereksinimi olduğunda içeriğin bulunduğu bileşenin nasıl davranacağını belirtir.

� Değerler:

� visible (default) – bileşen dışında içerik taşmasını göster

� auto – gerektiğinde kaydırma çubuklarını göster

� scroll – kaydırma çucuklarını her zaman göster

� hidden – sığmayan içeriği gizle/kırp

11

Kenarlıklar ve GirintilerMargins and Paddings

12

Kenarlıklar ve Girintiler

� margin ve padding bileşeni çevreleyen boşluğu tanımlar

� Sayısal değer, e.g. 10px veya -5px

� Her dört kenar için ayrı ayrı belirlenebilir-margin-top, padding-left, …

� margin kenarlık dışındaki boşluktur

� padding kenarlık ve içerik arasındaki boşluktur

13

Margin ve Padding: Steno Kuralları

� margin: 5px;

� Tüm kenar boşlukları 5 px olarak ayarlanır;

� margin: 10px 20px;

� Üst ve alt 10px, sol ve sağ 20px;

� margin: 5px 3px 8px;

� üst 5px, sol/sağ 3px, alt 8px

� margin: 1px 3px 5px 7px;

� üst, sağ, alt, sol (üstten itibaren saat yönünde)

� padding değerleri için de aynısı geçerli.14

Kutu Modeli - The Box Model

15

Margin

Border

Padding

İçerik

Kutu Model

CSS3 kutu boyutu – box-sizing

� box-sizing özelliği kutunun genişliğinin border ve padding değerlerini içerip içermemesigerektiğini tanımlama imkanı sağlıyor.

� İki değer alabilir:

� box-sizing: content-box (default)box-sizing: border-box

� http://fatihhayrioglu.com/css3-box-sizing-ozelligi/

17

CSS3 box-sizing (Örnek)

�Örnek: Toplam genişlik 300 px kutu (paddings ve borders dahil)

18

width: 300px;border: 1px solid black;padding: 5px;

/* Firefox */-moz-box-sizing: border-box;/* WebKit */-webkit-box-sizing: border-box;/* Opera 9.5+, Google Chrome */box-sizing: border-box;

CSS 3 Esnek Kutu Model

� Sayfa yerleşimi ile ilgili bir özelliktir.

� "display" özelliği için yeni değerler:

� flexbox

� inline-flexbox

�Halen geliştirilmesi devam ediyor.

� Çoğu tarayıcıda desteklenmiyor.

19

CSS 3 Esnek Kutu Model

� http://wreply.com/web/css/css-flex-yapisi-kapsamli-anlatim.html

� http://burakcan.me/css-flexbox-yapisina-goz-atalim/

� http://fatihhayrioglu.com/css3-esnek-kutu-yerlesimiflexible-box-layout/

� https://css-tricks.com/snippets/css/a-guide-to-flexbox/

20

CSS 3 Flexible Box Model Özellikleri

� flex-direction� esnek kutuların sıralama yönünü belirler..� flex-order� Bileşenlerin sıralamasını değiştirmek

amacıyla kullanılabilir. Bileşenler bu değere göre sıralanır.

21

CSS 3 Flexible Box Model Özellikleri

� flex-pack� kapsayıcı kutunun içindeki esnek kutuların

kapsayıcıya göre konumunu belirlemek içinkullanılır

� flex-align� Kapsayıcı elemana atanan box-orient

değerine göre kalan boşluğa göre hizalamayapmak için kullanılır.

22

CSS 3 flex-direction� Flex kapsayıcısı içerisindeki elamanlarının

yatay veya dikey olarak hizalanmalarınısağlayan özelliktir

�Alabileceği değerler:

� row(varsayılan): elemanların yatayda soldansağa doğru hizalanmalarını sağlar

� Column: elemanların dikeyde yukarında aşağıyahizalanmalarını sağlar

� row-reverse: row un tersidir.

� column-reverse: column un tersidir.23

Genişlik

Yükseklik

W i d t h

H

e

i

g

h

t

Genişlik veYükseklik

� width – bileşen (eleman) genişliği için sayısal değeri gösterir, örn. 200px

� height – bileşen (eleman) yüksekliği için sayısal değeri gösterir, örn. 100px

� Varsayılan olarak bileşenin yüksekliği içeriği ile belirlenir.

� Inline bileşenlere yükseklik uygulanamaz. display stili değiştirilmedikçe.

25

Liste StilleriSıralı ve Sırasız Listeler

(Ordered and Unordered Lists)

Styles for Lists� Liste özellikleri liste bileşenlerinin nasıl

görüntüleneceğini belirlemek amacıyla kullanılır.

� Liste bileşen sembolünü değiştirir.

�Normal stiller:

� List-style-type

� <ol>için değerler: circle, square,…

� <ul>için değerler: upper-roman, lower-alpha

� Her ikisi için: noneul{

list-style-type:none;}

İm Olarak Resimler�Madde imi olarak resim kullanılabilir.

� list-style-image

� Tüm tarayıcılarda aynı görüntülenemeyebilir.

� IE im ve içerik arasında daha az boşluk bırakır.

� Steno özellik

ul{

list-style-image: url('images/blue-dot.jpg');}

ul{

list-style: bullet url('images/blue-dot.jpg');}

İm Olarak Resimler- Alternatif

� En soldakine arkaplan yerleştirilebilir.

� Resimli im gibi görünür.

ul{

list-style-type: none;padding: 0px;margin: 0px;

}

li{

background-image: url("images/blue-dot.png");background-repeat: no-repeat;background-position: 0px 5px; padding-left: 14px;

}

Navigasyon Oluşturma

Navigasyon Oluşturmak

� Bir navigasyonda ne bulunur?

� Sağdan sola yerleştirilmiş bazı düğmeler

� Ya da yukarıdan aşağıya

� Genişletilebilir yapmak gerekir.

� Bir liste yaratın

� Yeni nav bileşeni kolayca ekleyin

Menü Benzeri Liste Oluşturmak

32

ul.menu{

list-style-type: none;padding: 0px;margin: 0px;

}

li.menu-item{

float: left;margin: 10px;

}

Menu-example

Animasyonlar

Animasyonlar� Tüm webkit tarayıcılarda çalışır.

�Örnek:

34

@keyframes resize {

0% {...}

50% {...}

100% {...}

}

#box {

animation-name: resize;

animation-duration: 1s;

animation-iteration-count: 4;

animation-direction: alternate;

animation-timing-function: ease-in-out;

}

Geçişler-Transitions� Bir stilden diğerine geçişte efekt eklenir.

� Farklı zamanlama fonksiyonları:

� ease, ease-in, ease-out, ease-in-out, linear

�Örnek:

35

#id_of_element {-webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out;

}

2D Transformations

� 2D transformlar geniş desteğe sahiptir.

� Skew – skew element

� transform: skew(35deg);

� Scale – scale element

� transform: scale(1,0.5);

� Rotate – rotates element

� transform: rotate(45deg);

� Translate – moves element

� transform: translate(10px, 20px);36

3D Transformations

� 3D transform 2D transforma benzerlik gösterir.

� Sadece Safari ve Chrome’da çalışır.

� X, Y ve Z transformasyon

� transform: rotateX(180deg);

� transform: rotateY(180deg);

� transform: rotateZ(180deg);

� perspective: 800;

� perspective-origin: 50% 100px;

� translate3d, scale3d37

Diğer CSS Özellikleri

38

Diğer CSS Özellikleri

� cursor: bileşen üzerine gelindiğinde fare imlecinin şeklini belirler.

� Değerler: crosshair, help, pointer, progress, move, hair, col-resize, row-resize, text, wait, copy, drop, ve diğerleri

� white-space – Metinlerde satır kırılımını kontrol eder. Alabileceği değerler:

� nowrap – metni tek satırda tutar

� normal (default) – gerektiğinde satırı bölmeye tarayıcı karar verir

39

CSS Sunum Bileşenleri

Sorular?

twitter.com/cmkandemir