CSS3 Cuadro sombra de tamaño por ciento de las unidades?

Estoy trabajando en un proyecto que necesita usar CSS3 box-shadow de la propiedad.
Eso está bien, pero me he enterado de que tamaño propagación de la sombra no se puede establecer un porcentaje de objeto primario.

Estoy totalmente de entender que box-shadow no es aditivo, por lo que éste no tiene el tamaño de un padre como una referencia.

Pero dado el hecho de que tengo que tener totalmente sensible sitio con objetos de escala de manera fluida (no sólo en los puntos de interrupción), pero esto también plantea un problema: me puede ajustar la sombra, a la propagación de la propiedad sólo en unidades absolutas (em o px).

Existe alguna solución a esto? Pensé acerca del uso de contenedor interno (por el contenido) dentro de un contenedor (por «sombra» – es sin desenfoque), pero esto crea otro problema – centrado vertical de interior del contenedor.

Alguna solución? No jQuery por favor, sólo puro CSS.

  • Cómo sobre un borde de una sombra?
  • Me gustaría tratar de trabajar con pseudo-elements
  • em es relativa al tamaño de fuente. Un truco es hacer que su fuente de escala, también.
InformationsquelleAutor Jozko Remen | 2012-12-27

4 Kommentare

  1. 11

    Me he enterado de que tamaño propagación de la sombra no se puede establecer el porcentaje de objeto primario

    Verdadero. Pero se puede establecer font-size en el objeto primario, a continuación, definir el tamaño del objeto en ems, y el uso de la misma ems para definir el box-shadow tamaño.

    O, si su objeto principal pasa a ser la ventana, puede utilizar área de visualización de las unidades de: vw y vh.

    • Gran solución (hack realmente) me usee como esta: (en línea) de tamaño de fuente = (bolas de-radio / 10) y la clase de css box-shadow:inset -2em -5em 5em rgba(0,0,0,.6)
    • Esto debe ser aceptado respuesta de la OMI. Los demás no cumplen las solicitudes.
  2. 5

    Si usted está después de una margen box-shadow usted podría utilizar una radial-gradient fondo para imitar el comportamiento. Así que en lugar de

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

    Utilizaría –

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

    De apoyo: FF16+, IE10+, Safari 5.1+

    No puedo encontrar ninguna respuesta definitiva en cuando Chrome comenzó a apoyar a la propiedad, pero mi versión actual (39.0.2171.65) definitivamente lo admite.

    ColorZilla es una muy útil herramienta para generar radial (entre otros) los gradientes junto con la necesaria prefijos si usted decide ir a esta ruta.

  3. 2

    Has probado a utilizar el rem unidad (raíz de la unidad em)? Creo que usted puede usar esto para hacer escala en forma fluida.

    La rem unidad es siempre relativa a la raíz del elemento html, por lo que se escala en consecuencia y usted no tiene que preocuparse acerca de interior de los contenedores, o algo como eso. También tiene bastante amplio soporte de navegador en este punto.

    Yo lo uso en mis proyectos para hacerlos más receptivos, pero siempre siguiendo un parámetro ya definidas por px o em por lo que se produce correctamente en caso de. Por ejemplo:

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

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

    • Esto no funciona con box-shadow.
    • usted debe estar bromeando o mentira..!! jsfiddle.net/4dgaurav/5Sptc/1
    • No trabajo para mí, no sé por qué. Gracias.
  4. 0

    ¿Desea que el box-shadow a escala con el ancho del contenedor o con la altura del contenedor? Realmente no se puede especificar la altura y la anchura de su sombra, sólo con un spread. Así que si tu recipiente se reduce en un 10% de la anchura, pero no de tamaño en altura, a continuación, su sombra se reducirá en un 10% (si fuera posible), es decir, su sombra de altura sería la escala, incluso a pesar de que probablemente no debería.

    Si quieres la caja de sombra de la realidad a escala correctamente con respecto a la altura y la anchura, tendría que crear varias sombras – uno para la altura, uno de ancho.

    Sin embargo, usted nunca será capaz de aumentar la escala de la real sombra, sólo el contenedor de la sombra. Por lo que se podría crear un contenedor dentro de su contenedor principal y, a continuación, darle márgenes negativos y adjuntar el box-shadow. Sin embargo, pronto se dará cuenta de que su sombra crece en lugar de encogerse cuando se escala el contenedor de abajo.

    Parece un poco excesivo para intentar escala de algo que no es escalable, sin el uso de consultas de medios de comunicación o jQuery.

    Sin embargo, si usted está buscando para escalable de las fronteras, 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>
    • Esto no responde a la cuestión de la utilización de box-shadow con un porcentaje de unidades
    • Simplemente, usted no puede utilizar los porcentajes en box-shadow. Bastante mucho cualquier respuesta será un hack que usa algunos otros recipientes para lograr el efecto. Así que la pregunta debe ser enviado a la W3C y los fabricantes de los navegadores o si el cartel está buscando una solución es una solución que es una sombra, basada en el porcentaje sin un efecto de desenfoque.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea