ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo
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
3
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(/slideshow/css-sunum-bileenleri/53859680/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 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
Kutu Model
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(/slideshow/css-sunum-bileenleri/53859680/&);
}
ul
{
list-style: bullet url(/slideshow/css-sunum-bileenleri/53859680/&);
}
Ä°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(/slideshow/css-sunum-bileenleri/53859680/"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;
}
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
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

More Related Content

CSS - Sunum BileÅŸenleri

  • 1. CSS Sunum BileÅŸenleri Celal Murat KANDEMÄ°R ESOGÃœ – EÄŸitim Fakültesi - BÖTE twitter.com/cmkandemir
  • 2. İç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
  • 4. 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
  • 5. 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;
  • 6. 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(/slideshow/css-sunum-bileenleri/53859680/border-image.png) 25% repeat;
  • 8. 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;
  • 11. 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
  • 13. 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
  • 14. 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
  • 15. Kutu Modeli -The Box Model 15 Margin Border Padding İçerik
  • 17. 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
  • 18. 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;
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. 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
  • 25. 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
  • 26. Liste Stilleri Sıralı ve Sırasız Listeler (Ordered and Unordered Lists)
  • 27. 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; }
  • 28. Ä°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(/slideshow/css-sunum-bileenleri/53859680/&); } ul { list-style: bullet url(/slideshow/css-sunum-bileenleri/53859680/&); }
  • 29. Ä°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(/slideshow/css-sunum-bileenleri/53859680/"images/blue-dot.png"); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }
  • 31. 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
  • 32. 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
  • 34. 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; }
  • 35. 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; }
  • 36. 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
  • 37. 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
  • 39. 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