Czy istnieje sposób w CSS3, aby utworzyć cień pola wstawek między przeglądarkami (np. Mozilla, Webkit i Opera), który przejdzie z czarnego na biały do białego na dole? Najbliższy sposób, w jaki to zrobiłem, pozwala tylko jednemu kolorowi na zewnątrz cienia, a następnie przejściu do innego koloru w środku, na tej stronie: http://www.css3.info/preview/box-shadow/CSS3 Box-Shadow Linear Gradient?
Niestety, nie jest to możliwe. Proponuję po prostu użyć elementu div z obrazem tła utworzonym w programie Photoshop lub w podobny sposób.
Dobra, nic wielkiego. Miałem nadzieję, że użyję tylko CSS3, ale ponieważ widzę, że to niemożliwe, po prostu pominę ten pomysł. ;) –
Nie byłbym tak szybki, aby zestrzelić pomysł. Nawet jeśli używasz elementu div, obraz tła może być gradientem, który przeglądarka renderuje w swoim natywnym kodzie i nie wymaga pobierania żadnych zasobów. – redbmk
Prawda - ale to by tylko stworzyło iluzję wstawionego pudełka-cienia. Pytanie pyta konkretnie, czy cienie skrzynkowe mogą mieć gradient, a nie stały kolor. – jacktheripper
Spójrz na this video by Lea Verou. Sekcja, którą łączę, mówi o czymś bardzo podobnym, gdzie używasz gradientów tła do stworzenia czegoś w rodzaju cienia-pudełka. Jeśli uda mi się znaleźć dobry przykład pracy, opublikuję odpowiedź, ale powinno to dać ci dobre miejsce do rozpoczęcia. Możesz także zrobić naprawdę fajne rzeczy, takie jak box shadow curl z pseudoklasą :after, aby pojawił się cień.
Oto kilka prostych przykładów u góry iu dołu pudełka oraz podkreślenie niektórych tekstów. Będziesz musiał się z nim bawić (bardzo dużo, prawdopodobnie), aby wyglądał jak chcesz, ale css ma kilka naprawdę niesamowitych funkcji (i będzie ich coraz więcej).
body {
display: flex;
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}
.container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background:
radial-gradient(at 50% 0, black, transparent 70%),
linear-gradient(0deg, black, transparent 50%) bottom;
background-size: 100% 15px;
background-repeat: no-repeat;
}
.underline {
width: 6em;
text-align:center;
font-size:30px;
}
.underline:after {
content: '\00a0';
background-image:
radial-gradient(at 50% 0, blue 0%, red 50%, transparent 75%);
background-size: 100% 2px;
background-repeat: no-repeat;
float:left;
width:100%;
}<div class="container">
<div class="underline">Hello, world!</div>
</div>Spróbuj użyć: przed elementem ustawić 'cień' w górę.
.classname {
&:before {
content: '';
position: absolute;
display: none;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
z-index: -1;
background: linear-gradient(to bottom, red, blue);
}
&:hover {
&:before {
display: inline-block;
}
}
}
Powyższy kod jest przykładem, jak ustawić taki efekt najechania.
Nie wierzę w to, nie – jacktheripper