web-dev-qa-db-fra.com

Taille de l'ombre de la zone CSS3 - Pourcentage d'unités?

Je travaille sur un projet qui doit utiliser la propriété CSS3 box-shadow ..__ C'est bien, mais j'ai découvert qu'il n'était pas possible de définir la taille de l'ombre sur le pourcentage d'objet parent.

Je comprends tout à fait que l'ombre de la boîte n'est pas additive, elle ne prend donc pas la taille du parent comme référence.

Mais étant donné que je dois disposer d’un site entièrement réactif avec une mise à l’échelle des objets fluide (pas uniquement sur les points de rupture), cela pose un problème - je ne peux définir la propriété de propagation de l’ombre que par unités absolues (em ou px).

Y a-t-il une solution à cela? J'ai pensé à utiliser un conteneur interne (pour le contenu) dans un conteneur (pour "shadow" - c'est sans flou), mais cela crée un autre problème - le centrage vertical du conteneur interne.

Toute solution? Pas de jQuery s'il vous plaît, juste du CSS pur.

Merci

css3shadowrelative
29
Jozko Remen

J'ai découvert qu'il n'était pas possible de définir la taille de l'ombre sur le pourcentage d'objet parent

Vrai. Mais vous pouvez définir font-size sur l'objet parent, puis définir la taille de l'objet dans ems et utiliser le même ems pour définir la taille box-shadow.

Ou, si votre objet parent est la fenêtre, vous pouvez utiliser viewport units: vw et vh .

7
mik01aj

Si vous recherchez un insetbox-shadow, vous pouvez utiliser un arrière-plan à dégradé radial pour imiter le comportement. Donc au lieu de -

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

Vous utiliseriez -

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

Prise en charge: FF16 +, IE10 +, Safari 5.1+

Je ne trouve pas de réponse définitive au moment où Chrome a commencé à prendre en charge la propriété, mais ma version actuelle (39.0.2171.65) la prend définitivement en charge.

ColorZilla est un outil très utile pour générer des gradients radiaux (entre autres) avec les préfixes nécessaires si vous décidez de suivre cette voie.

5
shakyjake

Avez-vous essayé d'utiliser l'unité rem (unité root em)? Je crois que vous pouvez utiliser ceci pour le faire évoluer de manière fluide. 

L'unité rem est toujours relative à l'élément html racine. Elle évolue donc en conséquence et vous n'avez pas à vous soucier des conteneurs internes ou de choses similaires. Il a également un support assez large de navigateur à ce stade. 

Je l'utilise sur mes projets pour les rendre plus réactifs, mais suivez toujours un paramètre déjà défini par px ou em afin qu'il échoue correctement au cas où. Par exemple: 

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

Voici un excellent article expliquant tout ce que vous devez savoir sur cette unité: http://snook.ca/archives/html_and_css/font-size-with-rem

2
alex

Voulez-vous que l'ombre de la boîte s'adapte à la largeur du conteneur ou à la hauteur du conteneur? Vous ne pouvez pas vraiment spécifier une hauteur et une largeur de votre ombre, seulement un écart. Donc, si votre conteneur diminue de 10% en largeur mais ne diminue pas en hauteur, votre ombre diminuera de 10% (si cela était possible), c’est-à-dire que la hauteur de votre ombre s’adapterait alors qu’elle ne le devrait probablement pas.

Si vous voulez que l'ombre de la boîte s'adapte correctement en hauteur et en largeur, vous devez créer plusieurs ombres, une pour la hauteur et une pour la largeur.

Cependant, vous ne pourrez jamais redimensionner l'ombre réelle, mais uniquement le conteneur de l'ombre. Vous devez donc créer un conteneur dans votre conteneur principal, lui attribuer des marges négatives et attacher la boîte-ombre. Cependant, vous remarquerez bientôt que votre ombre s'agrandit au lieu de diminuer lorsque vous réduisez le conteneur.

Cela semble un peu exagéré d'essayer de mettre à l'échelle quelque chose qui n'est pas évolutif sans utiliser les requêtes de média ou jQuery.

Toutefois, si vous recherchez des bordures évolutives, c’est-à-dire box-shadow sans flou: P, ne cherchez pas plus loin:

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>
0
Cornelius