Cień tylko na dole CSS3
Czy jest sposób, aby rzucić cień tylko na dno?. Mam menu z 2 obrazkami obok siebie. Nie chcę prawego cienia, bo nakłada się na właściwy obraz. Nie lubię używać do tego zdjęć, więc jest sposób, aby upuścić go tylko na dole, jak:
box-shadow-bottom: 10px #FFF; lub podobne?
-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');
11 answers
UPDATE 4
Tak samo jak update 3, ale z nowoczesnym css (=less rules) tak, że nie jest wymagane specjalne pozycjonowanie na pseudo elemencie.
#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>UPDATE 3
Wszystkie moje poprzednie odpowiedzi używały dodatkowych znaczników, aby uzyskać ten efekt, który niekoniecznie jest potrzebny. Myślę, że to dużo czystszego roztworu... jedyną sztuczką jest zabawa z wartościami, aby uzyskać właściwe pozycjonowanie cienia, a także prawo Siła / nieprzezroczystość cienia. Oto nowe skrzypce, używając pseudo-elementów :
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;
}
UPDATE 2
Najwyraźniej możesz to zrobić za pomocą dodatkowego parametru do CSS box-shadow, jak wszyscy inni właśnie zauważyli. Oto 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;
Czwarta długość jest rozłożona odległość. Wartości dodatnie powodują kształt cienia rozszerzający się we wszystkich kierunki o określony promień. Wartości ujemne powodują kształt cienia do umowy.
UPDATE
Zobacz demo w jsFiddle: http://jsfiddle.net/K88H9/4/
To, co zrobiłem, to stworzenie "elementu cienia", który ukryłby się za rzeczywistym elementem, który chciałbyś mieć cień. Zrobiłem szerokość "shadow element" być dokładnie mniej szeroki niż rzeczywisty element o 2 razy Cień podać; następnie wyrównałem go poprawnie.
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;
}
Oryginalna Odpowiedź
Tak, możesz to zrobić z tą samą składnią, którą masz pod warunkiem. Pierwsza wartość kontroluje pozycjonowanie poziome, a druga wartość kontroluje pozycjonowanie pionowe. Więc po prostu ustaw pierwszą wartość na 0px, a drugą na dowolne przesunięcie w następujący sposób:
-webkit-box-shadow: 0px 5px #000000;
-moz-box-shadow: 0px 5px #000000;
box-shadow: 0px 5px #000000;
Aby uzyskać więcej informacji na temat cieni pudełkowych, sprawdź te:
Mam nadzieję, że to pomoże.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-08 21:26:00
Wystarczy użyć parametru spread, aby cień był mniejszy:
.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>Live demo: http://dabblet.com/gist/a8f8ba527f5cff607327
Aby nie widzieć cienia po bokach, (wartość bezwzględna) promień rozsyłu (4. parametr) musi być taka sama jak promień rozmycia (3.parametr).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-25 19:44:23
Jeśli masz stały kolor tła, możesz ukryć efekt cienia bocznego za pomocą dwóch cieni maskujących o tym samym kolorze tła i rozmyciu = 0, przykład:
box-shadow:
-6px 0 white, /*Left masking shadow*/
6px 0 white, /*Right masking shadow*/
0 7px 4px -3px black; /*The real (slim) shadow*/
Zauważ, że czarny cień musi być ostatni i ma ujemny spread (- 3px), aby zapobiec jego rozciągnięciu poza rogi.
Tutaj fiddle (Zmień kolor cieni maskujących, aby zobaczyć, jak naprawdę działa ).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-29 08:36:54
Zawsze lepiej przeczytać specyfikacje . Nie ma box-shadow-bottom właściwości i jak wskazuje Lea, powinieneś zawsze umieszczać nie-prefiksowaną właściwość na dole, po prefiksach.
Więc jest:
.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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-25 15:02:31
Myślę, że o to ci chodzi?
.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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-25 15:02:51
A może po prostu użyć zawierającego div, który ma overflow ustawiony na hidden i jakieś wyściółki na dole? To chyba najprostsze rozwiązanie.
Przepraszam, że nie pomyślałem o tym, ale zobaczyłem to gdzie indziej .
Używanie elementu do zawijania elementu, który otrzymuje Cień pudełka i przepełnienie: Ukryty na opakowaniu może sprawić, że dodatkowy cień pudełka zniknie i nadal będzie miał użyteczną obramowanie. Rozwiązuje to również problem, w którym element jest mniejszy jak się wydaje, z powodu rozprzestrzeniania się.
Tak:
#wrapper { padding-bottom: 10px; overflow: hidden; } #elem { box-shadow: 0 0 10px black; }Treść idzie tutaj
Wciąż sprytne rozwiązanie, gdy trzeba to zrobić w czystym CSS!
Jak powiedział Jorgen Evens .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-17 20:59:31
Potrzebowałem również cienia, ale tylko pod obrazem i ustawię go lekko w lewo i w prawo. To mi się udało:
.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;
}
Element, do którego zostanie zastosowany, to obraz na całej stronie (980px x 300px).
Jeśli to pomaga podczas majstrowania z ustawieniami, działają one w następujący sposób:
Cień poziomy, Cień pionowy, odległość rozmycia, rozprzestrzenianie (tj. rozmiar cienia) i kolor.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-06 02:37:19
Jeśli Twoje tło jest stałe (lub możesz je odtworzyć za pomocą CSS), możesz użyć gradientu liniowego w ten sposób:
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>Spowoduje to wygenerowanie gradientu 5px u dołu elementu, od czerni przy 30% kryciu do całkowicie przezroczystego. Reszta elementu ma białe tło. Oczywiście, zmieniając ostatnie 2 przystanki kolorów gradientu liniowego, możesz sprawić, że tło będzie całkowicie przezroczyste.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-18 00:04:01
Lepiej poszukać Cienia:
.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);
}
Ten kod jest obecnie używany w sieci stackoverflow.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-04 12:42:20
Update on someone else his answer transparant sides instead then white so it works on other color background too.
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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-03 14:39:32
Wewnętrzny Cień
.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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-18 23:23:36