Я работаю над проектом, который должен использовать CSS3 box-shadow свойство. Это хорошо, но я обнаружил, что размер тени не может быть установлен в процентах от родительского объекта.
Я полностью понимаю, что box-shadow не является аддитивной, поэтому она не принимает размер родителя в качестве ссылки.
Но учитывая тот факт, что мне нужен полностью отзывчивый сайт с плавно масштабируемыми объектами (не только на точках останова), но это также создает проблему - я могу установить свойство тени для распространения только в абсолютных единицах (em или px).
Есть ли какое-то решение этого? Я думал об использовании внутреннего контейнера (для содержимого) внутри контейнера (для "тени" - без размытия), но это создает другую проблему - вертикальное центрирование внутреннего контейнера.
Любое решение? Нет jQuery, пожалуйста, просто чистый CSS.
Я обнаружил, что размер тени не может быть установлен в процентах от родительского объекта
Правда. Но вы можете установить font-size для родительского объекта, затем определить размер объекта в em и использовать тот же em для определения размера box-shadow.
Или, если ваш родительский объект оказывается окном, вы можете использовать единицы просмотра: vw и vh.
Если вам нужна вставка box-shadow вы можете использовать радиально-градиентный фон, чтобы имитировать поведение. Так что вместо -
box-shadow: inset 0 0 100% #000;
Вы бы использовали -
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%);
Поддержка: FF16+, IE10+, Safari 5. 1+
Я не могу найти однозначного ответа, когда Chrome начал поддерживать свойство, но моя текущая версия (39.0.2171.65) определенно поддерживает его.
ColorZilla - довольно полезный инструмент для генерации радиальных (среди прочих) градиентов вместе с необходимыми префиксами, если вы решите пойти по этому маршруту.
Пробовали ли вы использовать блок rem (root em unit)? Я считаю, что вы можете использовать это, чтобы сделать его масштабируемым.
Модуль rem всегда относится к корневому элементу html, поэтому он будет масштабироваться соответствующим образом, и вам не придется беспокоиться о внутренних контейнерах или что-то в этом роде. На данный момент он также имеет довольно широкую поддержку браузера.
Я использую его в своих проектах, чтобы сделать их более отзывчивыми, но всегда следуйте параметру, уже определенному px или em, чтобы он не удался изящно на всякий случай. Например:
font-size: 14px; font-size: 1.4rem;
Вот отличная статья, объясняющая все, что вам нужно знать об этом устройстве: http://snook.ca/archives/html_and_css/font-size-with-rem
Вы хотите, чтобы рамка-тень масштабировалась с шириной контейнера или с высотой контейнера? Вы не можете определить высоту и ширину своей тени, только спрэд. Поэтому, если ваш контейнер сжимается на 10% по ширине, но не сжимается по высоте, ваша тень будет уменьшаться на 10% (если это было возможно), т.е. Ваша высота тени будет масштабироваться, даже если она, вероятно, не должна.
Если вы хотите, чтобы рамка-тень действительно правильно масштабировалась относительно высоты и ширины, вам нужно было бы создать несколько теней - один для высоты, один для ширины.
Однако вы никогда не сможете масштабировать фактическую тень, только контейнер тени. Таким образом, вы должны создать контейнер внутри основного контейнера, а затем дать ему отрицательные поля и прикрепить коробку-тень. Тем не менее, вы скоро заметите, что ваша тень на самом деле растет вместо того, чтобы сокращаться при масштабировании контейнера.
Кажется немного переборщить, чтобы попытаться масштабировать что-то, что не масштабируется без использования медиа-запросов или jQuery.
Однако, если вы ищете масштабируемые границы, т.е. тень без размытия: P, не смотрите дальше:
<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>