Kayıtlar

outline-offset etiketine sahip yayınlar gösteriliyor

CSS outline-offset Özelliği

CSS outline-offset Css outline-offset özelliği ile ikinci kenarlık ile asıl olan kenarın arasındaki uzaklık mesafesi ayarlanabilir. Örnek: Bu örnekte ikinci kenarlığın, elemanın birincil kenarı ile arasında olan mesafesini outline-offset: 25px; değeriyle uygulanmıştır. div { margin: 30px; width: 180px; padding: 30px; height: 100px; border: 4px dotted orange; outline: 6px solid blue; outline-offset: 25px; } Kendiniz deneyin » CSS outline-offset nedir nasıl kullanılır Bir html elemanınn varsayılan bir border /kenarlığı vardır. İkinci kenarlığıda oluşturduysk aralarındaki mesafeyi kontrol etmek isteriz. Bu gibi durumlarda kullanılan outline-offset özelliğine istenilen değerler girilerek sitil işlemi tamamlanabilir. CSS outline-offset CSS outline-offset özellikleri &nbsp Varsayılan Değer: 0   Kalıtsallık: yok   Animasyon Özelliğ

CSS outline-offset animasyon

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> #kutu-1 { border: 1px solid gray; outline: blue solid 5px; width: 250px; height: 300px; -webkit-animation: animasyonismi 7s infinite; animation: animasyonismi 7s infinite; position:relative; margin:50px; } @-webkit-keyframes animasyonismi { 50% {outline-offset: 30px;} } @keyframes animasyonismi { 50% {outline-offset: 30px;} } </style> </head> <body> <strong>css outline-offset animasyon örnek</strong> <br /> <div id="kutu-1"></div> <p>Bu örnek uygulamada ikinci kenarlık ile birinci kenar arasındaki mesafe 30px olarak uyguanmıştır.

JavaScript CSS outline-offset Örnek

javascript css3 outline-offset özelliği örnek uygulama CSS outline-offset outline özelliği ile tanımlanan ikinci kenar ile elemntin normal kenarı arasındaki mesafe ayarlanabilir. Javascript ile outline-offset özelliğine "20px" değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! function fonk() { document.getElementById("anakutu").style.outlineOffset = "20px"; } Çalıştır JavaScript css outline-offset © htmlvecssegitimi.blogspot.com

CSS3 outline-offset Örnek

htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı 'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE HTML><html lang="en-US"> <head> <meta charset="UTF-8"> <title>css outline-offset özelliği ve örnek uygulama</title> <style> div { margin: 30px; width: 180px; padding: 30px; height: 100px; border: 4px dotted orange; outline: 6px solid blue; outline-offset: 25px; } </style></head> <body> <div> outline-ofset özelliği ile blok düzeyindeki elementlere çift kenarlık tanımlayabiliriz.</div></body> </html>