Resim Kullanmadan 1 piksellik Yuvarlak Kenarlı Kutu Oluşturmak

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

1
2
3
<div class="kutu1">
    <p>{ CSS, XHTML ve Javascript }</p>
</div>

CSS kodu

01
02
03
04
05
06
07
08
09
10
.kutu1{
    background:#3274D0;
    margin:0 1px;
    padding:1px 0;
}
    .kutu1 p{
        background:#3274D0;
        margin:0 -1px;
        padding:2px;
    }

Margin ve border yardımı ile oluşturmak

HTML Kodumuz yine aynı

1
2
3
<div class="kutu1">
    <p>{ CSS, XHTML ve Javascript }</p>
</div>

CSS kodumuz

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
.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;
    }

Butonlarda kullanımı

Bu yöntemleri butonlarımızda da kullanabiliriz.

HTML Kodumuz

1
2
3
4
5
<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

1
2
3
4
5
6
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

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.

Reklamlar

Bir Yanıt Bırakın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s