JMiur [E]

Una imagen normal:
<img src="URL_IMAGEN"/>

Le redondeamos los bordes en Firefox, Chrome Opera e IE9:
<img style="border-radius:20px" src="URL_IMAGEN"/>

Le agregamos un borde:
<img style="border-radius: 20px;border: 5px solid #FFF;" src="URL_IMAGEN"/>
en Firefox y Chorme/Opera se verán diferentes:


Le agregamos un padding que es la separación entre el borde y la imagen en si misma:
<img style="border-radius: 20px;border: 5px solid #FFF;padding: 10px;" src="URL_IMAGEN"/>
Nuevamene, en Firefox y Chorme/Opera se verán diferentes:


Empezamos otra vez pero usando valores extremos
<img style="border-radius:100px;padding: 0 50px;" src="URL_IMAGEN"/>
la confusión de los navegadores aumenta ¿cómo era eso del respeto a los estándares?:


Me olvido de las dudas existenciales y sigo agregándole propiedades; esta vez, un color de fondo:
<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;" src="URL_IMAGEN"/>

Y un poco de sombra exterior:
<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;box-shadow:0 0 10px #DEF;" src="URL_IMAGEN"/>

Y una poco de sombra en el interior:
<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;box-shadow:0 0 15px #000000 inset,0 0 10px #DEF;" src="URL_IMAGEN"/>

Y así podríamos seguir hasta el infinito.

9 comentarios:

Graciela  

Genial amigo! qué bonito qué bonito :D

Responder
Artemisa  

Esto es algo que me pone de los nervios. Cada vez que hago algun cambio de este tipo en mi blog y lo visualizo con Chorme me deprime y ya ni hablemos de IE :S alli mi blog es que ni se ve.

Responder
Amador López Criado  

Fácil, fácil, fácil... Todo parece fácil cuando está bien explicado. Un saludo.

Responder
CristJian  

interesante! y uno que cree que todo eso se hace con photoshop jaja :)

Responder
Gem@  

A veces pienso que sin esas dudas existenciales ni con otras tantas que surgen sería un aburrimiento.
¿Imaginas que todo saliera perfecto a la primera? ¿y luego qué? ¿dónde está la gracia y esa chispa que enciende el interruptor de una sonrisa después de pelear con esas y otras tantas dudas??

Responder
JMiur  

Si todo saliera bien al primer intento: RENUNCIO y si todo sale mal al quinto intento: TAMBIEN:.-)

Responder
MaX  

como se puede hacer para aplicar este efecto a todas las imagenes, osea tambien a las que ya pusimos tiempo atras?
se puede hacer?

Responder
JMiur  

Dependerá del sitio en el que se quiera utilizar y en que parte de ese sitio se quisiera aplicar.

Responder
MaCaPe  

Gracias dobles, por tus lecciones y por tu buen humor:"y si todo sale mal al quinto intento: TAMBIÉN".Saludos

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR