• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[CSS3] Box-shadow w menu (Listy)

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
222 wizyt
pytanie zadane 29 grudnia 2016 w HTML i CSS przez Sedki Początkujący (250 p.)

Witam :) 

A więc posiadam sobie menu:

ol>li>ul>li

Po najechaniu na li (Poziom I) pojawia się ul(z listami) li (link) 

ol>li:hover ma animacje z box-shadow: 0px 0px 105px 13px rgba(0,0,0,0.75);

ol>li:hover>ul ma animację box-shadow 0px 25px 70px 13px rgba(0,0,0,0.75)

i tu nasuwa się moje pytanie. Jak nie zmieniając wysokości i szerokości w box-shadow stworzyć o to taki efekt jak w Poziom II?:

: 

Czyli box-shadow z ol>li>ul nie ma nachodzić na ol>li 

Próbowałem to osadzić na 2 animacjach lecz ta z ol>li>ul nachodzi na tą ol>li. Proszę o jakąś podpowiedź :)

Kod: http://codepen.io/Sedkimikara/pen/gLVPEm

Z góry dziękuję 

 

 

1 odpowiedź

+1 głos
odpowiedź 29 grudnia 2016 przez Czort Nałogowiec (32,500 p.)
wybrane 30 grudnia 2016 przez Sedki
 
Najlepsza

1. Ten cień moim zdaniem jest za duży i ogólnie nie wygląda estetycznie.

2. box-shadow nie wymaga vendorów http://shouldiprefix.com/#box-shadow

3. Wpisując wartości box-shadow po przecinkach masz większą kontrolę nad cieniem z każdej strony, np.

box-shadow: 10px 20px 20px rgba(0,0,0,.75),-10px 20px 20px rgba(0,0,0,.75)

4. Można użyć negatywnej wartości spread (nie jestem pewien czy to dobry pomysł) https://css-tricks.com/snippets/css/css-box-shadow/#article-header-id-4. W tym przypadku:

@keyframes help{
  0%{box-shadow:0;}
  100%{box-shadow: 0px 25px 70px -13px rgba(0,0,0,.75);
    z-index:2;
      background-color: #F9F9F9;
  }
}

 

Podobne pytania

0 głosów
0 odpowiedzi 131 wizyt
pytanie zadane 30 sierpnia 2018 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 169 wizyt
pytanie zadane 9 lipca 2017 w HTML i CSS przez Kamil M Bywalec (2,340 p.)
0 głosów
2 odpowiedzi 1,150 wizyt

93,087 zapytań

142,044 odpowiedzi

321,467 komentarzy

62,435 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...