CSS kullanarak yuvarlak kenarlı kutular oluşturma

Bu dersimizde CSS kullanrak yuvarlak kenarlı kutular oluşturmayı öğreneceğiz

Bu dersimizde CSS kullanrak yuvarlak kenarlı kutular oluşturmayı öğreneceğiz.

Hemen kutu adında bir div oluşturalım ve bu divimiz 4 köşeden yuvarlak olsun html olarak kodumuzu yazıyorum.


<div id="kutu">bu benim 4 köşeden yuvarlak olan kutum</div>



CSS kodum ise ;

<style type="text/css">

    #kutu{

    /* divimizi sayfa içinde ortalıyoruz */

        margin:0 auto;            

    /* genişlik veriyoruz*/

        width:200px;        

    /* 1px kalınlığında kenarlık veriyoruz*/            

        border:1px solid #ccc;    

    /* kenarlıklarımızı border-radius: koduyla 10px yuvarlaklaştırıyoruz.*/

        border-radius:10px;    

    /* divimize arkaplan rengi atıyoruz */

        background:lightyellow;    

    /* 4 taraftanda 20px padding veriyoruz */

        padding:20px;            

    }

</style>



Ekran görüntüm ;


Şimdi ise isteğe bağlı olarak ben SOL ÜST ve SAĞ ALT kısımdan yuvarlaklaştırılmış bir kutu yapacağım.
Hemen yeni bir div oluşturuyorum.

<div id="kutu2">aynı özelliklerde bi div daha oluşturuyoruz fakat buna sol üst ve sağ alt kısımdan yuvarlaklık veriyoruz</div>



CSS kodum ise;

#kutu2{

    /* divimizi sayfa içinde ortalıyoruz */

        margin:0 auto;            

    /* genişlik veriyoruz*/

        width:200px;        

    /* 1px kalınlığında kenarlık veriyoruz*/            

        border:1px solid #ccc;    

    /* border-radius verirken 4 köşeye özel yuvarlaklık verebiliriz.İlk parametre SOL ÜST ikinci parametre SAĞ ÜST, üçüncü parametre SAĞ ALT, dördüncü parametre SOL ALT kısımdır*/

        border-radius:10px 0px 10px 0px;    

    /* divimize arkaplan rengi atıyoruz */

        background:lightgreen;    

    /* 4 taraftanda 20px padding veriyoruz */

        padding:20px;            

    }



Ekran görüntüm ;

  • Etiketler;
Uğur Türkmen
1993'te doğdu. Yaklaşık beş senedir profesyonel olarak web tasarım ile ilgilenmektedir. Son bir buçuk yıldır PHP kodluyor ve İstanbul'da özel bir şirkette Webmaster olarak hizmet veriyor. <p>Sakarya Üniversitesi Bilgisayar Programcılığı mezunudur.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

mrb; bu kutuları yan yana 2 veya 3 tane nasıl sıralayabiliriz.. teşkekkür ederim
mrb; bu kutuları yan yana 2 veya 3 tane nasıl sıralayabiliriz.. teşkekkür ederim
merhaba , divlerimizde [ [b]float:left [/b]] css komutunu kullanırsak yanyana divlerimizi sıralayabiliriz

Yukarı Git