Bordes vistosos y originales: clásicas cenefas griegas con SVG y marcos retros con CSS Blend Modes 25.8.15
Traducción de dos artículos de Dudley Storey, aka @dudleystorey, en su blog thenewcode.com sobre cómo lograr bordes originales y vistosos: cenefas griegas clásicas con SVG y bordes tipo marcos retros con modos de fusión Css.
Bordes vistosos y originales: clásicas cenefas griegas con SVG y marcos retros con CSS Blend Modes
Uno de mis blogs favoritos desde hace mucho ha sido el finado demosthenes.info
de Dudley Storey aka @dudleystorey.
Pero su desaparición como tal, lejos de ser motivo de lamento, supone una buena noticia: ha renacido, cual ave Fénix, en el nuevo thenewcode.com. Y con el pequeño cambio estético llega con mejoras evidentes en su funcionamiento y prestaciones.
Lo cuenta su autor en el post de presentación, por si tienes curiosidad.
Así que como creo que es una buena noticia también me sirve como excusa para traer a mi blog dos de sus últimos artículos. Ambos sobre bordes:
Cenefas griegas clásicas
Los diseños geométricos de la Grecia clásica tienden a ser aplicados en filas y columnas, en lugar de rellenando toda una superficie, tipo azulejos. Esto uso resulta familiar en frisos y cenefas. Como tales, es sencillo hacer su patrón y dejar su repetición a CSS, en lugar de SVG.
See the Pen Classical Greek Geometric Borders In SVG by Kseso (@Kseso) on CodePen.
Meandro griego clásico
Este patrón es probablemente el más conocido de la antigüedad clásica. Históricamente, puede haber simbolizado la eternidad o la unidad; su diseño también se hace eco del patrón del laberinto clásico, junto con las olas del Mediterráneo y los giros de un río.
Su construcción en SVG no podría ser más sencillo. Hay sólo dos componentes: una línea y una polilínea.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
line, polyline { fill: none; stroke: #000; stroke-width: 2.5; }
</style>
<line x1="0" y1="1.25" x2="18" y2="1.25" id="border" />
<use xlink:href="#border" transform="translate(0 15.5)" />
<polyline points="1.25,16.7 1.25,5.7 9.9,5.7 9.9,9.4" id="wave" />
<use xlink:href="#wave" transform="rotate(180 7.75 9)" />
</svg>
El uso del elemento use para hacer copias de los elementos favorece nuestro trabajo: los cambios en el estilo del diseño son controlados por CSS, como debe ser, pero los cambios en la geometría de la línea y polilínea, tales como el tratamiento de las tapas y esquinas, se reflejarán inmediatamente en las copias generadas por use.
Añadirlo como decoración a un elemento también es bastante sencillo:
.el {
background-image: url(meander.svg);
background-repeat: repeat-x;
background-size: 50px 50px;
}
Esta regla dibujará el borde en la parte superior del elemento. Si lo quieres tanto en la parte superior y en la inferior, se pueden utilizar dos copias del mismo archivo:
.el {
background-image: url(meander.svg), url(meander.svg);
background-repeat: repeat-x;
background-size: 50px 50px;
background-position: top, bottom;
}
Conociendo esta técnica es sencillo lograr otros bordes, como los siguientes:
Cenefa de hojas
Utilizando los mismos principios, es posible hacer un elemento decorativo de hoja de vid:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30">
<rect y="14.2" width="24.8" height="1.2" id="stem" />
<g id="leafpair">
<path d="M0.5,0c6,0,16.4,1.3,18,10.5c4.5,2.2,6.2,3.7,6.2,3.7h-2.5l-4.9-2.8c0,0-13.5,0.1-17.4-11.5"/>
<path d="M0.5,29.5c6,0,16.4-1.3,18-10.5c4.5-2.2,6.2-3.7,6.2-3.7h-2.5L17.4,18c0,0-13.5-0.1-17.4,11.5"/>
</g>
<use xlink:href="#leafpair" transform="translate(-15,0)" />
<use xlink:href="#leafpair" transform="translate(15,0)" />
</svg>
Recuerda que a casi cualquier elemento HTML se le puede colocar una imagen de fondo, esto da la oportunidad de hacer una línea horizontal decorada con una imagen de fondo:
hr {
height: 30px;
border: none;
background-image: url(leaf.svg);
opacity: 0.3;
}
Con un poco más de trabajo, sería posible hacer que este patrón se gire y curve a medida que avanza a través de la página.
Cenefa de onda sencilla
El patrón final es, en muchos aspectos, el más básico:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.8 15.2">
<polyline fill="none" stroke="#000" stroke-width="3" points="-1,13.8 9.5,13.8 9.5,7.5 4.2,7.5 4.2,1.5 15.2,1.5 15.2,13.8 16.8,13.8 "/>
</svg>
Ir a "Classical Greek Geometric Borders In SVG", que es el artículo original de Dudley Storey.
Diseño Maorí
Unos días después de la publicación de estas cenefas Dudley Storey continuó ampliando la serie con un nuevo artículo (demo incluida): World Ethnomathematics: Maori Designs in SVG.
En este caso me limito a incluir su pen y te invito insto a visitar el artículo original.
See the Pen Māori Designs in SVG by Dudley Storey (@dudleystorey) on CodePen.
Bordes de imagen mejores con blend modes
Recientemente hubo una llamada a la accióbb de Jen Simmons y otros para romper los moldes
del diseño web tradicional mediante el aprovechamiento de las nuevas tecnologías.
Un ejemplo típico del modelo cajas dentro de cajas
es el tema de las imágenes: si no es el caso de caras dentro de círculos, las imágenes son casi siempre presentados con bordes rectos en una rejilla rectangular; en parte, por conveniencia, en parte, por la falta de imaginación o conocimiento de los diseñadores web, y en parte porque tratar de bordes de las imágenes ha significado, por lo general, una gran cantidad de trabajo en PhotoShop.
Pero mediante el uso de modos de fusión, podemos obtener resultados frescos con poco esfuerzo.
Lo primero que se necesita es encontrar una imagen adecuada:
Y a continuación otra imagen con la parte central de un color sólido y los laterales irregulares. Hay muchos recursos en PhotoShop u otros programas que proporcionan este tipo de imágenes:
Imágenes PNG, en escala de grises, comprimidas y en 16 ó 32-bit suellen dar mejor resultado en este tipo de efectos.
Marcos retros para imágenes con CSS Blend Modes
En principio, casi todos los elementos HTML pueden tener de fondo una imagen, incluyendo elementos de imagen. Desafortunadamente, en estos casos de los modos de fusión, la imagen de fondo es tratada igual (y conjuntamente) que la capa de la imagen a la que se aplica, y no funcionarán los efectos de mezcla.
En su lugar, vamos a colocar la imagen de fondo en el contenedor padre de la imagen:
<div>
<img src="peugot.jpg" alt="alt" />
</div>
Y el Css:
div {
background-color: #fff;
background-image: url(masque-24.png);
background-size: cover;
}
div img { width: 100%; }
Determinar el modo de mezcla correcto puede ser un poco difícil, y va a cambiar dependiendo del color de fondo del contenedor. Con un fondo blanco y el marco de muestra, la mejor opción es el valor screen
div img {
mix-blend-mode: screen;
}
El resultado final lo puedes ver en el siguiente pen:
See the Pen Better Image Borders with Blend Modes by Kseso (@Kseso) on CodePen.
Enfoques alternativos
Existen posibilidades alternativas, aunque ambas presentan inconvenientes:
- Los vavegadores basados en Webkit tienen la propiedad
image-mask, pero no es estándar y sólo funciona en Chrome y Safari. border-imagentiene buen soporte por los navegadores pero se presta mejor a bordes con figuras geométricas regulares.
En general, me parece que esta técnica de modo de fusión ofrece la mejor vía para aplicar efectos irregulares a los bordes de las imágenes con facilidad.
¡Tengo ganas de ver lo que a ti se te ocurrió!
Ir a "Better Image Borders with Blend Modes", que es el artículo original de Dudley Storey.
Créditos y reconocimiento de autoría
La totalidad de este artículo es obra de Dudley Storey publicado originalmente en su blog "Classical Greek Geometric Borders In SVG" y "Better Image Borders with Blend Modes".
Lo publico aquí al amparo y según las condiciones del propio autor: The content of this blog is free to use, translate and republish under a Creative Commons license that permits non-commercial sharing with attribution.
En este enlace tienes todas las formas de contacto con el autor original así como información adicional.
