La propiedad box-reflect es solo uno de los muchos nuevos e impresionantes efectos CSS3 que Webkit trae a la mesa. Desafortunadamente, no es el más fácil de usar. Hay mucha sintaxis que puede ser confusa y hoy vamos a examinarla y explicarla en detalle para que puedas entenderla.
Es importante tener en cuenta que, en este punto, box-reflect solo es compatible con los navegadores Webkit. Es un efecto visual superfluo, así que puedes usarlo siempre que aceptes que no se procesará en nada que no sea Chrome y Safari.
Sintaxis básica: la dirección es todo lo que necesitas
A pesar de que, en la práctica, es tan complejo, -webkit-box-reflect Empieza extremadamente fácil de usar. Todo lo que necesita hacer para agregar un reflejo a un elemento es declarar la propiedad y establecer la dirección valor.
En el ejemplo anterior puse el dirección valor para abajo. Completamente el 98% del tiempo o más, este es el único valor que necesitará. Pero en caso de que sea realmente creativo, puede declarar un reflejo en cualquiera de las cuatro direcciones:
Cualquiera que sea la dirección que elija, el navegador elegirá eso como un punto de anclaje y volteará la imagen. Así, por ejemplo, si ha cambiado nuestro ejemplo original a un valor de Correcto, obtendrías lo siguiente.
Compensar
Después de la dirección valor, opcionalmente puede establecer un compensar valor. Esto es bastante básico y simplemente pone distancia entre la imagen y su reflejo, casi como si la imagen estuviera sobre una superficie de vidrio. Así es como funciona:
Aquí hay una vista previa de cuál es la diferencia entre un valor de? 0? y un valor de? 20px ?.
Curiosamente, no está limitado a píxeles como una medida. Aquí hay algunos otros valores que también funcionan:
Gradientes Webkit
¿Por qué hablamos de gradientes de webkit, no es este un artículo sobre reflexiones? La respuesta es que el tercer valor, máscara-cuadro-imagen, utiliza varias herramientas complicadas para lograr algunos efectos avanzados, el ser primario -webkit-gradiente. Simplemente no puedes entender cómo funcionan las reflexiones de CSS sin entender primero los gradientes.
Hay varios tipos de gradientes y los navegadores difieren en su sintaxis, pero a los efectos de este artículo, nos limitaremos a los gradientes lineales de Webkit. Saltemos a la derecha y miremos el código para un gradiente básico de Webkit.
Este código da como resultado el siguiente gradiente:
Este código puede ser confuso, así que vamos a desglosarlo. Hay tres partes principales: tipo, punto de inicio / parada y desde / hasta el color. Hay un par de tipos diferentes, pero no necesitamos entrar en nada más que en gradientes lineales, por lo que este valor seguirá siendo el mismo.
Los puntos de inicio y parada le permiten inclinar su gradiente en la dirección que usa. En el ejemplo anterior, comenzamos en la parte superior central y terminamos en la parte inferior central, lo que resulta en una graduación del color perfectamente vertical. Sin embargo, si empezamos a jugar con estos, podemos lograr diferentes resultados.
Esta vez comenzamos en la parte superior izquierda y terminamos en la parte inferior derecha, lo que resulta en un gradiente en ángulo como el que se muestra a continuación.
Del mismo modo, el desde y a los valores le permiten establecer el color al principio y al final del degradado. En los ejemplos anteriores, pasamos del negro al blanco, pero puede usar cualquier color que desee en cualquiera de los formatos de color CSS que desee.
Aquí hay otro ejemplo que crea un bonito degradado rojo.
Paradas de color
Además de los puntos de inicio y parada, también puede declarar varias paradas de color en el camino. Básicamente, lo que estás haciendo es decirle al navegador, en el punto? X ?, haz que el gradiente sea de este color.
Aquí hay un ejemplo de un degradado que va de negro a negro, que normalmente resultaría en un color sólido. Sin embargo, hemos aplicado un límite de color al 50% y lo hemos configurado en blanco, lo que da como resultado un degradado que comienza en negro, se desvanece a blanco a la mitad y luego se vuelve a negro.
Enmascarando el reflejo
Ahora que sabemos cómo funcionan los gradientes, tenemos la tercera pieza en nuestro rompecabezas de reflexión de Webkit. Después de declarar el dirección y compensar Valores, su reflejo todavía se ve bastante aburrido, pero a través del uso de una máscara de degradado, de repente tenemos mucho más control.
Incluyamos la sintaxis de gradiente y veamos lo que se nos ocurre:
Como puede ver, aquí fuimos de arriba a abajo y lanzamos una bola curva declarando el desde Color como transparente. Dado que esencialmente estamos construyendo una máscara, el color transparente permitirá que el degradado se desvanezca sobre cualquier fondo. Del mismo modo, el blanco del degradado simplemente representa la opacidad total de la reflexión en ese punto.
Este código da como resultado la siguiente imagen:
Como puede ver, el desvanecimiento de la reflexión con degradado permite un cierto nivel dinámico que le da un indicio más realista que anteriormente estábamos logrando. Una de las cosas más confusas aquí es que, a pesar de que declaramos transparente En la parte superior del gradiente y completamente opaco en la parte inferior, ¡lo que realmente obtenemos es exactamente lo contrario! Esto se debe a que nuestra reflexión es una versión al revés de la imagen, por lo que todo se invierte.
Si esto te confunde, todo lo que tienes que hacer es cambiar todos los valores de gradiente. El siguiente código resultará en el mismo gradiente y puede ser más fácil de entender para algunos, ya que comienza en blanco y termina en transparente, al igual que el resultado anterior.
Acortando la reflexión
En este punto, es posible que hayas notado que nuestra reflexión es bastante larga. En los casos en los que está trabajando con una imagen grande como la nuestra, es probable que desee acortar un poco el degradado para que se desvanezca más pronto.
Entonces, ¿cómo funciona esto preguntas? Aquí es donde entran en juego esas paradas de color. Lo que querremos hacer es crear un degradado de transparente a blanco, luego insertar un tope de color transparente en algún lugar del camino, lo que efectivamente desvanecerá la reflexión antes. Echemos un vistazo al código.
Reduciendo la opacidad del reflejo
Todas las discusiones que he visto para box-reflexionan ahí. Desafortunadamente, creo que nuestro gradiente todavía no es muy creíble. Siempre que creo reflejos en Photoshop, siempre reduzco la opacidad de la capa de reflejo. ¡Rara vez verías un reflejo real que sea tan rígido como el objeto que está reflejando!
Entonces, en este punto nuestra reflexión parece tonta y necesitamos una manera de reducir su opacidad. La solución obvia que primero pensé para intentarlo resultó ser la correcta: rgba. Dado que los colores que declaramos en el gradiente realmente solo definen la transparencia del degradado, usar rgba en lugar de blanco puro nos permite reducir la opacidad y crear un resultado mucho más creíble.
En el código de abajo, simplemente cambié la palabra "blanco". por su equivalente rgba al 20% (0.2).
Aquí hay dos resultados diferentes con sólo el alfa Valor de la propiedad rgba siendo manipulada. Como puede ver, el resultado es mucho mejor que el que obtuvimos con el blanco sólido.
Usando una máscara de imagen
Aquí hay un pequeño truco que aprendí de Peter Gasston en El libro de CSS3. En lugar de construir tu máscara con gradientes CSS, puedes usar una imagen. Usando este método, puedes llegar a algunos resultados bastante locos.
Todo lo que debe hacer es declarar una URL de origen como si estuviera configurando una imagen de fondo en un elemento. A pesar de la desventaja de estar obligado a cargar en una imagen, el código es en realidad mucho más limpio.
Para probar esto, creé y guardé dos archivos PNG separados con fondos transparentes. Uno solo contiene negro sólido, mientras que el otro usa un degradado radial.
Cuando usamos el fragmento anterior para aplicar estas imágenes a nuestro reflejo, esto es lo que obtenemos:
No puedo, por mi vida, pensar en un uso práctico para esta técnica, pero si pones un pensamiento creativo en ella, las posibilidades son infinitas.
Implicaciones de diseño
Cuando estas usando -webkit-box-reflect, es importante entender cómo la reflexión interactuará con su diseño. Curiosamente, no lo hace!
La reflexión es más una imagen de fondo que un elemento que afecta el flujo del documento. Para ver cómo funciona esto, aquí hay dos ejemplos, el primero con una reflexión y el segundo sin.
Como un efecto secundario extraño e inesperado, observe que, aunque el reflejo de la izquierda no cambia el diseño de la página, de alguna manera está alterando el color del texto.
Combinando con otros efectos CSS
Una nota final sobre las reflexiones: puede combinarlas con otros efectos CSS puros con excelentes resultados. Por ejemplo, aquí hay un ejemplo de una imagen con esquinas redondeadas y otra con un borde aplicado. Ambos efectos están perfectamente representados en la reflexión.
Sin embargo, no es el caso que todos Los efectos CSS se reproducen en la reflexión. Por ejemplo, esto es lo que pasa si tiras un sombra de la caja. Observe cómo solo aparece en la imagen original y no en la reflexión.
Conclusión
En resumen, todo lo que realmente necesita para crear una reflexión de trabajo es una dirección valor. Sin embargo, utilizando dirección, compensar y un gradiente Juntos, pueden lograr resultados mucho mejores y desvanecer efectivamente el gradiente.
El efecto se mejora considerablemente si usa rgba para reducir la opacidad general de la reflexión. Luego puede aplicar bordes, esquinas redondeadas y varios otros efectos y se aplicarán automáticamente a la reflexión.
Finalmente, si quieres volverte realmente loco, puedes usar una imagen para enmascarar el reflejo. La imagen se usa solo para aplicar transparencia, de modo que donde haya un color sólido, su reflejo será opaco y donde haya transparencia, su reflejo será transparente.