Yazar Ol Yazar Girişi
Yazar Girişi
E-Posta Adresi
Şifre
Şifremi Unuttum
Asp.Net .Net MVC PHP & MySQL C# PhotoShop CSS jQuery AlgoritmA MsSQL Server HTML Ruby
- Kategoriler -
Türkçe
English
German
Tüm Kategoriler
Div Kenarlarını Oval Yapma

Eskiden photoshop ile oval kenarlı resim yapıp sayfayı öyle şekillendirirdik fakat artık buna gerek kalmadı css ile istediğimizi yapabiliyoruz.

yapmış olduğunuz bir divin kenarlarını oval yapmarak biraz arkasına da gölge verip bir şekillendirelim.
kutu adında bir id ye sahip bir div açıyoruz.

<div id="kutu"> www.bildiklerimiz.net</div>

buna ait css imiz ise 

#kutu{
     -moz-border-radius: 16px;
     -webkit-border-radius: 16px;
      border-radius: 16px;
/*yukardaki kodu sadece dört kenarı oval yapmak için kullanıyoruz*/

     -moz-box-shadow: 0px 0px 7px #000000;
     -webkit-box-shadow: 0px 0px 7px #000000;
     box-shadow: 0px 0px 7px #000000;
/*kutumuzun arka kısmına hafiften bir gölge atıyoruz.*/


/*aşağıdaki kodlar sadece kutumuzun standart özellikleri yani genişlik renk yükseklik gibi burası sizin alanınıza göre değişiklik gösterecektir.*/
     height:200px;
     width:500px;
     background-color:#fff;
     padding:20px;
     text-align:center;

}

ilgili css ile alakalı yorumları zaten yorum satırı olarak yazdım.. şimdiden hayırlı kullanımlar.

not ie7 ve üstü tarayıcılar desteklemektedir. daha da eski versiyonlara gitmeyiniz. :)

 

Sosyal Hesabında Paylaş

2670 görüntüleme

Yorumlar
Adınız Soyadınız
Mail Adresiniz
Doğrulama Kodu

Bildiklerimiz.Net Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz. biz bunları yapıyoruz ya siz...

© 2019 Bildiklerimiz Tüm hakları saklıdır.
bir Bildiklerimiz.Net projesidir.