programador

iván albizu

Main Blog

Blog

Badges con SASS y SVG

Badges con SASS y SVG

He construido badges con sass y svg. Mediante mixins de sass he creado el fondo del badge, en el que se puede personalizar el ancho, el color y el margen superior pasando los parámetros.

El primer parámetro es el ancho en px (sin indicar la unidad), el siguiente el color y el último el margen al elemento superior (sin indicar la unidad).

Lo he incluido (@include) en el body para que se genere el css a partir de sass.

Dichos elementos se van a generar a partir de la función @mixin. El código no tiene misterio, son operaciones para formar un hexágono.

Para usarlo en el html hay que seguir la siguiente estructura:

En la etiqueta de imagen se le añade la imagen, puede ser en cualquier formato, pero usando “svg” se adaptará mejor.

El código completo para probarlo se encuentra en mi GitHub.

 

Esta entrada tiene 0 comentarios

Deja un comentario





Time limit is exhausted. Please reload CAPTCHA.