css3 - estilos - lista de codigos css

Tamaño de la sombra de la caja CSS3-¿Porcentaje de unidades?

Question

Estoy trabajando en un proyecto que necesita usar la propiedad CSS3 box-shadow. Eso está bien, pero he descubierto que el tamaño de dispersión de la sombra no se puede establecer en porcentaje del objeto principal.

Entiendo completamente que box-shadow no es aditivo, por lo tanto, no toma el tamaño del padre como referencia.

Pero dado que necesito tener un sitio totalmente sensible con objetos que se escalan de manera fluida (no solo en puntos de ruptura), esto plantea un problema: puedo establecer la propiedad de propagación de la sombra solo en unidades absolutas (em o px).

Hay alguna solución para esto? Pensé en usar un contenedor interno (para el contenido) dentro del contenedor (para "sombra" - es sin borrosidad), pero esto crea otro problema: el centrado vertical del contenedor interno.

¿Alguna solución? No jQuery por favor, solo CSS puro.

Gracias

Answer 1

Descubrí que el tamaño de dispersión de la sombra no se puede configurar como porcentaje del objeto principal

Cierto. Pero puede establecer font-size en el objeto principal, luego definir el tamaño del objeto en em s, y usar los mismos em s para definir el tamaño de la box-shadow del box-shadow .

O, si su objeto principal es la ventana, puede usar las unidades de vista: vw y vh .

Answer 2

¿Desea que la sombra de cuadro se amplíe con el ancho del contenedor o con la altura del contenedor? Realmente no puedes especificar un alto y ancho de tu sombra, solo una extensión. Entonces, si su contenedor se contrae en un 10% de ancho pero no lo hace en altura, entonces su sombra se reducirá en un 10% (si fuera posible), es decir, la altura de su sombra se escalaría aunque probablemente no debería.

Si desea que la sombra de cuadro se amplíe correctamente en relación con la altura y el ancho, tendría que crear varias sombras, una para la altura y otra para la anchura.

Sin embargo, nunca podrá escalar la sombra real, solo el contenedor de la sombra. Así que crearías un contenedor dentro de tu contenedor principal y luego le darías márgenes negativos y adjuntarías la sombra de la caja. Sin embargo, pronto notará que su sombra realmente crece en lugar de reducirse cuando reduce el tamaño del contenedor.

Parece un poco excesivo intentar y escalar algo que no es escalable sin usar consultas de medios o jQuery.

Sin embargo, si está buscando bordes escalables, es decir, box-shadow sin desenfoque: P, entonces no busque más:

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

¿Has intentado usar la unidad rem (unidad raíz em)? Creo que puedes usar esto para hacer que se escale de manera fluida.

La unidad rem es siempre relativa al elemento html raíz, por lo que se escalará en consecuencia y no tienes que preocuparte por los contenedores internos ni nada de eso. También tiene un soporte de navegador bastante amplio en este punto.

Lo uso en mis proyectos para hacerlos más receptivos, pero siempre siga un parámetro ya definido por px o em para que falle correctamente por si acaso. Por ejemplo:

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

Aquí hay un gran artículo que explica todo lo que necesita saber sobre esta unidad: http://snook.ca/archives/html_and_css/font-size-with-rem

Answer 4

Si buscas una box-shadow insertada box-shadow puedes usar un fondo de degradado radial para imitar el comportamiento. Así que en lugar de ...

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

Usted usaría

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

Soporte: FF16 +, IE10 +, Safari 5.1+

No puedo encontrar ninguna respuesta definitiva sobre cuándo Chrome comenzó a admitir la propiedad, pero mi versión actual (39.0.2171.65) definitivamente la admite.

ColorZilla es una herramienta bastante útil para generar gradientes radiales (entre otros) junto con los prefijos necesarios si decide seguir esta ruta.