CSS OUTLİNE(DIŞ HAT ÇİZGİ)

Border 'ın dışına stil vermek için outline özelliğini kullanacağız, yani border'ın dışında ikinci bir border'ımız olacak. Outline özelliği ile stil, renk ve genişlik belirleyebiliriz. (Belirleyeceğimiz bu özelliklerin değerleri border değerleri ile aynıdır.


Yukarıda content içeriğin bulunduğu kısımdır. İçeriğin etrafını saran border(kenarlık) yer alır. Border etrafına verdiğimiz outline ise ikinci kenarlığımızdır.

outline-style: Kenarlık Stili


Normal borderda kullanabildiğimiz stillerin aynısını burda da kullanabiliriz.

border css

ÖRNEK:

.kutu {width:500px;
       height:30px;
       outline-style:dotted;
       outline-color:#00ff00;
}

outline-width: Kenarlık Boyutu


"border-width" özelliği kenar çizgisinin genişliğini(kalınlığını) ayarlamak için kullanılır. Genişliği ayarlamak için piksel(px) olarak verilebilir veya aşağıda değerleri kullanabiliriz.

ÖRNEK:

.kutu {width:500px;
       height:30px;
       outline-style:dotted;
       outline-width:3px;
}

outline-color: Kenarlık Rengi


Kenarlığın rengini belirlememizi sağlar.

ÖRNEK:

.kutu {width:500px;
       height:30px;
       outline-style:dotted;
       outline-color:#00ff00;
}

CSS OUTLİNE TÜM ÖZELLİKLERİ İÇİN KISALTMA


Sadece outline kullanarak'da outline-width, outline-color ve outline-style değerlerini belirtmemiz mümkün.

ÖRNEK:


 .kutu { outline: 3px solid black; }
 

ÖRNEK ÇIKTI:

CSS:

.kutu{
     border:5px solid #737373;
	 outline:5px solid #000;
	 width:251px;
     height:201px;
	 padding:20px;
     }

HTML:

ÇIKTI:

outline css

Photoshop kullananlar bilir menü bar tasarlarken menü başlıkların arasına çizgi çekilir, yanınada daha açık renkte çizgi çekilerek orda bir geçiş efekti, çöküntü oluşturulur; aynısını outline ve border özelliğini bir arada kullanarak yapabiliriz.

CSS:

.kutu{
     border:2px solid #e7e7e7;
	 outline:2px solid #000;
     width:251px;
     height:201px;
	 padding:20px;
     }

HTML:

outline css

Dış Hat Çizgilerini(outline) Kaldırmak


Genelde web sitelerinde görülen dış hat çizgilerinin(outline) oluşturduğu kesikli gri çizgiler rahatsız etmektedir. Bunda en çok son zamanlarda gelişen metin yerine resim koyma metotlarınında etkisi bulunmaktadır. Farklı tarayıcılar farklı şekillerde karşımıza çıkan bu problem için CSS outline ile basit bir şekilde çözüm üretebiliriz.

  a {
     outline:none;
    }

img {
     outline:none;
    }
	

Bu tanımlar sayesinde tüm tarayıcılar için linklerde ve resimlerde oluşan dış hat çizgileri(outline) problemini çözmüş olacağız. Bu tanımla yöntemi ile textboxlar, textarealar vb. form elemenlarında oluşan çizgilerden de kurtulabiliriz.

input{ 
       outline:none;
     {
	 

Aynı işlemi outline özelliğini sıfırlayarak'ta kullanabiliriz.

input{
       outline:0;
     {
	 
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

7306

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.