Css Konumlandırma (Position)

Css Konumlandırma (Position)

Arkadaşlar bu yazımda sizlere css de position yani konumlandırma özelliğinden bahsedicem.Css de position adındanda anlaşıldığı üzere bir elementin konumunu belirlememizde kullandığımız css özelliğidir.Dört farklı şekilde uygulanır yani 4 çeşit konumlandırma vardır.

Bunlar static,relative,absolute ve fixed olmak üzere 4 çeşittir.Bunların tek tek anlamlarını nasıl yapıldığını yazımın devamında açıklıycam.Position özelliğiyle cssde bolca karşılaşabilirsiniz.Biraz zordur aslında ama olayı kavradığınızda eğlenceli de bir hal alır diyemiycem 2 satırlık kodun neyi eğlenceli olsun.

Konumuza dönelim ve şimdi position özelliğini çeşitlerini nerelerde kullanıldığını tanımları ve örnekleriyle görelim.İlk olarak özellikleri tanıyalım.

Position Çeşitleri

1 : Static

Static özelliği birbiriyle ilişkili elementleri hiçbir özellik kullanmadan ham haliyle kullanan bir özellik.Yani oluşturduğumuz divlerin standart olarak geldiği position özelliği statictir.

2 : Relative

Relative özelliği ise mantık olarak static gibi çalışır nerede olduğunu bilir ve kendini konumlandırır farkları ise konumlandırma seçeneklerinin relative de çalışıyor olmasıdır.

3 : Absolute

Absolute özelliği birazcık başına buyruk diyebileceğimiz bir özellik sanki tek başınaymış gibi davranır hiçbir divi takmaz.Relative ile aralarındaki fark relative diğer elementlere göre absolute tarayıcıya göre kendini konumlandırır.

4 : Fixed

Fixed özelliği ise sabit bir div oluşturmak istiyorsak kullanacağımız seçenek kesinlikle fixed özelliğidir.Konumlandırdığımız yerden asla oyanamaz tembel bir arkadaşımızdır.

Şimdi Birde canlı örneklerimizle görelim ;

Html Kodları :

<div class="static">Static</div>
<div class="relative">Relative</div>
<div class="absolute">Absolute</div>
<div class="fixed">Fixed</div>

Css Kodları :

body {
background-color:#325780;
}
div {
 background-color:#FFFFFF;
 width:200px;
 border:1px dotted black;
 font:bold 22px/100px Tahoma;
 text-align:center; 
}
.static {
 position:static;
}
.relative {
 position:relative;
 top:50px;
 left:50px;
}
.absolute {
 position:absolute;
 top:50px;
 left:110px;
}
.fixed {
 position:fixed;
 bottom:50px;
 right:30px;
}

Uygulamalı Örnek : 

Kolay gelsin.

Css Oval Kenar (Border Radius)

Css Oval Kenar (Border Radius)

Arkadaşlar bugün css nin çok sevdiğim bir özelliği olan border radiusa değinmek istedim.Border radius ile element kenarlarına ovallik kazandırıyoruz oldukça kolay bi kullanımı var ve bunu sizin için yapan siteler bile mevcut.Malesef her tarayıcı desteklemiyor ama her tarayıcı için ayrı bir border radius yazarak bunun da üstesinden geliyoruz.Ben size bütün tarayıcılarda uyumlu olan şeklini göstereceğim.Ayrıca ben kendi temamda bayağı kullandım bu özelliği sizede öneriyorum güzel bir görünüm sağlıyor.Şimdi beraber bunu bir örnekle nasıl yapıldığını görelim....

Canlı örnekle görelim :

Html Kodları :

<divclass="radius">Radius Örnek</div>

Css Kodları :

body {
background-color:#325780;
}
.radius {
 background-color:#FFFFFF;
 width:200px;
 border:1px dotted black;
 font:bold 22px/100px Tahoma;
 text-align:center;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
}

Uygulamalı Örnek :

Kolay Gelsin.

Css Text Decoration

Css Text Decoration (Yazı Stilleri)

Css de text decoration özelliği tasarımlarınızda çok işinize yarıycak bu özellik.

Bir örnek vermem gerekirse bir menü oluşturdunuz diyelim ve haliyle linklerin üzerine mouse ile gelince üzerinde çizgi çıkıyor bu da hoş bi görüntü vermiyor o zaman ne oluyor text decoration devreye giriyor ve linkin üzerine gelindiğinde çıkan çizgiyi yok etmemize yardımcı oluyor.

Tabiki tek linklerimizin üzerine gelindiğinde çıkan çizgileri yok etmiyor.İstersek yazılarımızın altını üstünü ortasınıda çizebiliyoruz bu özelliğimizle.None ile birlikte dört adet özelliği bulunuyor.

Bunlar nelerdir : underline,overline,line-trough ve none özellikleri.

Şimdi örneklerle bu özelliklerimize bir göz atalım :

Html Kodları :

<div class="underline">Altı çizili</div>
<br>
<div class="overline">Üstü çizili</div>
<br>
<div class="line-through">Ortası çizili</div>
<br> 
<div class="none">Düz Yazı</div>

Css Kodları :

body{
background-color:#325780;
 color:white;
}
.underline{
text-decoration:underline; 
}
.overline{
text-decoration:overline; 
}
.line-through{
text-decoration:line-through;
}
.none{
text-decoration:none;
}

Uygulamalı Görünüm :

Kolay Gelsin.

Css Border (Kenarlık)

Arkadaşlar css ile sitemizdeki örneğin bir resime bir bloğa bir yazıya vb şeylere değişik kenarlıklar verebiliriz.Bunu rengini , boytunu , stilini değiştirebildiğiniz bir çerçeve gibi düşünün işte bunun etrafındaki o çerçeveye css dilinde border denmekte.Sekik adet border stilimiz var.Bunlar ; dotted , dashed , solid , double , grove , ridge , inset ve outset arkadaşlar.Benim pek sevediğim bi özelliktir kendi başına kullanıldığında hoş görüntü vermez o yüzden pek haz etmem.Gelin beraber örneklerle nasıl yapıldıklarını neye benzediklerini görelim.

Html Kodları :

<div class="dotted">Dotted Stili</div>
<br>
<div class="dashed">Dashed Stili</div>
<br>
<div class="solid">Solid Stili</div>
<br>
<div class="double">Double Stili</div>
<br>
<div class="groove">Groove Stili</div>
<br>
<div class="ridge">Ridge Stili</div>
<br>
<div class="inset">İnset Stili</div>
<br>
<div class="outset">Outset Stili</div>

Css Kodları : 

body {
background-color:#325780;
}
.dotted {
 background-color:#FFFFFF;
 border:5px dotted #FF8C00;
}
.dashed {
 background-color:#FFFFFF;
 border:5px dashed #FF8C00;
}
.solid {
 background-color:#FFFFFF;
 border:5px solid #FF8C00;
}
.double {
 background-color:#FFFFFF;
 border:5px double #FF8C00;
}
.groove {
 background-color:#FFFFFF;
 border:5px groove #FF8C00;
}
.ridge {
 background-color:#FFFFFF;
 border:5px ridge #FF8C00;
}
.inset {
 background-color:#FFFFFF;
 border:5px inset #FF8C00;
}
.outset {
 background-color:#FFFFFF;
 border:5px outset #FF8C00;
}

Uygulamalı Görünüm :

Kolay gelsin.