Cómo hacer imágenes de bordes repetidos | Programar Plus

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

Mira mi pequeño diseño:

Las áreas de la imagen finalmente se envían a 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 se verá así:

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

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

Lo hicimos de una manera ligeramente diferente. En vez de border-image, usamos un background-image y background-repeat: round; De esa manera, podríamos usar una imagen prácticamente de la misma manera, solo que teníamos que dar el paso adicional de colocar un elemento “interno” para eliminar el medio (para que simule 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.

(Visited 7 times, 1 visits today)