‘eksi-margin’ etiketi için sonuçlar
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
Eksi Margin Kullanımı
Kasım 10th, 2009 • 8 yorum CSS, XHTML
Etiketler: eksi-margin, Elastik Web Sayfaları, float, Margin, Sabit-Konumlandırma
Margin özelliği eksi değer alabilir. Eksi değerler bize tasarımsal olarak farklı uygulamalar geliştirmemize yardımcı olur. Tabi bir çok özellikte olduğu gibi burada da farklı tarayıcılarda bazı sorunlarla karşılacağız.
Eksi margin’li değerler bize görsel olarak avantaj sağlar, kodlamamıza yardımcı olur örneğin esnek yapılı sayfaları düzenlememizde ve bir elemanın çizgileri dışına taşırma işlemlerinde.
Eksi margin kullanımı bir hile değildir, CSS’in desteklediği normal bir değerdir.
Eksi margin bir çok yerde kullanıyoruz. Ancak biraz bilinçsiz kullanıyoruz. Ben burada çizgileri belirleyip ona göre hareket etmeyi düşündüm ve bu yazı ortaya çıktı. Eksi marginleri yakından tanıyalım.
Eksi Margin’i iki yerde uygularız.
- Sabit konumlandırılmış elemanlarda
- Float uygulanmış elemanlarda
