Bu yazımızda Css’te outline özelliğini öğreneceğiz. Outline, border özelliğine benzer ve etiketin en dışındaki (border’ın dışında oluşan) çizgidir.
Border özelliğinden farkı outline olarak verilen değerler etiketin genişlik ve yükseklik değerini değiştirmez.
Örneğin bir <p> etiketi üzerinde anlatacak olursak, resimde gördüğünüz gibi verdiğimiz outline değeri border’ın da dışında oluşan çizgidir.
Outline tanımlarken bizden 4 değer istenir. Bunlar;
1 outline-width : Bu özellik ile etiketin outline kalınlığını px, pt, cm, em, vb.. ile belirleyebiliriz.
2 outline-color : Bu özellik ile etiketin outline rengini belirleyebiliriz.
3 outline-offset : Bu özellik ile etiketin border’ı ile outline’ı arasına px, pt, cm, em, vb.. ile şeffaf boşluk verebiliriz.
Örneğin bir <p> etiketi tanımlayalım.border ve outline özellikleri tanımlayıp bu ikisi arasına 15px lik şeffaf bir boşluk verelim.
4 outline-style : Bu özellik ile etiketin outline stilini belirleyebiliriz. Outline stilini belirlerken aşağıdaki değerleri kullanabiliriz.
► dotted
► dashed
► solid
► double
► groove
► ridge
► inset
► outset
Örneğin <p> etiketleri tanımlayalım ve hepsine farklı farklı outline-style değerleri verelim.
Tüm etiketlerin outline-width değeri 5px, outline-color değeri red olsun.
outline-style değerlerini ise farklı vererek tüm style değerlerini inceleyelim.
Outline özelliği ile 3 özelliği birlikte kullanarak kodunuzu kısaltabilirsiniz.
|
1 2 3 |
outline: outline-width outline-style outline-color; |
şeklinde yazabiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// uzun hali outline-width:5px; outline-style:solid; outline-color:red; // kısa hali outline: 5px solid red; |
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
