Si queremos darle un toque personal a una o varias imagenes de nuestro blog o web, lo que podemos hacer es un borde diferente a lo habitual. ¿Como se consigue esto? Pues con CSS, claro, lo que haremos es poner una imagen de fondo a nuestra imagen, aumentar el tamaño del borde y darle un efecto sombreado alrededor.
EJEMPLOS:
Para poner este tipo de borde, primero vas a la plantilla y antes de </head> añades el codigo CSS y guardas. Donde pone IMAGEN en color rojo, añades la url de la imagen que vas a poner de fondo del borde y donde pone border:10px el tamaño.
<style>#imagenbordes {background: url("IMAGEN") repeat;border: 10px solid transparent;-moz-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px;-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);height: auto max-width: none;}</style> |
Una vez hecho esto, donde quieras mostrar la imagen con el borde 'tuneado', añades este codigo:
<img id="imagenbordes" src="URL IMAGEN"/> |
