• 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)

VPS Starter Arubacloud
0 głosów
191 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 107 wizyt
pytanie zadane 30 sierpnia 2018 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 142 wizyt
pytanie zadane 9 lipca 2017 w HTML i CSS przez Kamil M Bywalec (2,340 p.)
0 głosów
2 odpowiedzi 807 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...