wWw.bLacK-WeB.Tr.Gg | GeneL, WebmasTer, EğLence Platformu

CSS ile Resimsiz Yuvarlak Köşeler

CSS ile Yuvarlak Köşe Yapımı, Rounded Corners

Yuvarlak köşeli kutucuklar, normal dikdörtgen şeklindeki kutucuklardan daha estetik görünür. Daha estetiği varken neden takoz olanını kullanasınız ki değil mi? :roll: İşte bu kodlarla herhangi bir resim kullanmadan kendi yuvarlak köşeli kutucuklarımızı yapacağız.

İlk olarak aşağıdaki CSS kodlarımız bulunuyor. Bu kodları kendi stil dosyamıza ekliyoruz.

CSS:
  1. .yuvarlak{display:block}
  2. .yuvarlak *{
  3. display:block;
  4. height:1px;
  5. overflow:hidden;
  6. font-size:.01em;
  7. background:#FF0000}
  8. .yuvarlak1{
  9. margin-left:3px;
  10. margin-right:3px;
  11. padding-left:1px;
  12. padding-right:1px;
  13. border-left:1px solid #ff9191;
  14. border-right:1px solid #ff9191;
  15. background:#ff3f3f}
  16. .yuvarlak2{
  17. margin-left:1px;
  18. margin-right:1px;
  19. padding-right:1px;
  20. padding-left:1px;
  21. border-left:1px solid #ffe5e5;
  22. border-right:1px solid #ffe5e5;
  23. background:#ff3030}
  24. .yuvarlak3{
  25. margin-left:1px;
  26. margin-right:1px;
  27. border-left:1px solid #ff3030;
  28. border-right:1px solid #ff3030;}
  29. .yuvarlak4{
  30. border-left:1px solid #ff9191;
  31. border-right:1px solid #ff9191}
  32. .yuvarlak5{
  33. border-left:1px solid #ff3f3f;
  34. border-right:1px solid #ff3f3f}
  35. .yuvarlakfg{
  36. background:#FF0000;
  37. color:#FFFFFF;
  38. padding:0 6px;}

 

Daha sonra yuvarlak köşe yapmak için gerekli kod olan html kodunu da sayfamızdaki tagları arasına ekliyoruz.

HTML:
  1. <div><strong class="yuvarlak">
  2. <strong class="yuvarlak1"><strong></strong></strong>
  3. <strong class="yuvarlak2"><strong></strong></strong>
  4. <strong class="yuvarlak3"></strong>
  5. <strong class="yuvarlak4"></strong>
  6. <strong class="yuvarlak5"></strong></strong>
  7. <div class="yuvarlakfg">CSSim Benim yuvarlak köşe denemesi, css örneği. CSSim Benim yuvarlak köşe denemesi, css örneği. CSSim Benim yuvarlak köşe denemesi, css örneği. CSSim Benim yuvarlak köşe denemesi, css örneği. CSSim</div>
  8. <strong class="yuvarlak">
  9. <strong class="yuvarlak5"></strong>
  10. <strong class="yuvarlak4"></strong>
  11. <strong class="yuvarlak3"></strong>
  12. <strong class="yuvarlak2"><strong></strong></strong>
  13. <strong class="yuvarlak1"><strong></strong></strong></strong>
  14.  
  15. </div>

 

Sonucu buradan canlı olarak görebilirsiniz: Yuvarlak Köşeli Kutucuklar

 
9 ziyaretçi (165 klik)
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol