CSS3 Rozmiar cienia pudełka - jednostki procentowe?

Question

Pracuję nad projektem, który musi korzystać z właściwości CSS3 box-shadow. To dobrze, ale odkryłem, że rozmiar rozrzutu cienia nie może być ustawiony na procent obiektu nadrzędnego.

pełni zrozumieć, że skrzynki cieni nie addytywny, co nie ma wielkość dominującą jako odniesienie.

Biorąc jednak pod uwagę fakt, że muszę mieć w pełni responsywną stronę z obiektami skalującymi się płynnie (nie tylko w punktach łamania), stanowi to problem - mogę ustawić właściwość rozprzestrzeniania cienia tylko w jednostkach bezwzględnych (em lub px).

Czy istnieje rozwiązanie tego? Myślałem o użyciu wewnętrznego pojemnika (dla zawartości) wewnątrz kontenera (dla "cienia" - to bez rozmycia), ale stwarza to inny problem - pionowe centrowanie wewnętrznego pojemnika.

Jakieś rozwiązanie? Nie proszę jQuery, tylko czysty CSS.

Dzięki

Answer 1

Czy próbowali za pomocą rem jednostkę (pierwiastek jednostkowy em)? Wierzę, że możesz tego użyć, aby skalować płynnie.

Jednostka rem jest zawsze w stosunku do głównego elementu html, więc będzie to odpowiednio skalować i nie trzeba się martwić o wewnętrznych pojemnikach lub coś podobnego. W tym momencie ma również bardzo szerokie wsparcie dla przeglądarki.

Używam go w moich projektach, aby były bardziej responsywne, ale zawsze podążaj za parametrem już zdefiniowanym przez px lub em, aby na wszelki wypadek zawiodła z wdziękiem. Na przykład:

font-size: 14px; font-size: 1.4rem; 

Oto wielki artykuł wyjaśniający wszystko, co trzeba wiedzieć o tym urządzeniu: http://snook.ca/archives/html_and_css/font-size-with-rem

Answer 2

Chcesz pole cień do skalowania do szerokości kontenera lub z wysokości pojemnik? Nie można określić wysokości i szerokości cienia, a jedynie rozkładówki. Więc jeśli twój pojemnik kurczy się o 10% szerokości, ale nie kurczy się w wysokości, to twój cień zmniejszy się o 10% (jeśli to możliwe), tzn. Wysokość twojego cienia wyskoczy, nawet jeśli prawdopodobnie nie powinna.

Jeśli chcesz box-shadow, aby rzeczywiście skala prawidłowo w odniesieniu do wysokości i szerokości, trzeba by utworzyć wiele cieni - jeden na wysokości, jeden dla szerokości.

Jednak nigdy nie będzie w stanie przeskalować rzeczywisty cień, tylko pojemnik z cienia. Więc możesz utworzyć pojemnik wewnątrz głównego pojemnika, a następnie nadać mu ujemne marginesy i dołączyć cień pudełka. Jednak wkrótce zauważysz, że twój cień rzeczywiście rośnie zamiast zmniejszać się, gdy skalujesz pojemnik w dół.

wydaje się nieco overkill, aby spróbować czegoś skala, która nie jest skalowalny bez użycia zapytań multimedialnych lub jQuery.

Jednakże, jeśli szukasz granic skalowalnych, tj box-shadow bez rozmycia: P, to nie patrzeć dalej:

http://jsfiddle.net/925r2/3/

<style> 
    * { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     box-sizing: border-box; 
    } 

    .wrapper { 
     position: relative; 
     margin: 100px auto 0; 
     width: 80%;   /* .content width */ 
     height: 400px;  /* .content height */ 
    } 

    .content { 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background: #fff; /* .content background */ 
    } 

    .shadow { 
     position: absolute; 
     top: -10%;   /* .content shadow top height */ 
     right: -5%;   /* .content shadow right width */ 
     bottom: -10%;  /* .content shadow bottom height */ 
     left: -5%;   /* .content shadow left width */ 
     background: #000; /* .content shadow, unfortuntely no blur effect */ 
    } 
</style> 

<div class="wrapper"> 
    <div class="shadow"></div> 
    <div class="content">This is your content</div> 
</div> 

Answer 3

Jeśli jesteś po wstawkabox-shadow można użyć tła gradientowego radialnie do naśladowania zachowania.Więc zamiast -

box-shadow: inset 0 0 100% #000; 

byłoby użyć -

background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%); 

Support: FF16 + IE10 +, Safari 5.1+

nie mogę znaleźć żadnej ostatecznej odpowiedzi na kiedy Chrome rozpoczęła wspieranie właściwość , ale moja obecna wersja (39.0.2171.65) zdecydowanie popiera to.

ColorZilla to całkiem przydatne narzędzie do generowania radialnych (między innymi) gradientów wraz z niezbędnymi przedrostkami, jeśli zdecydujesz się zejść z tej trasy.

Answer 4

I okazało się, że wielkość rozprzestrzenianie tle nie może być ustawiony na wartość procentowa obiektu macierzystego

TRUE. Ale możesz ustawić font-size na obiekcie nadrzędnym, a następnie zdefiniować rozmiar obiektu w em s i użyć tego samego em s, aby zdefiniować rozmiar box-shadow.

Jeśli twoim rodzicem jest okno, możesz użyć viewport units: vw and vh.