Imágenes en los bordes con CSS3

Dentro de las características que se agregan en CSS3 para bordes, encontramos una interesante opción con border-image.

Mediante esta propiedad, podremos establecer imágenes para los bordes de nuestras cajas, como por ejemplo para un div.

Podremos trabajar sobre cada uno de los lados (border-top-image, border-right-image, border-bottom-image, border-left-image, border-top-left-image, border-top-right-image, border-bottom-left-image y border-bottom-right-image.) y también sobre las esquinas (border-corner-image).

Además de asignar la URL de la imagen (JPEG, PNG o GIF), también podremos indicar valores numéricos de como se posicionará la imagen y otros parámetros adicionales.

Para encontrar más información y ver ejemplos de esta característica, podremos ingresar en el documento del W3C en la sección Border Image.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.