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.

Ö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.

• thin(ince
• medium(orta)
• thick(kalın)

Ö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:

<div class=kutu><img src="resim.jpg" alt=""/></div>

ÇIKTI:

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:

<div class=kutu><img src="resim.jpg" alt=""/></div>

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;
      {