‘Border’ etiketi için sonuçlar
ie6′da border-color:transparent desteği sağlamak
Haziran 29th, 2011 • 3 yorum CSS
Etiketler: Border, kenar-çizgisi, saydam border, transparent
Geçen araştırırken gördüm. border-color:transparent özelliğini İnternet Explorer 7. sürümünden sonra desteklemeye başlamış, yani ie6’da desteklemiyor. Internet Explorer 6’nın son günlerini yaşadığımız bu günlerde küçük bir bilgilendirme olarak geçeceğim bu sorunun çözümünü.
ul li a{
border-right:1px solid #f00
}
ul li a:hover{
border-right:1px solid transparent;
}
Ardalanında renk geçişi olan bir menüde menü elemanları arasında kenar çizgisi olduğunu farz edelim. Menünün seçili veya üzerine geldiğinde ise bu kenar çizgini kaldıralım. Kenar çizgisini sıfırlamak kaymaya neden olur. Saydam kenar çizgisi vermek kolay ve güzel çözümlerden biridir. Peki ie6 için ne yapacağız.
*html ul li a:hover{
border-color: pink;
filter: chroma(color=pink);
}
* html sadece ie6’nın göreceği bir seçici, ilk olarka bir kenar çizgisi tanımlıyoruz(pink – pembe) sonrada chroma filtresi ile pembe alanları saydam yapıyoruz. Ufak bir düzenleme ile işimizi hallediyoruz.
Ufak bir bilgi ama bir kenarda yazılı olmasında yara var.
Kalın sağlıcakla
Kaynaklar
- http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/
- http://snippets.dzone.com/posts/show/6089
- http://www.cssplay.co.uk/boxes/transparent_borders.html
- http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php
- http://www.cssplay.co.uk/menu/fivestar
Resim Kullanmadan 1 piksellik Yuvarlak Kenarlı Kutu Oluşturmak
Ekim 20th, 2010 • 7 yorum CSS, Web Standartları, XHTML
Etiketler: 1px, Border, eksi-margin, Margin, yuvarlak kenar, yuvarlak kenarlı kutular
Birçok yuvarlak kenarlı kutu oluşturma tekniği mevcut. Daha önce yuvarlak kenarlı kutuların nasıl yapıldığını anlattım “Yuvarlak Kenarlı Kutular”, ayrıca CSS3 ile gelen border-radius özelliğinden bahsettiğimiz “Yuvarlak kenarlı kutular(border-radius) oluşturmak” makalemizde bahsettik. Şimdide daha farklı belki çok fazla kullanılmayan bir yuvarlak kenar çeşidini nasıl yapacağımızı anlatacağım. Aslında bu birazda göz yanılmasından yararlanarak oluşturulmuş bir yuvarlak kenardır, aslında sağdaki resimde gösterildiği gibi köşe yuvarlak değildir, ancak göze yuvarlakmış hissi vermektedir.
Bu işi aslında resim ile de yapabiliriz, belki daha kolayımıza bile gelir, ancak uygulamadan birçok yerde ve farklı renklerde 1 piksellik yuvarlak kenara ihtiyaç duyunca bu yöntemi tercih ettim.
Yöntemi şöyle anlatabilirim; bu çözümü üretmek için iki adet içiçe blok-level elemente ihtiyacımız var, dıştaki elemanı üstten ve alttan bir piksel fazlalık eklerken, içteki elemanı sağ ve soldan eksi margin değeri vererek sağ ve solda taşırarak 1 piksellik bir yuvarlak kenar elde ederiz. Bu işlemi iki şekilde yapabiliriz.
Padding ve margin yardımı ile oluşturmak
HTML kodu
<div class="kutu1">
<p>{ CSS, XHTML ve Javascript }</p>
</div>
CSS kodu
.kutu1{
background:#3274D0;
margin:0 1px;
padding:1px 0;
}
.kutu1 p{
background:#3274D0;
margin:0 -1px;
padding:2px;
}
Örneği görmek için tıklayınız.
Margin ve border yardımı ile oluşturmak
HTML Kodumuz yine aynı
<div class="kutu1">
<p>{ CSS, XHTML ve Javascript }</p>
</div>
CSS kodumuz
.kutu1{
background:#848484;
border:1px solid #848484;
border-left-width:0;
border-right-width:0;
margin:0 1px;
}
.kutu1 p{
background:#d3d3d3;
border:1px solid #848484;
border-top-width:0;
border-bottom-width:0;
margin:0 -1px;
padding:2px;
}
Örneği görmek için tıklayınız.
Butonlarda kullanımı
Bu yöntemleri butonlarımızda da kullanabiliriz.
HTML Kodumuz
<ul>
<li><a href=""><span>Bursaspor</span></a></li>
<li><a href=""><span>Trabzonspor</span></a></li>
<li><a href=""><span>Kayserispor</span></a></li>
</ul>
CSS kodumuz
ul{margin:0; padding:0; width:250px}
ul li{ list-style: none; margin-bottom:5px}
ul li a{display:block; background:#3274D0; margin:0 1px; padding:1px 0; position: relative; text-decoration:none;}
ul li a span{background:#3274D0; margin:0 -1px; padding:2px; display: block; color:#fff}
ul li a:hover{background:#fff;}
ul li a:hover span{background:#fff; color:#3274D0}
Örneği görmek için tıklayınız.
Sonuç olarak yukarıda görüldüğü gibi kolay bir kodlama ile 1 piksellik bir yuvarlak kenar elde ettik. Çok fazla çeşitte 1 piksellik yuvarlak kenara ihtiyaç duyduğunuzda imdadınıza yetişir. Bu kodun güzelliği internet explorer sürümlerinde(6,7,8,9) herhangi bir ek koda gereksinim duymadan çalışmasıdır. Bu yöntem aklınızın bir köşesinde kalsın bakarsınız bir gün lazım olur.
Hadi kalın sağlıcakla.
Kaynaklar
Dış hat çizgisi(outline) özellikleri
Haziran 22nd, 2009 • 13 yorum CSS
Etiketler: bağlantılar, Border, dış-hat-çizgisi, Erişebilirlik, kenar-çizgisi, klavye-kullanmak, outline
CSS2 ile birlikte gelen kutu dışı şekillendirme(outline) özellikleri kenar çizgisine(border) benzer bir özelliktir. Fakat kenar çizgisi özelliğinden iki önemli farkı vardır. İlki outline özelliği kenar çizgisi gibi normal akışı etkilemez. Bir elemana 10px outline değeri atandığında elemanın etrafındaki elemanların üzerine 10px kadar taşar, diğer elemanları ötelemez. İkinci farklılık outline kenar çizgisi gibi dikdörtgen şeklinde değildir.
Outline özelliği kullanıcının o an nereye odaklandığını belirlemek için kullanılır. Tarayıcı arayüzünde kullanıcının nereye odaklandığını bilmek bize birçok avantajlar sağlayacaktır. Erişebilirlik açısından önemli bir özelliktir.
Klavyeden web sitelerini gezen kullanıcılar için önemli bir özelliktir. Bu durumu şöyle anlatırsak daha iyi anlaşılacaktır. Bir site düşünün metin içeriğindeki bağlantıların rengi ve tipi metinler ile aynı olduğunu bağlantıları metinden ayıran hiç bir belirtinin olmadığı durumu, bu durum kullanıcıyı ne kadar zorlayacağını düşünün. Bu gibi durumları engellemek için biz sayfa içindeki bağlantılara, düğmelere ve gezinti elemanlarına normal içerikten ayrı stiller tanımlarız. Benzer şeyleri sadece klavyeden interneti gezmeye çalışan insanlar içinde outline tanımları sağlar.
Şu aklımıza gelebilir; kim sadece klavye kullanarak internette gezer ki. Ama erişebilirlik demek zaten bir sayfaya en fazla kişinin erişmesini sağlamak değil mi?
Şimdi dış hat çizgileri(outline) özelliklerine bir göz atalım.
Dış hat çizgisi biçemi (outline-style)
Dış hat çizgisinin biçemini belirlemek için kullanırız.
Yapısı: outline-style: <deger>
Aldığı değerler: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Başlangıç değeri: none
Uygulanabilen elemanlar: Tüm elemanlara
Kalıtsallık: Yok
Dış hat biçemi none değeri haricindeki değerler için görüntülenir.
- none: Dış hat görünmesin anlamındadır.
- dotted: Dış hat belirli aralıklarla dizilmiş noktalardan oluşur.
- dashed: Dış hat belirli aralıklarla dizilmiş çizgi parçalarından(tire) oluşur.
- solid: Dış hat bir çizgi olarak görünür
- double: iki çizgi seklinde görünür. İki çizginin kalınlıkları ile aralarındaki boşluğun genişliğinin toplamı outline-width değerine eşittir.
- groove: Dış hat tuvale oyulmuş gibi görünür.
- ridge: groove’un zıddı; Dış hat çizgisi kabartma gibi görünür.
- inset: Dış hat çizgisinin kutunun tamamını tuvale gömülü gibi görünmesine sebep olur.
- outset: inset’in zıddı; Dış hat çizgisi kutunun tamamının kabartma gibi görünmesine sebep olur.
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+
Dış hat çizgisi genişliği (outline-width)
Atandığı elemanın dışına çizilen hattın kalınlığını belirlemek için kullanırız.
Yapısı: outline-width: <deger>
Aldığı değerler: thin | medium | thick | length | inherit
Başlangıç değeri: Medium
Uygulanabilen elemanlar: Tüm elemanlara
Kalıtsallık: Yok
Dış hat çizgisi genişliği border-width gibi CSS uzunluk değerlerini (px, pt, em) ve anahtar kelimeler(thin <= medium <= thick) alır, ancak yüzde değer ve eksi değer almaz.
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+
Dış hat çizgisi rengi (outline-color)
Atandığı elemanın dışına çizilen hattın rengini belirlemek için kullanırız.
Yapısı: outline-color: <deger>
Aldığı Değerler: color | invert | inherit
Başlangıç değeri: invert
Uygulanabilen elemanlar: tüm elemanlara
Kalıtsallık: Yok
CSS’in desteklediği renk değerlerini kullanabiliriz, hatta invert değerinide kullanabiliriz. invert, rengi tersine çevirir.
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+
Dış hat çizgisi (outline)
Dış hat çizgisi(outline) özelliği yukarıda gördüğümüz özelliklerin tek seferde kullanılmasını sağlayan bir kısa yoldur.
Yapısı: outline: <deger>
Aldığı Değerler: [ <outline-color> || <outline-style> || <outlinewidth>] | inherit
Başlangıç değeri: Tanımlı değildir
Uygulanabilen elemanlar: Tüm elemanlara
Kalıtsallık: Yok
Kenar çizgisi(border) özelliğine benzer bir yapısı vardır. Ancak ayrıldıkları kısım kenar çizgisinde(border) her kenar için bir atama(border-right, border-bottom, vd.) yapılmasına karşın dış hat çizgisinde(outline) böyle bir özellik yoktur. Dış hat çizgisinin(outline) tüm kenarları aynı özellikleri taşır.
Dış hat çizgileri(outline) normal akıştaki boşlukları tamamlamaz. (taşma yapmaz.) diğer elemanların üzerini örter. Dış hat çizgisinin(outline) önemli özelliklerinden biri etrafını çevreleyen elemanlar üzerinde(üzerine örtmek dışında) bir etki yapmamasıdır, bu sayfa planlamadaki problemlerimizi çözmemiz için önemlidir. Problem olan bir elemana dış hat çizgisi(outline) ataması yaptığımızda tam olarak sorunun ne olduğunu göreceğiz ve elamanın tam yerini öğreneceğiz. Bu kenar çizgisi(border) uygulamaktan farklıdır, dış hat çizgisi(outline) uygulandığında dokümandaki normal akış üzerine bir etki yapmayacaktır.
Dış hat çizgileri(outline) satıriçi elemanların etrafına yerleşir. İki satıra kaymış satıriçi elemanlarda dış hat çizgisi dikdörtgen şeklinde olmayacaktır. Bu da kenar çizgisi(border) ile arasındaki farklardan biridir.
Dış hat çizgileri elemana odaklanıldığında görsel bir çıkıntı gibi görünmesini sağlayabilir.
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+
“CSS’e başlamak” kitabı hazır
Şubat 26th, 2008 • 7 yorum Haberler
Etiketler: background, Başlangıç, Border, content, CSS, css'in teorisi, font, inherit, kitap, list, Margin, outline, Padding, table, text
Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslınada buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı; makalelerimin derlenip düzenli hale getirildiği bir e-doküman.
Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkanlar nispetinde 2. kitapta çıkacaktır.
Kitabı ve kaynak dosyalarını indirmek için tıklayınız.
CSS Kutu Modeli – Kenarlık(border) Özellikleri
Temmuz 31st, 2006 • 25 yorum CSS
Etiketler: Border, border-bottom, border-left, border-right, border-top, CSS, kenarlık
Kenarlık(border), içerik alanı ve padding etrafındaki bir veya daha fazla
çizgiye denir. Okumaya devam edin »
CSS ile Kutu modeli, sorunları ve çözümleri
Nisan 26th, 2006 • 60 yorum CSS, Web Standartları, XHTML
Etiketler: Border, Box-Model, CSS, düzeltme, fix, kenar-çizgisi, kenar-dış-boşluğu, kenar-iç-boşluğu, Kutu-Modeli, Margin, Padding, Web Standartları, XHTML
CSS’e geçişte en çok düşündüren konu niye CSS geçelim ve CSS’in avantajları nelerdir? CSS’in avantajı bize web sayfasındaki elemanlara daha fazla müdahele etme imkanı vermesidir. Burada bunun en güzel örneklerinden birini göreceğiz.
CSS tüm HTML elementlerini bir dikdörtgen kutu içine konmuş varsayarak ona göre pozisyonları ve boyutlarını konrol eder. Bu elementler her zaman bir padding, margin, border ve içerik alanını içerir. Okumaya devam edin »
