Marcos para fotos con CSS

  • Por
  • CSS
Vemos 4 ejemplos de marcos vistosos para fotos que se pueden crear con CSS sin utilizar imágenes.
En este taller de CSS vamos a crear una serie de 4 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.

Podemos ver el resultado conseguido en una página aparte.

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="im1.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.

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="im2.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.

Ahora hemos definido un marco muy sencillo, pero que recuerda a las fotos instantáneas de Polaroid.

.marco3 {
   padding:8px 8px 20px 8px;
   background-color: #ffffff;
   width: 200px;
   border: 1px solid #999999;
}

<div class="marco3">
<img src="im3.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.

Por último hemos creado un marco con sombra. Este marco con sombra sin utilizar imágenes se nos complica bastante en el código HTML, pero todavía más en el código CSS. Este efecto de sombra con CSS ya fue explicado en otro artículo anterior en DesarrolloWeb.com, por lo que no voy a dar más explicaciones, sino la referencia al artículo: Efecto de sombra con CSS

.blur{
   background-color: #ccc; /*shadow color*/
   color: inherit;
   margin-left: 4px;
   margin-top: 4px;
   width: 224px;
}
.shadow, .content{
   position: relative;
   bottom: 2px;
   right: 2px;
}
.shadow{
   background-color: #666; /*shadow color*/
   color: inherit;
}
.content{
   background-color: #fff; /*background color of content*/
   color: #000; /*text color of content*/
   border: 1px solid #000; /*border color*/
   padding: .5em 2ex;
}
.content IMG{
   border: 1px solid #000000;
}

<div class="blur">
<div class="shadow">
<div class="content"><img src="im4.jpg" width="200" height="150" alt=""></div>
</div>
</div>


Como vemos en el código HTML, se utilizan tres contenedores distintos, para emular el efecto de degradado de la sombra, que es más oscura cerca del objeto y más clara a medida que la sombra se aleja del objeto.

Tendremos que definir estilos para cada uno de los tres contenedores. Lo bueno es que, como los estilos se definen por clases CSS, sólo los tendremos que definir una vez y los podremos utilizar en todas las imágenes que se deseen.

Podemos ver de nuevo los distintos marcos realizados con CSS en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Santi

04/4/2007
Excelente el artículo

Mauricio

07/4/2007
Mis estimados.

El codigo me parece excelente, de hecho estoy pensando en usarlo, pero tengo el problema de que es un codigo CSS, y yo necesito convertirlo a HTML para poder usarlo.

Eh buscado en vuestra pagina y en la red como hacerlo con HTML, pero no encuentro nada.

Seria posible que ustedes me indicaran como serian estos codigos en HTML.

Gracias de antemano por vuestra ayuda.

roogg

28/9/2007
esta muy bien pero hay unos tutos por ahi con imagenes de fondo i no me sale muy bien no se si son por las dimensionesde la imagen o algun otro tipo de problema ??

solanny davila alvarez

27/6/2009
lamentamos su muerte...
MARCON JASON siempre fuite el rey del pop y lo seguira siendo siempre fuite niño a pesar de que te rrobaron tu niñez marco jason siempre te recordaremo como el unico rey del pop lamentamos tu muerte santo domingo y demas paise no fue muy duro en nuestro corazones gua como es la vida como de un momento a otra murio el rey del pop marco jason siempre usted fue un hornorable hombre a pesar de que dejo 3 niños lamentamos su muerte lamentamos de vera te queremos mucho... y l acomañamos su sentimiento a su familiare que mi imagino que deben de estar muy adorolido.
cuando marco jaso subia a esos teatro la mujeres caian como mango y seguira callendo... a hora imaginese esa tragedia de que usted murio caeran como cereza podrida santo domingo te recorda ra mucho marco jason...
GRACIA DONDE QUIERA QUE ESTE Y DONDE QUIERA QUE ESTE TE RECORADAREMOS SIEMPRE....GRACIA SOLANNY DAVILA.

Kairo

10/12/2010
Marcos para fotos
Este tutorial me ha facilitado muchisimi la vida, porque ahora puedo poner marcos a fotos de un a manera muy eficaz. Muchas gracias por hacernos mas facil como programar.

sam

08/3/2016
marcos
es posible colocar marcos de imagenes predeterminadas en .png a las imagenes y posteriormente guardarlas con ese marco