CSS - Sunum Bileşenleri

CSS
Sunum Bileşenleri
Celal Murat KANDEMİR
ESOGÜ – Eğitim Fakültesi - BÖTE
twitter.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 Özellikleri
2

Kenarlıklar
border-width: thin, medium, thick veya
sayı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:0 5
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

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;

http://cssround.com/
9

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 Girintiler
Margins 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

CSS3 kutu boyutu – box-sizing
box-sizing özelliği kutunun genişliğinin border
ve padding değerlerini içerip içermemesi
gerektiğ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çin
kullanılır
flex-align
Kapsayıcı elemana atanan box-orient
değerine göre kalan boşluğa göre hizalama
yapmak 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 soldan
sağa doğru hizalanmalarını sağlar
Column: elemanların dikeyde yukarında aşağıya
hizalanmalarını sağlar
row-reverse: row un tersidir.
column-reverse: column un tersidir.
23

Genişlik
Y
ü
k
s
e
k
l
i
k
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 Stilleri
Sı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ş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
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;
}

2DTransformations
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

3DTransformations
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, scale3d
37

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

CSS - Sunum Bileşenleri

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (10)

Plus de cmkandemir

Plus de cmkandemir (7)

CSS - Sunum Bileşenleri