CSS ile box-shadow (kutu gölgelendirme) nasıl yapılır?

0

CSS ile box-shadow (kutu gölgelendirme) nasıl yapılır?

ergin ergin (2515)
7 yıl önce sordu

    Toplam 1 Cevap


    0

    CSS3 ile gelen box-shadow özelliği sayesinde çok basit bir tanımlama ile kutulara istediğimiz şekilde gölgeler oluşturabiliriz.

    Temel kullanımı;

    .uzmanimKutu { 
        box-shadow: 4px 4px 5px #000; 
    }

    4px; İlk değer yataydaki mesafe içindir. Artı değerler kutunun sağından itibaren uzaklık değeridir, negatif değerler ise kutunun soluna doğru mesafeyi göstermektedir.

    4px; İkinci değer dikeydeki mesafe içindir. Artı değerler kutunun altına doğru mesafeyi gösterir, eksi değerler ise kutunun üstüne doğru mesafesini göstermektedir.

    5px; Bulanıklık(blur) değeridir. Gölgelerin gerçeğe yaklaşması için kullanılır. Bulanık yatay ve dikey için verilen değerler göre şekil almaktadır.

    #000; renk değeri. Gölgenin renk değerini göstermektedir.

    Farklı tarayıcılar için ön ek kullanılarak çözüm üretilir. -moz Firefox için, -webkit Safari ve Google Chrome içindir.

    .uzmanimKutu {
         box-shadow: 4px 4px 5px #000;
         -moz-box-shadow: 4px 4px 5px #000;
         -webkit-box-shadow: 4px 4px 5px #000;
     }

    Birden çok gölge kullanımı

    box-shadow tanımında tek bir gölge tanımı yapılabildiği gibi, birden fazla gölge tanımıda yapılmaktadır. Her bir tanım birbirinden virgül ile ayrılır.

    .uzmanimKutu { 
        box-shadow: 5px 5px 5px #0000ff, -5px -5px 5px #ff0000 ;
        -moz-box-shadow: 5px 5px 5px #0000ff, -5px -5px 5px #ff0000 ;
        -webkit-box-shadow: 5px 5px 5px #0000ff, -5px -5px 5px #ff0000;
    }

    Kutu içine gölge vermek

    Kutulara gölge verirken kutu içinede gölge verebiliyoruz. Bunun için inset eklemesi ile kutu içine gölge verebiliriz.

    .uzmanimKutu {
        box-shadow: inset 0 0 2px #000;
        -moz-box-shadow: inset 0 0 2px #000;
        -webkit-box-shadow: inset 0 0 2px #000;
    }
    

    İE İçin Çözüm

    box-shadow IE8 ve alt sürümleri içinde çözüm bulunmaktadır. box-shadow esnekliği ve kolaylığını bize sağlamasada bir çözüm yöntemidir.

    İnternet Explorer' da çözüm için Shadow filtresinden yararlanabiliriz.

    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333');

    IE8 için farklı diğer IE' ler için farklı kodlar yazıyoruz. Bu kodu yukarıdaki kodlar ile birleştirirsek.

    .uzmanimKutu {
        -moz-box-shadow: 3px 3px 4px #333;
        -webkit-box-shadow: 3px 3px 4px #333;
        box-shadow: 3px 3px 4px #333;
        /* For IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";
        /* For IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333');
    }

     Tüm tarayıcılar için çözüm üretmiş olacağız.

    ergin ergin (2515)
    7 yıl önce cevaplandı

      üyelik gerektirir

      Cevap yazabilmek için üye girişi yapmalısınız.

      Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
      uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol