CSS İpuçları – 12 : 3 köşeye border tanımı

Normalde tüm köşelere kenarlık(border) tanımlarken:

border: 1px solid #333;

kullanılır. Tek köşeye kenarlık vermek içinse:

border-[top-right-bottom-left]: 1px solid #333;

kullanılır. köşeye kenarlık vermek için her birini ayrı ayrı tanımlamamız gerekir.

border-top: 1px solid #333;
border-right: 1px solid #333;
border-left: 1px solid #333;

Bunun yerine olmayan kenarı(örn: alt kenar) görünmez yaparak hallede biliriz.

border: 1px solid #333;
border-bottom: 1px solid #fff;

18 Yorum (Yorum Ekle)

fatih.hayrioglu diyor ki:

Nisan 28, 2007, 19:58

örnek olması açısından beyaz yapmıştım bu kenarı eğer zemin rengi olarak yaparsak sorun olmaz.

Cevapla

NeRu diyor ki:

Nisan 28, 2007, 18:08

bu şekilde yaptığımızda en alttaki kenarlık beyaz renkli gözükecek o yüzden arkaplanı beyazdan farklı olan tasarımlarda istediğimiz sonucu elde edemeyiz. bunun yerine kenarlıkları şu şekilde tanımlayabiliriz.

border : 1px solid #333;
border-bottom : none;

bu şekilde alttaki kenarlık beyaz gözükmek yerine hiç gözükmeyecek. tabiki de bunu sadece alttaki kenarlık için değil istediğimiz herhangibir kenarlık için de kullanabiliriz.

Cevapla

Emexci diyor ki:

Nisan 28, 2007, 16:23

güzel bir anlatim. ögrenim asamasindaki kisiler icin yararli. gerci yavas yavas daha iyi nasil yapilir, kodlayinca görebiliyorsun. ek olarak renk kodlarinin 3 veya 6 haneli olmasi tarayicilar acisindan pek önemli degil, sayet bugün, ie5 kullanarak internete giren kimse yoktur diye tahmin ediyorum. varsa bile, onlar kendileri icin alternatif bulmali. (:

Cevapla

fatih.hayrioglu diyor ki:

Nisan 25, 2007, 09:50

evet boder olmuş. Düzelttim. Bu kodlamada maksat 3 kenara border tanımı yapmanın en kestirme yolunu bulmak. Küçük bir bilgi ama belki işinize yarar diye ekledim.

Cevapla

kadir diyor ki:

Nisan 25, 2007, 08:25

1. boder: 1px solid #333;
2. boder: 1px solid #fff;

yazarken

border: 1px solid #333;
border-bottom: 1px solid #fff;

denmek istenmiş galiba çünkü benim anladığım her ikiside aynı yazım ve son hali border lar #FFF; olacaktır?

Cevapla

superselo diyor ki:

Nisan 25, 2007, 06:42

Şu ana kadar hiç lazımd olmadı ama gayet mantıklı bi yöntem:)

Teşekkürler, devam.. ;)

Cevapla

Yunus diyor ki:

Nisan 24, 2007, 21:12

kısaltılmış renk kodlarını her browser görür kenddine işkence etme

Cevapla

Emre AKIN diyor ki:

Nisan 24, 2007, 19:37

Bi yerde okuduğum bi makalede renk kodlarını kullanırken “#333;” gibi 3 haneli değilde “#333333″ gibi 6 haneli olmasının browserlar tarafından bir standart olduğu yazılı idi. Her browser ın anlayabileceği şekilde yazmak daha mantıklı olur diye düşünüyorum. Yanılıyor muyum? ;)

Cevapla

Yunus diyor ki:

Nisan 24, 2007, 19:04

nasıl yapıyoruz onu anlıyamadım

Cevapla