Bir öğenin yalnızca bir tarafında alt gölge nasıl oluşturulur?

Gölgeyi sadece altına düşürmenin bir yolu var mı? Yanımda 2 resim bulunan bir menüm var. Doğru bir gölge istemiyorum çünkü doğru görüntüyle örtüşüyor. Bunun için görüntüleri kullanmaktan hoşlanmıyorum, bu yüzden sadece aşağıdaki gibi bırakmanın bir yolu var:

box-shadow-bottom: 10px #FFF; veya benzeri?

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

GÜNCELLEME 4

Güncelleme 3 ile aynı, ancak modern css (= daha az kural) ile, sözde öğe üzerinde özel bir konumlandırma gerekli değildir.

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}

<div id="box" class="box-shadow"></div>

GÜNCELLEME 3

Önceki tüm yanıtlarım bu efekti oluşturmak için fazladan biçimlendirme kullanıyordu, bu da gerekli değildir. Bence bu çok daha temiz bir çözüm ... tek hile, gölgenin doğru konumlandırılmasını ve gölgenin doğru gücünü / opaklığını elde etmek için değerlerle oynamaktır. İşte sözde öğeleri kullanan yeni bir keman :

http://jsfiddle.net/UnsungHero97/ARRRZ/2/

HTML

<div id="box" class="box-shadow"></div>

CSS

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

GÜNCELLEME 2

Görünüşe göre, bunu herkesin işaret ettiği gibi, kutu-gölge CSS için ekstra bir parametre ile yapabilirsiniz. İşte demo:

http://jsfiddle.net/K88H9/821/

CSS

-webkit-box-shadow: 0 4px 4px -2px #000000;
   -moz-box-shadow: 0 4px 4px -2px #000000;
        box-shadow: 0 4px 4px -2px #000000;

Bu daha iyi bir çözüm olurdu. Eklenen ekstra parametre şöyle tanımlanır:

Dördüncü uzunluk bir yayılma mesafesidir. Pozitif değerler, gölge şeklinin belirtilen yarıçapla tüm yönlerde genişlemesine neden olur. Negatif değerler gölge şeklinin daralmasına neden olur.

GÜNCELLEME

Demoyu jsFiddle'da bulabilirsiniz: http://jsfiddle.net/K88H9/4/

Yaptığım şey, gölge olmasını istediğiniz gerçek öğenin arkasına saklanacak bir "gölge öğesi" yaratmaktı. Belirttiğiniz gölgenin 2 katı kadar "gölge öğesinin" genişliğini gerçek öğeden tam olarak daha geniş olacak şekilde yaptım; sonra düzgün bir şekilde hizaladım.

HTML

<div id="wrapper">
    <div id="element"></div>
    <div id="shadow"></div>
</div>

CSS

#wrapper {
    width: 84px;
    position: relative;
}
#element {
    background-color: #3D668F;
    height: 54px;
    width: 100%;
    position: relative;
    z-index: 10;
}
#shadow {
    background-color: #3D668F;
    height: 8px;
    width: 80px;
    margin-left: -40px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 5;
    -webkit-box-shadow: 0px 2px 4px #000000;
       -moz-box-shadow: 0px 2px 4px #000000;
            box-shadow: 0px 2px 4px #000000;
}

Orijinal Yanıt

Evet, bunu sağladığınız söz dizimiyle yapabilirsiniz. İlk değer yatay konumu ve ikinci değer dikey konumu kontrol eder. Öyleyse, ilk değeri şu şekilde 0pxve ikincisini istediğiniz gibi ofset olarak ayarlayın:

-webkit-box-shadow: 0px 5px #000000;
   -moz-box-shadow: 0px 5px #000000;
        box-shadow: 0px 5px #000000;

Kutu gölgeleri hakkında daha fazla bilgi için şunlara göz atın:

• http://www.css3.info/preview/box-shadow/
• https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
• http://www.w3.org/TR/css3-background/#the-box-shadow

Umarım bu yardımcı olur.

Gölgeyi daha küçük yapmak için spread parametresini kullanın:

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}

<div class="shadow">Some content</div>

Canlı demo: http://dabblet.com/gist/a8f8ba527f5cff607327

Yanlarda herhangi bir gölge görmemek için, yayılma yarıçapının (4. parametre) mutlak değerinin bulanıklık yarıçapı (3. parametre) ile aynı olması gerekir.

Arka planda sabit bir renk varsa, arka planla aynı renge sahip iki maskeleme gölgesiyle yan gölge efektini gizleyebilirsiniz ve bulanıklık = 0, örnek:

box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

Siyah gölgenin son olması ve köşelerin ötesine genişlemesini önlemek için negatif yayılmaya (-3px) sahip olması gerektiğini unutmayın.

Burada keman ( gerçekten nasıl çalıştığını görmek için maskeleme gölgelerinin rengini değiştirin ).

div{
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}

<div></div>

Bence peşinde olduğun şey bu mu?

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

<div class="shadow">wefwefwef</div>

Teknik özellikleri okumak her zaman daha iyidir . Hiçbir box-shadow-bottomözellik yoktur ve Lea'un işaret ettiği gibi, ön ekli olmayan özelliği daima ön ekli olanlardan sonra en alta yerleştirmelisiniz.

Bu nedenle bu:

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}

<div class="shadow">Some content</div>

Sadece taşması gizli olarak ayarlanmış ve altındaki dolguları içeren bir div kullanmaya ne dersiniz? Bu en basit çözüm gibi görünüyor.

Bunu kendim düşünmediğimi ama başka bir yerde gördüğümü söylediğim için üzgünüm .

Kutu gölgesini ve taşmayı elde eden öğeyi sarmak için bir öğe kullanarak: sarıcıda gizlenmiş ekstra kutu gölgesinin kaybolmasını sağlayabilir ve yine de kullanılabilir bir kenarlığa sahip olabilirsiniz. Bu, yayılma nedeniyle öğenin göründüğü kadar küçük olduğu sorunu da giderir.

Bunun gibi:

#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

İçerik buraya gelir

Saf CSS'de yapılması gerektiğinde hala akıllı bir çözüm!

Jorgen Evens'in dediği gibi .

clip-pathTaşan tüm kenarları, ancak göstermek istediğiniz kenarları kırpmak (gizlemek) için de kullanabilirsiniz :

.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

Bkz. Klip-yolu (MDN) . İçin argümanlar polygonşunlardır sol üst nokta, sağ üst nokta, sağ alt noktası ve sol alt noktası. Alt kenarı 200%(veya daha büyük bir sayıya 100%) ayarlayarak taşma miktarınızı yalnızca alt kenara sınırlarsınız.

Ayrıca bir gölgeye ihtiyacım vardı ama sadece bir görüntünün altında ve hafifçe sağa ve sola yerleştirdim. Bu benim için çalıştı:

.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

Uygulandığı öğe, sayfa genelinde bir resimdir (980px x 300px).

Ayarlarla uğraşırken yardımcı olursa, aşağıdaki gibi çalışırlar:

yatay gölge, dikey gölge, bulanıklık mesafesi, yayılma (yani gölge boyutu) ve renk.

Gölge aramak daha iyidir:

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

bu kod şu anda stackoverflow web'de kullanılıyor.

Bu kod kalemi (benim tarafımdan değil) bunu ve diğer tarafları oldukça güzel bir şekilde yapmanın çok basit bir yolunu gösteriyor:

box-shadow: 0 5px 5px -5px #333;

https://codepen.io/zeckdude/pen/oxywmm

Arka planınız sağlamsa (veya CSS kullanarak çoğaltabiliyorsanız), doğrusal gradyanı şu şekilde kullanabilirsiniz:

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}

<div>
<p>Foobar</p>
<p>test</p>
</div>

Bu, öğenin altında% 30 opaklıkta siyahtan tamamen saydamlığa kadar 5 piksellik bir degrade oluşturur. Öğenin geri kalanının beyaz arka planı vardır. Tabii ki, doğrusal degradenin son 2 renk durağını değiştirerek, arka planı tamamen şeffaf hale getirebilirsiniz.

Ayrıca altta bir degrade yapabilirsiniz - bu benim için yararlı oldu çünkü istediğim gölge zaten yarı saydam olan bir öğenin üzerindeydi, bu yüzden herhangi bir kırpma konusunda endişelenmem gerekmiyordu:

&:after {
      content:"";
      width:100%;
      height: 8px;
      position: absolute;
      bottom: -8px;
      left: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    }

"Alt" ve "yükseklik" özelliklerini eşleştirin ve rgba değerlerinizi gölgenin üstünde / altında olmasını istediğiniz herhangi bir değere ayarlayın

Bunu şu şekilde yapabilirsiniz:

Genel sözdizimi:

selector {
   box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}

Örnek: sadece kırmızı renkli bir alt kutu gölgesi yapmak istiyoruz,

bunu yapmak için, alt kutu gölge seçeneklerini ayarlamamız gereken tüm kenar seçeneklerini ayarlamamız ve diğerlerini aşağıdaki gibi boş olarak ayarlamamız gerekir:

.box {
     -moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}

Beyaz yerine cevap şeffaf taraflarını başkasına güncelleyin, böylece diğer renk arka planlarında da çalışır.

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}

<div>
</div>

İç gölge

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

<div class="shadow">wefwefwef</div>