Cómo hacer imágenes con bordes repetidos

 

 

 

Acabo de ver este pequeño e interesante sitio de Max Bittker: broider. Usted diseñará una imagen en una cuadrícula de 9 divisiones (excepto la parte central) y producirá una imagen para que la use junto border-imagecon el CSS para copiar y pegar.

Mira mi pequeño diseño:

Las áreas de la imagen finalmente se generan en un archivo PNG base64 con los diseños en cada área. Por ejemplo, si acaba de dibujar en el cuadrante superior central, el PNG generado tendrá este aspecto:

Lo que te da un borde único como este, que podría ser justo lo que deseas:

En el nuevo sitio web ShopTalk Show, tenemos un efecto similar en algunos lugares, como este:

Lo hicimos de una manera ligeramente diferente. En lugar de border-image, usamos un background-imagey. background-repeat: round;De esa manera pudimos usar una imagen prácticamente de la misma manera, solo que tuvimos que dar el paso adicional de colocar un elemento “interno” para eliminar el medio (para simular un borde). .

 

Como esto:

Mirándolo ahora, probablemente deberíamos haber usado border-image, ya que puede hacer lo mismo y es un poco más limpio. Nuestra página de Almanaque tiene más ejemplos.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Cómo hacer imágenes con bordes repetidos

Cómo hacer imágenes con bordes repetidos

Acabo de ver este pequeño e interesante sitio de Max Bittker: broider. Usted diseñará una imagen en una cuadrícula de 9 divisiones (excepto la parte centra

programar

es

https://aprendeprogramando.es/static/images/programar-como-hacer-imagenes-con-bordes-repetidos-1343-0.jpg

2024-06-13

 

Cómo hacer imágenes con bordes repetidos
Cómo hacer imágenes con bordes repetidos

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences