PAYLAŞ

Çoğu sitede dikkatinizi çeken borderlar görmüşsünüzdür. Border kullanmak, ilgili öğenin etrafına dilediğiniz ölçü,renk ve stilde çerçeve eklemek demektir. Bu kabaca bize borderin tanımını verir. Dilediğiniz içeriğin kenarına  uygulayabileceğiniz border ile kenarları oval yapmak, kesik çizgi, düz çizgi, noktalı, resimli dilediğiniz stil ile kullanabilirsiniz.

1-) Border Stilleri ve kullanım şekillleri:

Border_stilleri

Yukarıda verdiğim stillere ek olarak birde hidden stili mevcut.Dilerseniz onuda kullanabilirsiniz. Kullanım mantığına geçelim.

[css].cerceve {

border-style:solid;

}[/css]

css-solid-border-ciktisi

Sizde, dotted,dashed,solid,double,groove,outset,inset,hidden,ridge,none stil kodlarıyla deneme oluşturun.

2-) Çerçeve Kalınlığını Belirleme(Border-Width)

Oluşturacağımız çerçevenin kalınlığını belirleyeceğimiz kod yapısı. “em” ve “px” ölçü birimleri ile verdiğimiz değere göre çerçeve kalınlığımız ortaya çıkacak.Örnek olarak 3 birim kalınlığında ve çerçeve stillerinden noktalı(dotted) stili kullanarak bir deneme gerçekleştirelim.

[css].cerceve {
border-width:3px;
border-style:dotted;
}
[/css]

kodciktisi1

yukarıdaki örnek kodumuzun çıktısını da gördük. 3 piksek kalınlığında noktalı borderimizi oluşturduk.Şimdi sıradaki öğrenmemiz gereken işleme geçelim.

3-) Çerçeve Rengini Belirlemek(Border-Color)

İlk iki özellik ile hem çerçeve stili oluşturmayı hemde bu stile boyut atamayı öğrendik. Şimdi oluşturduğumuz kenarlığa renk verelim. Bunun için kullanacağımız border-color özelliği.

[css].cerceve {
border-width:3px;
border-style:dotted;
border-color:#FF0000;
}
[/css]

kodciktisi2

Bir önceki örnekten devam ettik. 3 piksel kalınlığında, noktalı kenarlığımızı şimdide kırmızı renk ile süsledik. Gördüğünüz bu üç işlem ile farklı Css’de border kullanımının temelini öğrenmiş oldunuz.Şimdi diğer detaylara geçelim.

İpucu: İlk üç özelliği tek satırda da kullanabilirsiniz. Bunun içinse sadece border fonksiyonunu tanımlamamız yeterli olacaktır.

[css].cerceve{border: 3px #FF0000 dotted;}[/css]

Sıralama şeklini gördünüz. İlk olarak çerçevenin kalınlığı daha sonra rengi en son ise stilini atadık. Diğer türlü kullansanız dahi yine çalışacaktır fakat klasik kabul görmüş kullanım şekli budur.Dikkate almanız daha iyi olacaktır. Bu Kodun çıktısı bir önceki örnekteki sonuç ile aynıdır.

4- Çerçeve Kenarlarını Oval Yapma

Yukarıdaki örnek ile devam edelim. Az önce 3. işlemin sonuna geldiğimizde 3 piksel kalınlığında noktalı ve kırmızı bir çerçevemiz vardı. Şimdi çerçevemizin kenar kısımlarını oval şekline getirelim. Bunu border-radius ile gerçekleştireceğiz. Fakat burada 2 farklı kod öbeği daha kullanacağız bunun nedeni ise tarayıcıların farklı yapısal özelliklerinin olması. Oval boyutu piksel, em, yüzde pt gibi ölçü birimleri kullanılabilir. Ben  10 piksel olarak ayarlıyorum örnekte belli olması açısından dilediğiniz ölçü birimini atayabilirsiniz.

[css]
.cerceve {border-width:3px;
border-style:dotted;
border-color:#FF0000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

}
[/css]

kodciktisi3

Yukarıdaki kod gördüğümüz gibi 4 kenarıda oval(yuvarlak) yaptı. Şimdi dilerseniz sadece sol ve sağ alt kenarları ovalleştirelim. Üst kenarlar normal kalsın. Bunun için ise yukarıdaki oval yapma kodlarını çıkartarak,

[css]
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
[/css]

kodlarını daha önce oluşturduğumuz css stilimize ekleyelim.

[css]
.cerceve {
border-width:3px;
border-style:dotted;
border-color:#FF0000;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
[/css]

kodciktisi4

yukarıdaki kodlarda bottomleft ve bottomright ile bottom-left, bottom-right kodlarında bulunan bottomları top yaptığımızda üst kenarlar oval şeklini alacaktır.Bunun için yeni bir kod yazmaya gerek duymuyorum. Bu şekilde dilediğiniz kenarı oval yapabilir dilediğiniz kenarı düz şekilde bırakabilirsiniz. Bütün bu işlemde bulunan border-style’i dilediğiniz stilde kullanabilirsiniz.

5-) Resimli Çerçeve Yapmak – Border-image

Yukarıdaki ilk 4 adımda çerçeve yapmayı, bu çerçeveye boyut kazandırmayı, stil vermeyi ve renk vermeyi gördük. Ayrıca border’in şeklinide yumuşatarak oval bir görünüm kazandırdık. Bu ana kadar işlemlerimiz basit şekilde anlatıldı. Bundan sonraki işlem ise kenarlığı resimli şekilde yapmak.

Word belgelerinde kapak hazırlarken gördüğümüz şekli bakalım verebilecekmiyiz. Fakat bize örnek bir kenarlık lazım. Bunuda buradan indireceğimiz örnek kenarlık resmi ile sağlayalım.

2 farklı şekilde resimi çerçeveye ekleyebiliriz. Bunlar, round ve streetch‘dir. Round resmin etrafında dönen bir şekilde olup streetch atayacağımız değer ile resmi gerecektir. yüzde yada bir sayı atayabiliriz. Ben round ile bir örnek vermek istedim siz streetch kodunuda deneyerek sonucu görebilirsiniz. Aşağıdaki kod öbeğinde 20% yerine dilerseniz 20 veya farklı bir rakam yada yüzdelik bir rakam yazabilirsiniz.

[css]
.cerceveresimli {

-webkit-border-image: url(ornekkenarlik.png) 20% round;
-o-border-image: url(ornekkenarlik.png) 20% round;
border-image: url(ornekkenarlik.png) 20% round;
}
[/css]

resimlikenarlik

Yukarıdaki örnek kullanımı biraz daha geliştirip farklı bir resim kullanalım. Google Görsel aramalarına pattern yazarak desen bulabilirsiniz. Ben örnek olarak buradaki deseni kullandım. ve kod ile biraz daha oynadım. 10%’lık boyutlandırma ile her iki kodun da çıktısı aşağıdaki örnek olarak yine round ile kodu veriyorum siz round yerine stretch yazarak da aşağıdaki sonuca ulaşabilirsiniz.

[css]
.cerceveresimli {

-webkit-border-image: url(pattern.png) 10% round;
-o-border-image: url(pattern.png) 10% round;
border-image: url(pattern.png) 10% round;
}
[/css]

resimlikenarlik2

Konumuz aslında bitmedi 5. bölüm olan Resimli Border oluşturma neredeyse başlı başına bir konu olduğu için 2. derste de onu detaylı şekilde düşünüyorum. Şimdilik üzerinden kısaca geçtim kafamızda bir yer edinsin diye .Umarım kodlar işinize yarar. Unuttuğum atladığım bir durum olursa lütfen yorum bölümünden bildirin ve düzelteyim.Hepinize iyi çalışmalar.

BİR CEVAP BIRAK

Please enter your comment!
Please enter your name here