Cargando...
Notificaciones Password  Username

Regresar CPortada - Mas que un foro, tu Comunidad.  » Programación & Diseño Web » Programacion WebMaster » CSS
Actualizar esta página Poner Borde a Imagenes o fotos
Nombre de Usuario:
Contraseña:
   

Responder al tema
 
Herramientas Modos de visualización

(#1)
Old  Administrador
">
avatar
Administrador
Amnel
43216356116/02/2009OtherCat Lover :3http://i.imgur.com/oNn7E5l.jpg
 
 https://www.facebook.com/cportada https://twitter.com/cportada
icon1 Poner Borde a Imagenes o fotos el 4/8/2011, 9:52 pm

Por: Miguel Angel Alvarez

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.



Código:
<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.



Código:
<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.




Código:
<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



Código:
<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 [Tienes que estar registrado y conectado para ver este vínculo] en una página aparte.



"...La vida es corta pero,
El talento y el alma inmortal..."



(#2)
Old  Supervisor
">
avatar
Supervisor
Underground
2365931114/01/2010España
 
icon1 Re: Poner Borde a Imagenes o fotos el 5/8/2011, 8:18 pm

Exelente aporte Saatiya

^^!!



(#3)
Old  Principiante
">
avatar
Principiante
427008
1824024/09/2011Venezuela
 
icon1 Re: Poner Borde a Imagenes o fotos el 24/2/2012, 2:04 am

ver

(#4)
Old  
Contenido patrocinado
 

Comentar con facebook:
 
Permisos de este foro:
No puedes responder a temas en este foro.

 Los Códigos BB están Activado
 Los Emoticonos están Activado
 Código [IMG] está Activado
 Código HTML está Activado