Jak uzyskać cień pola tylko po lewej i prawej stronie

222

Jakikolwiek sposób, aby uzyskać cień z lewej i prawej strony (poziomy?) Bez hacków i obrazów. Ja używam:

box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);

Ale daje cień dookoła.

Nie mam granic wokół elementów.

Jawad
źródło

Odpowiedzi:

262

UWAGA: Sugeruję sprawdzenie odpowiedzi @ Hamish poniżej; nie obejmuje niedoskonałego „maskowania” w opisanym tutaj rozwiązaniu.


Możesz zbliżyć się za pomocą wielu cieni; jeden na każdą stronę

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

Edytować

Dodaj jeszcze 2 cienie dla górnego i dolnego przodu, aby zamaskować krwawienie.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

zniechęcać
źródło
1
Dobrze. Dzięki. Jest trochę shdow na górze i na dole, prawdopodobnie z powodu rozmycia / promienia, ale myślę, że muszę z tym żyć.
Jawad
5
-1: cień nie dociera do rogów, kończą się kilka pikseli wcześniej.
Francisco Corrales Morales,
4
Nie mogę uwierzyć, że to rozwiązanie jest tak wysoko oceniane. Rozszerza obiekt w górę i na dół (poprzez zastosowanie jednolitego cienia), więc jest użyteczny tylko wtedy, gdy div znajduje się na jednolitym tle i może mieć przestrzeń nad i pod nim. Rzeczywiście bardzo ograniczone i powiązane z rozwiązaniem kontekstowym. Rozwiązanie Hamisha jest o wiele lepsze i prostsze.
Ejaz
Istnieje lepsze rozwiązanie (2020 r.). Spójrz na odpowiedź Łukasza poniżej: stackoverflow.com/a/62367058/760777
RWC
171

Nie byłem zadowolony z zaokrąglonego górnego i dolnego cienia obecnego w rozwiązaniu Deefour, więc stworzyłem swój własny.

inset box-shadow tworzy ładny jednolity cień z odciętą górną i dolną częścią.

Aby użyć tego efektu po bokach elementu, utwórz dwa pseudoelementy :beforei :afterumieść je absolutnie po bokach oryginalnego elementu.

div:before, div:after {
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  width: 15px;
}
div:before {
  box-shadow: -15px 0 15px -15px inset;
  left: -15px;
}
div:after {
  box-shadow: 15px 0 15px -15px inset;
  right: -15px;
}

div {
  background: #EEEEEE;
  height: 100px;
  margin: 0 50px;
  width: 100px;
  position: relative;
}
<div></div>


Edytować

W zależności od projektu możesz być w stanie używać clip-path, jak pokazano w odpowiedzi @ Luke'a. Pamiętaj jednak, że w wielu przypadkach nadal powoduje to, że cień zwęża się u góry iu dołu, jak widać w tym przykładzie:

div {
  width: 100px;
  height: 100px;
  background: #EEE;
  box-shadow: 0 0 15px 0px #000;
  clip-path: inset(0px -15px 0px -15px);
  position: relative;
  margin: 0 50px;
}
<div></div>

Hamish
źródło
9
Bardzo mądry. Zwróć też uwagę na swoje :afterpotrzeby top: 0.
Sprintstar,
1
Musiałem dodać display: inline-blockdo pseudo klas, żeby twój przykład działał. W sumie: fajne rozwiązanie. +1
Morfeusz
7
Myślę, że to naprawdę powinna być poprawna odpowiedź, ponieważ dostarczone rozwiązanie naprawdę powoduje „cień pola tylko po lewej i prawej stronie”. Odpowiedź oznaczona jako poprawna nadal powoduje cienie powyżej i poniżej.
Łukasz
2
Myślę, że to powinna być zaakceptowana odpowiedź. Ponieważ ten autorstwa @Deefour działa dobrze, pozostawiając górne i dolne rogi po bokach puste. Z drugiej strony to szczególne rozwiązanie jest po prostu idealne.
Rishabh Shah
1
@Hamish Tak, właśnie to zrobiłem na teraz :-) Szkoda, jedną z atrakcyjnych cech tego podejścia jest to, że (zwykle) wymaga elementów notpomocniczych <div>. :-)
Frerich Raabe
27

Wypróbuj to, działa dla mnie:

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
krishna kinnera
źródło
1
kiedy są dwa divy, rogi nie mają granic.
Francisco Corrales Morales,
26

Podejście klasyczne: spread ujemny

CSS box-shadow używa 4 parametrów: h-shadow, v-shadow, blur, spread:

box-shadow: 10px 0 8px -8px black;

V cieni (shadow verical) jest ustawiony na 0.

Rozmycie parametr dodaje efekt gradientu, ale także dodaje trochę cienia na granicach pionowych (jeden chcemy się pozbyć).

Negatywne rozproszenie zmniejsza cień na wszystkich granicach: możesz się nim bawić, próbując usunąć ten mały pionowy cień bez wpływu na zbyt duży na bokach (łatwiej jest dla małych cieni, od 5 do 10 pikseli).

Oto przykład skrzypiec .


Drugie podejście: Absolutny div z boku

Dodaj pusty element div do elementu i nadaj mu styl absolutnego położenia, aby nie wpływał na zawartość elementu.

Oto skrzypce z przykładem lewego cienia.

<div id="container">
  <div class="shadow"></div>
</div>

.shadow{
    position:absolute;
    height: 100%;
    width: 4px;
    left:0px;
    top:0px;
    box-shadow: -4px 0 3px black;
}

Po trzecie: maskowanie cienia

Jeśli masz stałe tło, możesz ukryć efekt cienia bocznego za pomocą dwóch cieni maskujących o tym samym kolorze tła i rozmycia = 0, przykład:

box-shadow: 
    0 -6px white,          // Top Masking Shadow
    0 6px white,           // Bottom Masking Shadow
    7px 0 4px -3px black,  // Left-shadow
    -7px 0 4px -3px black; // Right-shadow

Ponownie dodałem ujemny spread (-3px) do czarnego cienia, aby nie rozciągał się poza narożniki.

Oto skrzypce .

T30
źródło
4

Działa to dobrze dla wszystkich przeglądarek:

-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
Jibber
źródło
3
to nie działa ani trochę. Być może format się zmienił, ale oznacza to przesunięcie cienia o 7 pikseli w lewo, 0 pikseli w dół, rozmycie zewnętrznych 10 pikseli i zwiększenie rozmycia 0 pikseli. Podział: rozmycie 17 pikseli po lewej stronie, rozmycie 10 pikseli u góry i dołu oraz rozmycie 3 pikseli po prawej stronie. Właśnie to dostaję.
john ktejik
4

PRÓBNY

Musisz użyć wielokrotności box-shadow;. Właściwość wstawki sprawia, że ​​wygląda ładnie i wewnątrz

div {
    box-shadow: inset 0 12px  15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px  8px -4px rgba(31, 73, 125, 0.8);
    width: 100px;
    height: 100px;
    margin: 50px;
    background: white;
}
Ashisha Nautiyal
źródło
4

Innym sposobem jest: overflow-y:hiddenna rodzicu z wypełnieniem.

#wrap {
    overflow-y: hidden;
    padding: 0 10px;
}
#wrap > div {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 20px -5px red;
}

http://jsfiddle.net/qqx221c8/

John Magnolia
źródło
2

clip-pathjest teraz (2020) najlepszym sposobem, w jaki udało mi się uzyskać cienie ramek na określonych bokach elementów, szczególnie gdy wymaganym efektem jest cień „czystego cięcia” na poszczególnych krawędziach , taki jak ten:

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px -15px);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}
<div class="shadow-element"></div>

... w przeciwieństwie do osłabionego / zmniejszonego / przerzedzającego się cienia:

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}
<div class="shadow-element"></div>


Po prostu zastosuj następujący CSS do danego elementu:

box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

Gdzie:

  • Apx ustawia widoczność cienia dla górnej krawędzi
  • Bpx dobrze
  • Cpx Dolny
  • Dpx lewo

Wprowadź wartość 0 dla wszystkich krawędzi, na których cień powinien być ukryty, oraz wartość ujemną (taką samą jak łączny wynik promienia rozmycia + wartości rozproszenia - Xpx + Ypx) na wszystkich krawędziach, na których cień powinien zostać wyświetlony.

Łukasz
źródło
1
To najlepsza odpowiedź. To jest jeszcze prostsze. Możesz po prostu zastosować cień bezpośrednio do swojego obrazu. Działa jak marzenie. Przykład: img.shadowed {box-shadow: 0 0 15px rgba (0,0,0,0,75); ścieżka-ścieżki: wstawka (0px -15px 0px -15px); }
RWC
Nawet w twoim przykładzie widać górny i dolny róg cienia zakrzywionego. Nadal może być dobry w niektórych przypadkach użycia.
Hamish
@Hamish, patrzysz na clip-pathprzykład? Istnieją 2 fragmenty kodu. Pierwsze użycie clip-pathi ma całkowicie czyste odcięcie bez „górnego i dolnego rogu zakrzywionego w” - bardzo podobnie do twojego rozwiązania (ale z dużo mniej wymaganym CSS). Drugi fragment kodu jest przykładem wyłącznie do porównania - wiele rozwiązań powoduje rozproszenie cienia, które często nie jest tym, co ludzie chcą osiągnąć.
Łukasz
Jeśli chcesz mocniejszego cienia, możesz po prostu zmienić box-shadowwłaściwość na coś podobnego 0 0 10px 5px rgba(0,0,0,0.75);. Zwróć uwagę na spreadwartość dodaną i zmniejszoną blur-radius.
Łukasz
@Hamish Zaktualizowałem swój pierwszy fragment kodu w celu zademonstrowania.
Łukasz
1
box-shadow: 0 5px 5px 0 #000;

Działa po mojej stronie. Mam nadzieję, że ci to pomaga.

Nitika Chopra
źródło
0

ŁADNY CIENEK WEWNĘTRZNY NA LEWEJ I PRAWEJ STRONIE DLA NURKÓW, OBRAZÓW LUB TREŚCI WEWNĘTRZNYCH

Aby uzyskać ładny wstawkowy cień po prawej i lewej stronie na obrazach lub innej zawartości, użyj go w ten sposób

*** Indeks Z: -1 to niezła sztuczka, gdy wyświetla się obrazy lub obiekty wewnętrzne z wypustkami

<html>
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>

<style>

.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}

.innercontent{
z-index:-1
}
</style>
</html>
Alejandro Teixeira Muñoz
źródło
0

W niektórych sytuacjach możesz ukryć cień przy innym pojemniku. Na przykład, jeśli DIV znajduje się powyżej i poniżej DIV z cieniem, możesz użyć position: relative; z-index: 1;na otaczających DIV.

NateS
źródło
0

Tylko w poziomie, możesz oszukać cień pola za pomocą przepełnienia jego rodzica div:

<div class="parent">
  <div class="box-shadow">content</div>
</div>

.parent{
  overflow:hidden;
}
.box-shadow{
  box-shadow: box-shadow: 0 5px 5px 0 #000;
}
Bhojendra Rauniyar
źródło
0

Innym pomysłem może być stworzenie ciemnego, zamazanego pseudoelementu, ostatecznie z przezroczystością imitującą cień. Zrób to z nieco mniejszą wysokością i większą szerokością ig

Garavani
źródło
0

Możesz użyć 1 div wewnątrz, aby „wymazać” cień:

.yourdiv{
    position:relative;
    width:400px;
    height:400px;
    left:10px;
    top:40px;
    background-color:white;
    box-shadow: 0px 0px 1px 0.5px #5F5F5F;

}
.erase{
    position:absolute;
    width:100%;
    top:50%;
    height:105%;
    transform:translate(0%,-50%);
    background-color:white;
}

Możesz grać z „height:%;” i „szerokość:%;” aby usunąć pożądany cień.


źródło
0

Z jakiegokolwiek powodu podane tutaj odpowiedzi po prostu nie działałyby w moim przypadku. Mam kreatywność. Oto nowe rozwiązanie dla Ciebie, które używa linear-gradient()zamiast box-shadow.

p {
  padding: 1rem;
  background-color: #b55;
  color: white;
  background-image: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0) .5rem, rgba(0,0,0,0), rgba(0,0,0,0.0) calc(100% - .5rem), rgba(0,0,0,0.5));
}
<p>Testing</p>

Chociaż nie zamierzam kłócić się o to, nie jest to tak naprawdę „pudełko”, które ty (my) próbujemy stworzyć, więc przypuszczam, że można powiedzieć, że box-shadownie miało to sensu na początek.

BCDeWitt
źródło
0

Próbowałem skopiować bootstrap shadow-sm po prawej stronie, oto mój kod:

.shadow-rs{
    box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}
Gabriel Lima
źródło