• Anasayfa
  • Kayıt Ol
  • Giriş yap

CSS ile Yuvarlak Kenarli Kutular Yapma

Yeni Başlık Gönder   Cevap Gönder

paylasım.forumy :: WepMaster :: CSS Bolumu

Önceki başlık Sonraki başlık Aşağa gitmek

CSS ile Yuvarlak Kenarli Kutular Yapma

Mesaj tarafından admin Bir Çarş. Ekim 15, 2008 1:06 pm

www.css-tasarimm.tr.gg Anlatımıdır.



CSS ile XHTML kodlaması yaparken daha çok köşeli kutular kullanılır. Ancak CSS ile yuvarlak kenarlı kutularda yapabiliriz. CSS ile yuvarlak kenarlı kutu yapmanın bir çok tekniği vardır. Her tekniğin yerine ve durumuna göre avantajları olabilir. Biz burda en kolay ve en kullanışlılarını öğrenmeye çalışacağız.
Sabit Genişlikte Yuvarlak Kenarlı Kutu Oluşturmak


Sabit Genişlikte Yuvarlak Kenarlı Kutular en basit oluşturulabilen kutulardır. İçeriğin uzaması veya kısalması durumunda genişlik sabit kalır yükseklik değişkendir. İki adet resim kutuyu oluşturmamız için yeterlidir. Birini üst kısma diğerini alt kısıma yerleştirerek yuvarlak kutumuzu oluşturabiliriz.
200px genişliğinde bir yuvarlak kenarlı kutu olşuturmak için ilk önce alta ve üste koyacağımız kutuları hazırlayalım.
ust_yuvarlak.gif
alt_yuvarlak.gif
XHTML kodumuzu yazarsak:


  2. Başlık

  3. İçerik




alt_yuvarlak.gif resmini .yuvarlakKutu kapsayıcı katmanının alt kısımına dayalı olarak zemin resmi olarak atıyoruz. Ayrıca .yuvarlakKutu zemin resminin bitiminden itibaren zemin dolgu rengini(#84E0FF) atıyoruz.

  1. .yuvarlakKutu {
  2. width: 200px;
  3. background: #84E0FF url(http://img.webme.com/pic/c/css-tasarimm/alt_yuvarlak.gif) no-repeat left bottom;
  4. }
  5. .yuvarlakKutu h2 {
  6. background: url(http://img.webme.com/pic/c/css-tasarimm/ust_yuvarlak.gif) no-repeat left top;
  7. }

Başlık ve içeriğinin kutunun kenarlarına yapışmaması için padding değerlerini ayarlamalıyız:

  1. .yuvarlakKutu h2 {
  2. padding: 10px 20px 0 20px;
  3. }
  4. .yuvarlakKutu p {
  5. padding: 0 20px 10px 20px;
  6. }

Örnek kodları indirmek için tıklayınız.
Eğer başlıksız bir yapı istiyorsanız, h2 kaldırıp h2‘ye atadığımız zemin resmini paragraf(p)’a atamamız yeterlidir.
Eğer zemin dolgu alanı düz renk değilde degrade renkler içeriyorsa, bu iş için iki metod vardır birincisi yukarıdaki metod ile de yapabilrsiniz ama kutu yüksekliği kabul edilebilir bir yükseklik ise. Yukarıdaki metod ile bunu yapmak için bu kutunu maksimum 300px genişliğe çıkabileceğini farz edelim. İki adet resim hazırlarız.
ust2_yuvarlak.gif
alt2_yuvarlak.gif
Diğer bir yöntem ise kutuyu üç kısıma bölerek yapmaktır ki bu daha esnek bir yöntemdir.

  1. .yuvarlakKutu {
  2. width: 424px;
  3. background: url(http://img.webme.com/pic/c/css-tasarimm/orta_yuvarlak.gif) repeat-y;
  4. }
  5. .yuvarlakKutu h2 {
  6. background: url(http://img.webme.com/pic/c/css-tasarimm/ust3_yuvarlak.gif) no-repeat left top;
  7. padding-top: 20px;
  8. }
  9. .yuvarlakKutu .altYuvarlak {
  10. background: url(http://img.webme.com/pic/c/css-tasarimm/alt3_yuvarlak.gif) no-repeat left bottom;
  11. padding-bottom: 20px;
  12. }
  13. .yuvarlakKutu h2, .yuvarlakKutu p {
  14. padding-left: 20px;
  15. padding-right: 20px;
  16. }



  2. Başlık

  3. İçerk




Örnek kodları indirmek için tıklayınız.
Esnek Boyutlu Yuvarlak Kenarlı Kutular


Yukarıdaki örnekde sadece dikeydeki genişlemelere olanak sağlıyor bazen hem yatayda hemde dikeyde genişleye bilen esnek yuvarlık köşeli kutulara ihytiyacımız olur. Bunun için yukarda uyguladığımız yöntemden biraz farlı bir yöntem deneyeceğiz, iki resim değil de dört resime ihtiyacımız olacak. Bu dört resim için artı katmanlara ihtiyacımız olacaktır, bu katmanlar kodumuzu biraz temiz kod üretimi dışına çıkarsada işimizi görecektir:


  3. Başlık


  4. İçerik





    • Dört resimin iki tanesi üst köşeleri yuvarlamak için, iki tanesi alt köşeleri yuvarlamak için kullanacağız.



    1. .yuvarlakKutu {
    2. width: 20em;
    3. background: #effce7 url(http://img.webme.com/pic/c/css-tasarimm/alt_sol.gif)
    4. no-repeat left bottom;
    5. }
    6. .yuvarlakKutuDisi {
    7. background: url(http://img.webme.com/pic/c/css-tasarimm/alt_sag.gif) no-repeat right bottom;
    8. padding-bottom: 5%;
    9. }
    10. .yuvarlakKutuIci {
    11. background: url(http://img.webme.com/pic/c/css-tasarimm/ust_sol.gif) no-repeat left top;
    12. }
    13. .yuvarlakKutu h2 {
    14. background: url(http://img.webme.com/pic/c/css-tasarimm/ust_sag.gif) no-repeat right top;
    15. padding-top: 5%;
    16. }
    17. .yuvarlakKutu h2, .yuvarlakKutu p {
    18. padding-left: 5%;
    19. padding-right: 5%;
    20. }

    Yukarıdaki örnekte esneklik sağlamak için değerler (% ve em) gibi görece değerler verilerek font boyutunun arttırılması durumlarında esnek bir kutu oluşturulmuş olur.

    admin
    Adminstreteur
    Adminstreteur

    Mesaj Sayısı: 843
    Yaş: 16
    Nerden: batman
    ruh hali:
    Takım:
    Kayıt tarihi: 12/10/08

    http://paylasim.forumy.biz

    Sayfa başına dön Aşağa gitmek

    Önceki başlık Sonraki başlık Sayfa başına dön

    Yeni Başlık Gönder   Cevap Gönder

    paylasım.forumy :: WepMaster :: CSS Bolumu

    Bu forumun müsaadesi var:
    Bu forumdaki mesajlara cevap veremezsiniz