Mam pasek nawigacji z zakładkami, w którym chciałbym, aby otwarta karta miała cień, aby odróżnić ją od innych kart. Chciałbym również, aby cała sekcja kart miała pojedynczy cień (patrz dolna pozioma linia) przesuwający się w górę, zacieniający dół wszystkich kart z wyjątkiem otwartej.
Zamierzam użyć box-shadow
właściwości CSS3, aby to zrobić, ale nie mogę znaleźć sposobu na cieniowanie tylko tych części, które chcę.
Zwykle zakrywałbym dolny cień otwartej karty obszarem zawartości (wyższym z-index
), ale w tym przypadku sam obszar zawartości ma cień, więc po prostu zakryłby kartę.
Układ kart
_______ _______ _______ | | | | | | ____ | _______ | __ | | __ | _______ | ______
Linia cienia.
Cień wychodził z poziomych linii i na zewnątrz pionowych linii.
_______ | | _______________ | | _________________
Oto przykład na żywo:
Jakaś pomoc, geniusze?
Odpowiedzi:
W swoim przykładzie utwórz element div wewnątrz #content z tym stylem
i zmień styl #content (usuń dopełnienia) i dodaj cień
dodaj cienie do zakładek:
źródło
#content_over_shadow
powinien faktycznie być w#content
stylu.Odetnij go przelewem.
źródło
z-index
Możesz użyć wielu cieni CSS bez żadnych innych elementów div, aby uzyskać pożądany efekt, z zastrzeżeniem braku cieni w rogach.
Ogólnie rzecz biorąc, jest bardzo dyskretny.
źródło
Innym, dość kreatywnym sposobem rozwiązania tego problemu jest dodanie pseudoelementu po lub: przed jednym z elementów. W moim przypadku wygląda to tak:
Spójrz na zrzut ekranu, uczyniłem pseudoelement czerwonym, aby był bardziej widoczny.
źródło
Osobiście najbardziej podoba mi się znalezione tutaj rozwiązanie: http://css3pie.com/demos/tabs/
Pozwala na stan zerowy lub stan najechania z kolorem tła, na który nadal nakłada się cień z zawartości poniżej. Nie jestem pewien, czy jest to możliwe w przypadku powyższej metody:
AKTUALIZACJA:
Właściwie to się myliłem. Możesz sprawić, by zaakceptowane rozwiązanie obsługiwało stan najechania pokazany powyżej. Zrób to:
Zamiast mieć dodatni krewny na a, umieść go w klasie a.active z indeksem z wyższym niż twój #content div poniżej (który ma cień), ale jest niższy niż indeks z na twoim content_wrapper.
Na przykład:
następnie z twoim css:
źródło
Aktualizacja:
clip-path
jest teraz obsługiwany we wszystkich głównych przeglądarkach.Oryginalna odpowiedź:
Jeśli chcesz korzystać z technologii eksperymentalnej tylko częściowo , możesz skorzystać z tej
clip-path
właściwości .Daje to pożądany efekt: cień w kształcie pudełka na górze, po lewej i prawej stronie z czystym odcięciem na dolnej krawędzi.
W twoim przypadku użyłbyś clip-path: inset (px px px px); gdzie wartości pikseli są obliczane od danej krawędzi (patrz poniżej).
Spowoduje to obcięcie danego elementu DIV pod adresem:
Pamiętaj, że między wartościami pikseli nie są wymagane żadne przecinki.
Rozmiar elementu DIV może być elastyczny.
źródło
możesz również zakryć cień za pomocą wielu cieni pudełkowych.
box-shadow: 0 10px 0 #fff, 0 0 10px #ccc;
źródło
Jeśli dodałeś dwa przęsła do zaczepienia, możesz użyć dwóch, na przykład:
na jednym przęśle i
Na innej. Może działać!
Jeśli cienie nakładają się na siebie, możesz nawet użyć 3 cieni - jednego 1 piks. W lewo, jednego 1 piksela w prawo i jednego 1 piksela w górę, lub tak grubych, jak chcesz.
źródło
Zrobiłem coś w rodzaju włamania, nie idealnie, ale wygląda dobrze:
SCSS
źródło