Muszę utworzyć cień pola na jakimś block
elemencie, ale tylko (na przykład) po jego prawej stronie. Sposób w jaki to zrobić jest owinięcie elementu wewnętrznego ze box-shadow
do zewnętrznej jednego z padding-right
a overflow:hidden;
więc trzy pozostałe boki cienia nie są widoczne.
Czy jest jakiś lepszy sposób na osiągnięcie tego? Jak box-shadow-right
?
EDYCJA : Moim zamiarem jest stworzenie tylko pionowej części cienia. Dokładnie to samo, co zrobiłaby repeat-y
reguła background:url(shadow.png) 100% 0% repeat-y
.
css
shadow
box-shadow
tillda
źródło
źródło
Odpowiedzi:
Tak, możesz użyć właściwości rozprzestrzeniania się cienia reguły box-shadow:
Czwarta właściwość
-2px
to rozkład cieni, którego możesz użyć, aby zmienić rozkład cieni, sprawiając wrażenie, że cień jest tylko z jednej strony.To również używa reguł pozycjonowania cienia,
10px
wysyła go w prawo (przesunięcie w poziomie) i0px
utrzymuje pod elementem (przesunięcie w pionie).5px
to promień rozmycia :)Przykład dla ciebie tutaj .
źródło
box-shadow
reguły zostały znormalizowane.Moje samodzielne rozwiązanie, które można łatwo edytować:
HTML:
css:
Demo:
http://jsfiddle.net/jDyQt/103
źródło
Aby uzyskać efekt obcięcia z maksymalnie dwóch stron, możesz użyć pseudoelementów z gradientami tła.
doda ładny efekt przypominający cień po lewej i prawej stronie elementów, które normalnie tworzą dokument.
źródło
Wystarczy dodać :: pseudo lub :: przed pseudoelementem, aby dodać cień. Zrób 1px i umieść po dowolnej stronie. Poniżej znajduje się przykład góry.
źródło
Oto mój przykład:
źródło
Oto mały hack, który zrobiłem.
1. Utwórz
<div class="one_side_shadow"></div>
tuż pod elementem, który chcę utworzyć cień ramki jednostronnej (w tym przypadku chcę, aby jednostronny cień był wstawianyid="element"
od dołu)2. Następnie utworzyłem regularne,
box-shadow
używając ujemnego przesunięcia pionowego, aby przesunąć cień w górę na jedną stronę.źródło
To może być prosty sposób
Przypisz to dowolnemu div
źródło
Oto kodepen do zademonstrowania dla każdej strony lub działający fragment kodu:
źródło
Ta strona pomogła mi: https://gist.github.com/ocean90/1268328 (Zwróć uwagę, że na tej stronie lewy i prawy są odwrócone na dzień tego postu ... ale działają zgodnie z oczekiwaniami). Zostały one poprawione w poniższym kodzie.
źródło
źródło
To, co robię, to utworzenie pionowego bloku dla cienia i umieszczenie go obok miejsca, w którym powinien znajdować się mój element bloku. Dwa bloki są następnie pakowane w inny blok:
Przykład jsFiddle tutaj .
źródło
Ok, oto jeszcze jedna próba. Używanie pseudoelementów i nakładanie na nich porowatości cienia.
HTML:
sass:
https://codepen.io/alex3o0/pen/PrMyNQ
źródło
clip-path
jest obecnie (2020 r.) jednym z najprostszych sposobów uzyskania cieni na określonych bokach elementów, szczególnie gdy wymaganym efektem jest cień „czystego cięcia” na określonych krawędziach (który, jak sądzę, pierwotnie szukał PO)), taki jak to:... w przeciwieństwie do osłabionego / zmniejszonego / przerzedzającego się cienia:
Po prostu zastosuj następujący CSS do danego elementu:
Gdzie:
Apx
ustawia widoczność cienia dla górnej krawędziBpx
dobrzeCpx
DolnyDpx
lewoWprowadź wartość 0 dla wszystkich krawędzi, na których cień powinien być ukryty, a wartość ujemną (taką samą, jak promień rozmycia ramki-cienia -
Xpx
) dla wszystkich krawędzi, na których cień powinien zostać wyświetlony.źródło