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:
Genial amigo! qué bonito qué bonito :D
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.
Fácil, fácil, fácil... Todo parece fácil cuando está bien explicado. Un saludo.
interesante! y uno que cree que todo eso se hace con photoshop jaja :)
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??
Si todo saliera bien al primer intento: RENUNCIO y si todo sale mal al quinto intento: TAMBIEN:.-)
como se puede hacer para aplicar este efecto a todas las imagenes, osea tambien a las que ya pusimos tiempo atras?
se puede hacer?
Dependerá del sitio en el que se quiera utilizar y en que parte de ese sitio se quisiera aplicar.
Gracias dobles, por tus lecciones y por tu buen humor:"y si todo sale mal al quinto intento: TAMBIÉN".Saludos
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
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 ...