HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
css outline nedir
css outline style
css outline code
css outline element
css outline examples
css outline kullanımı
css outline style examples
css focus outline style
css outline colors
css outline color text
css outline color input
css font outline color
css border color outline
css outline focus color
css style outline color
css select outline color
css change outline width
css style outline-width
css outline offset top
outline offset in css

CSS Outline(Dış Çizgi)

CSS Outline(Dış Çizgi)

Bu konumuzda biraz daha kafanız karışacak arkadaşlar. Bir önceki dersimizde kutu modelini görmüştük. Bu dersimizde ise bu kutumuzun en dış hattı olan "Outline" parametresini inceleyeceğiz. Bu parametre aynı border(çizgi) parametresi gibi çizgiden oluşmaktadır. Border'ın hemen üstünde yer alır. Neden çizgi üstünde çizgi var diye düşünebilirsiniz. Elbetteki bunun bir farkı var sevgili öğrenci arkadaşlarım. Bunu sözler ile ifade etmek oldukça zor ancak görerek ayırt edebilirsiniz. Hadi bir görelim..

Genel olarak önce bir nasıl göründüğüne bakalım ardından özelliklerini inceleyelim birer birer;

Css
p.paragraf_kutusu {
border: 2px solid black;
outline: #00ff01 solid 9px;
margin: auto;
padding: 20px;
text-align: center;
}
Html
<p class="paragraf_kutusu">2px çizgi, 9px dış çizgi, oto dış boşluk,
20px iç boşluk ortalanmış bir şekilde oluşturulmuş paragraf.
</p>

1-Outline Style(Dış Çizgi Stili)

Dış çizginizin stilini belirler. Çeşitli şekillerde dış çizgiler mevcuttur. Daha önceki derslerimizde göstermiştik fakat bakmamış olabilirsiniz diye yeri gelmişken tekrardan hatırlayalım. Hem bu örnekte güzel bir css yapısı da görmüş olacağız aynı zamanda..

Css
p {outline-color:#3898ff;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
Html
<h2>Çizgi Stilleri</h2>
<p class="dotted">Bu bir dotted dışçizgisidir.</p>
<p class="dashed">Bu bir dashhed dışçizgisidir.</p>
<p class="solid">Bu bir solid dışçizgisidir.</p>
<p class="double">Bu bir double dışçizgisidir.</p>
<p class="groove">Bu bir groove dışçizgisidir.Efektli bir çizgidir.</p>
<p class="ridge">Bu bir ridge dışçizgisidir.Efektli bir çizgidir.</p>
<p class="inset">Bu bir inset dışçizgisidir.Efektli bir çizgidir.</p>
<p class="outset">Bu bir outset dışçizgisidir.Efektli bir çizgidir.</p>

2- Outline Color(Dış Çizgi Rengi)

Dış çizginizin rengini belirler. Dış çizginizin renklerini verirken;

  • Direk ismini verebilirsiniz. Mesela mavi istiyorsanız "blue" yazabilirsiniz.
  • Hex renk kodu karşılığını kullanarak yazabilirsiniz. Bu size daha fazla ve daha ayrıntılı renk seçeneği sunacaktır.Ör: "#ccc"
  • RGB renk kod karşılığını kullanarak da yazabilirsiniz. Bu size daha da ince ayrıntı kullanarak tam tonunu yakalamanızı sağlayacaktır.

Kullanımı:

Css
p{padding:3px;}
p.kir_cizgili {
border: 1px solid black;
outline-style: solid;
outline-color: red;
}
p.yes_cizgili {
border: 1px solid black;
outline-style: double;
outline-color: green;
}
p.sar_ci {
border: 1px solid black;
outline-style: outset;
outline-color: yellow;
}
Html
<h2>Dış Çizgi Renkleri</h2>
<p class="kir_cizgili">Bu bir solid tipli kırmızı dış çizgidir.</p>
<p class="yes_cizgili">Bu bir double tipli yeşil dış çizgisidir.</p>
<p class="sar_ci">Bu bir outset tipli sarı dış çizgisidir.</p>

3-Outline Width(Dış Çizgi Genişliği)

Dış çizginizin genişliğini aslında kalınlığını ayarlamanızı sağlar. Aşağıdaki örnekte tüm değerlerini görebilirsiniz.

Css
p.diskalinlik_birpx/*thin 1px demek*/ {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
p.diskalinlik_ucpx/*medium 3px demek*/ {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}
p.diskalinlik_bespx/*thick 5px demek*/ {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
}
p.diskalinlik_asiri/*kendimiz değer vererek oluşturduk*/ {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
}
Html
<h2>Dış Çizgi Genişlik(Kalınlık) Özellikleri</h2>
<p class="diskalinlik_birpx">Bir thin kalınlığında dış çizgi.</p>
<p class="diskalinlik_ucpx">Bir medium kalınlığında dış çizgi.</p>
<p class="diskalinlik_bespx">Bir thick kalınlığında dış çizgi.</p>
<p class="diskalinlik_asiri">Bir 4px kalınlığında normal çizgi.</p>

4-Outline Offset(Dış Çizgi Boşluğu)

"Outline" ile "Border" arasında yukarıdaki örneklerde gördüğünüz gibi hiç boşluk yok. İsterseniz bunları birbirinden ayırabilirsiniz. Bunu da aşağıda gördüğünüz örnekteki gibi sağlıyoruz. İnceleyelim.

Css
p.uyari {
margin: 30px;
background:yellow;
border: 1px solid black;
outline: 3px solid red;
outline-offset: 10px;
padding:2px
}
Html
<h2>Dış Çizgi Boşluğu</h2>
<p class="uyari">Bu paragraf 10px dış çizgi ile kenarlık arasında boşluk bırakılarak oluşturulmuştur.</p>


Paylaş:

Enes KILIÇ
Webmaster