Propiedad de imagen de borde CSS3 ¡Haciendo fotos realmente geniales!
Crear fronteras no es nada nuevo en HTML Y CSS; Hemos podido agregar bordes desde el principio. Es posible que haya estado familiarizado con los bordes sólidos, los bordes punteados, los bordes discontinuos, etc..
Pero, con la nueva propiedad de imagen de borde CSS3, la creación de bordes en el elemento HTML se está haciendo más avanzada; bueno, en pocas palabras, ahora podemos agregar un borde usando una imagen como fuente que nos permitirá agregar bordes más atractivos. De acuerdo, ahora veamos cómo funciona esta propiedad..
Soporte de sintaxis y navegador
La imagen de borde en CSS3 se define mediante la siguiente sintaxis abreviada:
imagen de borde: [fuente de imagen] [sector] [ancho] [inicio] [repetición];
La sintaxis anterior es la versión oficial de W3C que solo se admite en Chrome, mientras que Opera, Firefox y Safari aún requieren la versión con prefijo (-o-, -moz-, -webkit-), y no sorprende que Internet Explorer no admita esta propiedad en absoluto.
Además, el [anchura] y el [comienzo] valor en este imagen de borde La propiedad aún no es compatible con ningún navegador, sin embargo, el valor de ancho se puede reemplazar utilizando el ancho del borde propiedad.
Así que, en resumen, por ahora solo podemos aplicar el valor de [fuente de imagen], [rebanada] y [repetir] .
imagen de borde: [fuente de imagen] [corte] [repetición];
Rebanada de imagen
Antes de proceder a demostrar esta propiedad, hablemos de la “corte de imagen” Primero ya que es algo nuevo en declarar una propiedad. La sección de imagen aquí definirá el corte de la imagen que toma respectivamente el punto de inicio desde la parte superior, derecha, inferior e izquierda de los bordes de la imagen que posteriormente también dividirá la imagen en nueve secciones, como se ilustra con la siguiente imagen.
En la imagen de arriba, verás que las secciones 1, 3, 7 y 9 se convertirán en las esquinas de la frontera, y las secciones 2, 4, 6 y 8 se convertirá en el borde o línea de borde, asegurándose de que la sección donde se convertirá en el borde sea repetible o estirable.
El valor de los cortes puede ser declarado con un píxel unidad o un porcentaje (%) unidad de medida flexible.
más referencias:
- Fondos y Fronteras CSS Nivel 3
Creación de un marco de fotos
Ahora, vamos a demostrar la propiedad en un ejemplo real..
Esta vez, vamos a implementar el imagen de borde para crear un marco de fotos y utilizaremos la imagen de abajo como fuente. Hemos medido cuidadosamente la imagen para que pueda cortarse, repetirse y estirarse de manera adecuada, independientemente del ancho del contenido y la altura..
Nota: Puedes descargar la imagen de arriba desde este enlace..
Además, en esta demostración usaremos este sorprendente Cinemagraph de From Me to You como foto..
(Fuente de la imagen: De mí a ti)
El marcado
El marcado es tan simple como esto:
No te olvides de reemplazar el images_2 / css3-border-image-property-making-photos-really-cool_3.jpg con tu propia foto.
Los estilos
Y luego, vamos a darle un marco usando imagen de borde.
Si nos fijamos en la imagen de arriba, nuestro ancho de imagen es 180px en total. Este valor se puede dividir en 6 que cada división es 30px; Y así vamos a cortar la imagen para 30px.
Si utiliza el valor de longitud para el sector, debe excluir el px unidad, ya que se traducirá automáticamente a píxel, pero si decide usar el porcentaje, todavía necesitará agregar el (%).
En cuanto a la repetición de la imagen, utilizaremos el predeterminado; repetir. Alternativamente, puedes usar tramo Y no te preocupes, la imagen del borde todavía se verá elegante..
img border-image: url ("images / frame.png") 30 repetición; -o-border-image: url ("images / frame.png") 30 repetición; -moz-border-image: url ("images / frame.png") 30 repetición; -webkit-border-image: url ("images / frame.png") 30 repetición; ancho del borde: 30px; Además, también queremos colocar la imagen en el centro de la ventana del navegador, así como agregar una textura de fondo al documento para hacerlo más atractivo..
html background: url ('images / lightpaperfibers.png'); .wrapper margen: 20px auto; altura: 476px; ancho: 675px; text-align: center; Muy bien, creo que hemos terminado aquí, ahora vamos a verlo en un navegador.
- Manifestación
- Descargar fuente
¿Sientes que estás mirando un cuadro mágico en Hogwarts??
Pensamiento final
Esta imagen de borde Sin duda es una buena adición en la familia CSS3; Ya no estamos limitados a los simples bordes lisos..
Y en esta publicación, le mostramos cómo podemos crear un marco de imagen sin preocuparnos por el contenido o en este caso las dimensiones de la foto (ancho y alto). La altura y el ancho pueden ser flexibles, siempre que la fuente del borde sea repetible o estirable.
Por último, si todavía estás un poco confundido acerca de imagen de borde, hay una herramienta que puede usar para ayudarlo a crear una más fácilmente: herramienta de imagen de borde
