‘yuvarlak kenar’ 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
Yuvarlak kenarlı kutular(border-radius) oluşturmak
Temmuz 20th, 2010 • 14 yorum CSS, XHTML
Etiketler: border-radius, css3, ie6, ie7, ie8, yuvarlak kenar, yuvarlak kenarlı kutular
Web tasarımcılarını tercih ettiği tekniklerden biridir yuvarlak köşeli alanlar oluşturmak. IE hariç css ile bu yapıyı kurmak çok basittir. Burada beraber yuvarlak kenarlı yapıları oluşturmayı göreceğiz. Ayrıca IE için javascript çözümlerini ele alacağız.
border-radius özelliği CSS3 ile birlikte geldi ve HTML elemanlarına yuvarlak kenar özelliği verme işine yarıyor. Web 2.0 ve yeni stiller ile birlikte bir çok sitede yerini alan yuvarlak kenarlı yapılar kullanılıyor, buda bu özelliği önemli kılıyor.
Köşeli yapılardan kaçan bir çok tasarımcı artık yuvarlak köşeli tasarımları tercih ediyor. Bu arada şunuda söylemeden geçemeyeceğim bazı sitelerde hiç hoş durmuyor yuvarlak kenar, her şeyi yerinde ve göz zevkine uygun kullanmak en iyisi. Okumaya devam edin »
14 Mayıs 2008 web’den seçme haberler
Mayıs 14th, 2008 • 4 yorum Haberler
Etiketler: Ajax, CSS performansı, css3, firebug, jquery, RSS ikonları, Seçiciler, yuvarlak kenar
- 1 piksel kırılma ile yuvarlak kenarlı köşeler yapmak. Bağlantı
- Güzel bir Firebug makalesi. Bağlantı
- Butonların web tarayıcılarına göre kenar içi boşluğu(padding) farklılıkları. Bağlantı
- CSS performansı hakkında güzel bir makale. Bağlantı
- Asp.net’de jquery yardımı ile takvimden tarih seçme uygulaması. Bağlantı
- jQuery’de uzmanlaşmak isteyenler için güzel bir makale. bağlantı
- Ücretsiz güzel RSS ikonları. Bağlantı
- Güzel ajax uygulamaları. Bakmakta yarar var. Bağlantı
- CSS3 hakkında güzel bir yazı dizisi Bağlantı
- CSS nitelikli seçicileri hakkında güzel bir makale. Bağlantı
31 Mart 2008 web’den seçme haberler
Mart 31st, 2008 • 2 yorum Haberler
Etiketler: Acid 3 test, ie8, jquery, Web Standartları, web3.0, wordpress 2.5, yuvarlak kenar
- Sitemi barındırdığım hosting firması sunucularını taşımış. Bunun bize etkisi mySQL ipsi değiştiği için sitem 1-2 gün kadar görünmedi. Neyse sorunu çözdük ve devam ediyoruz.
- John Resig’den javascript ve jquery hakkında konferans video ve sunumları. Bağlantı
- Güçlü WordPress eklentileri listesi. Bağlantı
- WordPress 2.5 sonun yayınlandı. Geçsek mi geçmesek mi neyse biraz daha beklemekte yarar var gibi. Bağlantı
- Windows XP kullananlar için IE8 beta 1′de ie5.5, ie6.0 ve ie7 test imkanı sağlayan bir araç. Bağlantı
- 8 güzel jquery uygulamalı ders. Bağlantı
- CSS 1,2,3 özellik listesi. Bağlantı
- jQuery ağaç menü örneği. Bağlantı
- “Web 3.0 – Semantik Web” Bağlantı
- jquery ile farklı bir büyük resim gösterme tekniği. Bağlantı
- “Tek bir resim dosyası ile yuvarlak köşeli kutular yapmak” Bağlantı
- Web standartları açısından Acid testleri bayağı bir önem kazandı. Opera yeni çıkaracağı web tarayıcısının Acid3 testinden 100/100 aldığını duyurdu. Ne diyelim darısı diğerlerinin başına. Bağlantı
- “Blogtan Para Kazanmak” Bağlantı
- “Kategorinin Yazıları Eklentisi 2.0″ Bağlantı
04 Ekim 2007 Web’den Seçme Haberler
Ekim 4th, 2007 • Haberler
Etiketler: css3.0, Dreamweaver, font, form, google, Haberler, microsoft, msn-live, spry, yahoo, yuvarlak kenar
- Adobe Dreamweaver CS3′de de bulunan javascript kütüphanesini(Spry) yenilemiş. Bağlantı
- csharpnedir.com’dan "WPF – Yeni Nesil Form Kontrolleri – 2" isimli bir makale yayınlamış. Bağlantı
- Yuvarlak kenarlı kutu yapmak hakkında geniş bilgi. Bağlantı
- CSS3.0 ile birlikte kullanıcıya istediğimiz yazı tipini kullandırabilecekmişiz. Mozilla şimdilik desteklemiyor ancak 2008 içinde desteklemesi bekleniyormuş. Burada bir iki sorun daha var ama bu font işine kesin bir çözüm bulmak gerekiyor. sFIR bir çözüm ama daha basit bir çözüm gerekiyor. Bağlantı
- Yahoo arama motorunu geliştirmiş. Arama yardımcısı eklemiş. Bağlantı
- En iyi üç arama motorunu karşılaştırmışlar. Yahoo, Google ve MSN Live Bağlantı
- SmashMagazine Web tarayıcıları hakkında güzel bir makale hazırlamış. Bağlantı
- Microsoft .net Framework’ün kaynak kodlarını yayınlamış. Bağlantı
09 Aralık Web’den Seçme Haberler
Aralık 9th, 2006 • Haberler
Etiketler: arama motoru, CSS, dikey-ortalama, Faux Column, firebug, Firefox, Javascript, tipografi, web2.0, yuvarlak kenar
Bir web’den seçme haberler bölümünde daha beraberiz :D TV programı gibi oldu. Neyse biz haberlere bir göz atalım. Okumaya devam edin »
