| |
|---|
|
|
Veamos varios ejemplos de marcos vistosos para fotos que se pueden crear con CSS sin utilizar imágenes.
En este post de CSS vamos a crear una serie de marcos para fotos, que podemos utilizar en una página web para mejorar la presencia, pero sin complicarnos la vida. Una vez elegido el marco que más nos guste, podemos utilizarlo repetidas veces en la página para que todas las fotos se vean de manera parecida y gane también un poco de personalidad el diseño de la web.
Para hacer esta serie de marcos hemos evitado el uso de imágenes adicionales, sólo las fotografías, lo que hace que el diseño sea más fácil de aplicar, sólo definiendo los estilos CSS.
Modelo 1
Primer marco CSS, que es sencillo y aplica estilos tanto al contenedor de la foto como a la imagen misma.
.marco1 {
padding:8px;
background-color: #f5f5f5;
width: 200px;
border: 1px solid #999999;
}
.marco1 IMG{
border: 1px solid #000000;
}
<div class="marco1">
<img src="im-ejm.jpg" width="200" height="150" alt="">
</div>
En este caso hemos definido un espacio entre el marco y la foto, un color de fondo y un borde. Con la segunda declaración estamos definiendo también un borde de color negro para la imagen, para que quede más resaltada.
Modelo 2
Veamos ahora el segundo marco, que hemos querido hacer un borde como con relieve.
.marco2 {
padding:8px;
background-color: #f5f5f5;
width: 200px;
border-bottom: 1px solid #999999;
border-right: 1px solid #999999;
}
<div class="marco2">
<img src="im-ejm.jpg" width="200" height="150" alt="">
</div>
Hemos definido estilos CSS para un espacio entre la foto y el borde del contenedor, un color de fondo y los mencionados bordes, que sólo se aplican abajo y a la derecha.
Modelo 3
Ahora hemos definido un marco muy sencillo, pero que recuerda a las fotos instantáneas de Polaroid.<div class="marco3">
<img src="im-ejm.jpg" width="200" height="150" alt="">
</div>
.marco3 {
padding:8px 8px 20px 8px;
background-color: #ffffff;
width: 200px;
border: 1px solid #999999;
}
<div class="marco3">
<img src="im-ejm.jpg" width="200" height="150" alt="">
</div>
Simplemente hemos definido unos espacios entre la foto y el borde del elemento, donde el espacio de abajo es mayor para emular el marco de las Polaroid, que era más ancho abajo.
Luego hemos puesto un borde al propio contenedor para que se distinga con el fondo de la página, que también es blanco.
Modelo 4
Podemos ahora apreciar un marco con aplicación del gradiente lineal. Veamos: <div class="marco4"><img src="im-ejm.jpg" width="200" height="150" alt="">
</div>
.marco4 { padding:8px; background: linear-gradient(to right, red, yellow ,pink,red); width: 210px; border: 1px solid #999999; }
Simplemente hemos definido reglas del gradiente lineal aplicando 4 colores a degradar: red, yellow ,pink y red, con dirección derecha a izquierda .
