Incluir en mis sitios favoritos
Ingresar Salir Inscribirme
Buscar Ayuda Contactar Ingresar Directorio Ultimos
Búsqueda avanzada
Preguntas frecuentes
BUSCAR EN: BLOGS FOTOS
 

Hola, Invitado
Ingresar  Inscribirme
En línea: 80 visitantes

Alemania (2)
Argentina (51)
Belice (2)
Bolivia (11)
Brasil (7)
Canadá (1)
Chile (18)
Colombia (18)
Costa Rica (26)
Cuba (20)
Dominicana, República (17)
Ecuador (5)
El Salvador (18)
España (177)
Estados Unidos (12)
Francia (2)
Guatemala (12)
Honduras (3)
Israel (0)
Italia (2)
Jamaica (0)
México (45)
Nicaragua (3)
Países Bajos (0)
Panamá (14)
Paraguay (6)
Perú (21)
Puerto Rico (6)
Reino Unido (1)
Uruguay (9)
Venezuela (38)





Búsquedas recientes

Lo más popular

Lo más buscado este mes

Archivo Weblogs


DIRECTORIO WEBLOGS :: México > Tecnología Incluir BlogMéxico >  Tecnología Weblogs de Yaaqui.com DIRECTORIO WEBLOGS
Blog And Web
creado con http://wordpress.org/?v=3.3.1  en Blogueros
ENVIAR A UN AMIGO
Para subscribirse a  requiere identificarte
Usuario: Ingresar

Tecnologia aplicada a weblogs, wordpress,plantillas y photoshop.
Recursos para Blog y WebVisitarBlog and Web
Dirección URLhttp://blogandweb.com    Registrado:08-Jul-2010
Compartir:

Compartir en Facebook Compartir en Twitter Stumble It More...


Enviar a email
Visitar Bordes redondeados en imágenes con CSS 3 y jQuery Bordes redondeados en imágenes con CSS 3 y jQuery en CSSJavascriptTutorialesborder-radiusCSS3Esquinas redondeadasjQuery
Por Francisco
el 01-Jul-2010

CSS 3 tiene la propiedad border-radius que permite crear bordes redondeados sin imágenes, sin embargo, esta propiedad tiene la limitante de que si se aplica a un elemento que contiene una imagen, no puede darle a esta, bordes redondeados.

Solución

En Web Designer Wall plantean una solución con jQuery y usando border-radius (ver demostración). La solución consiste en agregar el siguiente script al header de la página:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
</script>

Y a cada imagen en la que se desea el efecto de esquinas redondeadas se le agrega la clase: rounded-img o rounded-img2. Ejemplo:

<img src="images/blogandweb.png" class="rounded-img" alt="Blog and Web" />

Y por último, se definen estas clases CSS en el header del documento o el archivo de estilos:

.rounded-img {
	display: inline-block;
	border: solid 1px #000;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.rounded-img2 {
	display: inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
}

Explicación

La propiedad border-radius no puede actuar cuando el elemento al que se aplica contiene una imagen, sin embargo, funciona correctamente cuando el elemento tiene a esa imagen como fondo.

El script oculta la imagen (con opacity:0) y la envuelve con un elemento <span> que tiene a la misma imagen como fondo.

Conclusión

Una solución bastante práctica y útil principalmente en cabeceras de sitios web, pero aplicable a cualquier imagen. Lo cierto es que esto es un bug, que los navegadores tendrán que arreglar en sus versiones siguientes.



Leído 10 veces

Para Subscribirse a  requiere identificarse antes
Bordes redondeados en imágenes con CSS 3 y jQuery en  Weblogs de Yaaqui.com  Blogueros Tecnologia aplicada

Fotologs
El pasado, presente y futuro explicado con una imagen.

Foto 0 en  - El pasado, presente y futuro explicado con una imagen.
Más fotos El pasado, presente y futuro explicado con una imagen. + fotos




21-Jan-2012
LomoKino convierte tu smartphone en una cámara 35mm

Foto 0 en  - LomoKino convierte tu smartphone en una cámara 35mm
Más fotos LomoKino convierte tu smartphone en una cámara 35mm + fotos




21-Jan-2012
La orina puede transformarse en agua potable

Foto 0 en  - La orina puede transformarse en agua potable
Más fotos La orina puede transformarse en agua potable + fotos




21-Jan-2012

Blog And Web Blogueros

Tecnologia aplicada a weblogs, wordpress,plantillas y photoshop. Blog and Web Recursos para Blog y Web

Bordes redondeados en imágenes con CSS 3 y jQuery
CSS 3 tiene la propiedad border-radius que permite crear bordes redondeados sin imágenes, sin embargo, esta propiedad tiene la limitante de que si se aplica a un elemento que contiene una imagen, no puede darle a esta, bordes redondeados. Solución En Web Designer Wall plantean una solución con jQuery y usando border-radius (ver demostración). La solución consiste [...] [..] Leer nota completa
Subscribirse a Bordes redondeados en imágenes con CSS 3 y jQuery
Publicado 01-Jul-2010 por Francisco en CSSJavascriptTutorialesborder-radiusCSS3Esquinas redondeadasjQuery
Leído 10 veces. Más resultados en Más artículos Bordes redondeados en imágenes con CSS 3 y jQuery Fotos acerca Bordes redondeados en imágenes con CSS 3 y jQuery Bordes redondeados en imágenes con CSS 3 y jQuery en Yaaqui
Cgnauta Blog Mexico DF

Blog de diseño gráfico, informática, tecnología y cultura política. CGnauta blog

Border-radius: Diseño Web con CSS 3 - Bordes redondeados
Este tutorial debe visualizarse desde Firefox, Opera, Safari o Google Chrome. Si usan un navegador como Firefox, Chrome u Opera podrán ver cuales son las capacidades de diseño de CSS3 aplicados a [..] Leer nota completa
Subscribirse a Bordes redondeados en imágenes con CSS 3 y jQuery
Publicado 31-Dec-1969 por matius en General
Leído 8 veces. Más resultados en Más artículos Border-radius: Diseño Web con CSS 3 - Bordes redondeados Fotos acerca Border-radius: Diseño Web con CSS 3 - Bordes redondeados Border-radius: Diseño Web con CSS 3 - Bordes redondeados en Yaaqui
Vera´s Soul:está En Tus Manos. Las Palmas de Gran Canaria

Ciencia, Tecnología, Vídeos, Documentales, Humor, Imágenes, Descargas, Curiosidades, Gadgets y mucho más. Vera´s Soul Todo está en tus manos...

Button Maker: crea online botones en CSS con degradados y bordes redondeados
Muchos de los que nos dedicamos en parte al desarrollo y diseño de páginas webs nos vemos en algunas ocasiones en la ne [..] Leer nota completa
Subscribirse a Bordes redondeados en imágenes con CSS 3 y jQuery
Publicado 04-Jun-2010 por Vera en CuriosidadesImágenesOnlineSoftwareUtilidades BlogBlogDiseñodiseños webUtilidades
Leído 21 veces. Más resultados en Más artículos Button Maker: crea online botones en CSS con degradados y bordes redondeados Fotos acerca Button Maker: crea online botones en CSS con degradados y bordes redondeados Button Maker: crea online botones en CSS con degradados y bordes redondeados en Yaaqui
Tutoriales Photoshop Blogueros

Los mejores Tutoriales Photoshop, Fotografía y Retoque Fotográfico de toda la red Tutoriales Photoshop Los mejores Tutoriales Photoshop, Fotografía y Retoque Fotográfico de toda la red

Herramienta perfeccionador de bordes en Photoshop CS5 para extraer imagenes
A menudo me preguntáis que se puede hacer para que los montajes fotográficos en los cuales un objeto y/ó persona se cambia de una imagen a otra, parezcan muy reales y no se note ningún tipo de retoque... En mi opinión, es fundamental que los objetos estén perfectamente extraídos, sin ningún tipo de borde cortante [...] [..] Leer nota completa
Subscribirse a Bordes redondeados en imágenes con CSS 3 y jQuery
Publicado 10-Nov-2010 por Tutoriales photoshop en
Leído 5 veces. Más resultados en Más artículos Herramienta perfeccionador de bordes en Photoshop CS5 para extraer imagenes Fotos acerca Herramienta perfeccionador de bordes en Photoshop CS5 para extraer imagenes Herramienta perfeccionador de bordes en Photoshop CS5 para extraer imagenes en Yaaqui
Almacenplantillasweb Blog madrid

Blog sobre recursos de diseño y desarrollo web Blog AlmacenPlantillasWeb Diseño, accesibilidad, usabilidad, posicionamiento y optimización web

Como crear un menú de navegación con imagenes de fondo en jQuery
Tutorial sobre como crear un menú navegación que tiene un efecto de imagen deslizante de fondo mediante jQuery [..] Leer nota completa
Subscribirse a Bordes redondeados en imágenes con CSS 3 y jQuery
Publicado 29-Jul-2010 por jlopezto en CSSdiseño webjavascriptCSS3
Leído 7 veces. Más resultados en Más artículos Como crear un menú de navegación con imagenes de fondo en jQuery Fotos acerca Como crear un menú de navegación con imagenes de fondo en jQuery Como crear un menú de navegación con imagenes de fondo en jQuery en Yaaqui
Desde Algún Lugar De Buenos Aires Buenos Aires

Un blog sobre la aventura diaria de ser mujer, laburante, artista, estudiante, internetadicta, madre de familia... y vivir en una ciudad como Buenos Aires. Y bueh, no es fácil ser yo! Desde algun lugar de Buenos Aires

Speckboy Design Magazine | 20 Amazing jQuery Plugins and 65 Excellent jQuery Resources [del.icio.us]
20 Amazing jQuery Plugins and 65 Excellent jQuery Resources [..] Leer nota completa
Subscribirse a Bordes redondeados en imágenes con CSS 3 y jQuery
Publicado 31-Dec-1969 por en jquery library programming resources scripts
Leído 9 veces. Más resultados en Más artículos Speckboy Design Magazine | 20 Amazing jQuery Plugins and 65 Excellent jQuery Resources [del.icio.us] Fotos acerca Speckboy Design Magazine | 20 Amazing jQuery Plugins and 65 Excellent jQuery Resources [del.icio.us] Speckboy Design Magazine | 20 Amazing jQuery Plugins and 65 Excellent jQuery Resources [del.icio.us] en Yaaqui
De Todos Los Dias Buenos Aires

Vivencias y Espiritualidad de todos los dias. Con Cristo y Maria De todos los días

Bordes
Foto 0 en  - Bordes Para el día de hoy (07/02/11): [..] Leer nota completa
Subscribirse a Bordes redondeados en imágenes con CSS 3 y jQuery
Publicado 31-Dec-1969 por Ricardo Guillermo Rosano en General
Leído 2 veces. Más resultados en Más artículos Bordes Fotos acerca Bordes Bordes en Yaaqui
Scriptoria Cadiz

Blog sobre escritura, relatos, cuentos, sueños Scriptoria

En Tus Bordes
Foto 0 en  - En Tus Bordes Nada más cruzar la puerta ella soltó las llaves sobre una mesa llena de recuerdos en fotos.Silencio.- Estás en tu casa - dijo -. Puedes poner tus cosas donde quieras.Y no le hice caso sino que me quedé rozando con la punta de mis dedos las sonrisas y los besos plasmados entre marcos de una vida pasada, tan presente y joven como sus ganas de caminar y salir de una niebla espesa y plomiza. Ella pensó que le quita [..] Leer nota completa
Subscribirse a Bordes redondeados en imágenes con CSS 3 y jQuery
Publicado 04-May-2008 por AdR en Ilustracionescabanodesnudodibujofisicaherreroiglesiasilustracionesilustradorjeffreymaximaxi iglesias
Leído 56 veces. Más resultados en Más artículos En Tus Bordes Fotos acerca En Tus Bordes En Tus Bordes en Yaaqui
Desde Algún Lugar De Buenos Aires Buenos Aires

Un blog sobre la aventura diaria de ser mujer, laburante, artista, estudiante, internetadicta, madre de familia... y vivir en una ciudad como Buenos Aires. Y bueh, no es fácil ser yo! Desde algun lugar de Buenos Aires

Imagenes Gratis: Dónde Encontrar Y Descargar Imagenes Gratis Para Tus Artículos [del.icio.us]
Imagenes Gratis: Dónde Encontrar Y Descargar Imagenes Gratis Para Tus Artículos [..] Leer nota completa
Subscribirse a Bordes redondeados en imágenes con CSS 3 y jQuery
Publicado 31-Dec-1969 por en free images webdesign
Leído 24 veces. Más resultados en Más artículos Imagenes Gratis: Dónde Encontrar Y Descargar Imagenes Gratis Para Tus Artículos [del.icio.us] Fotos acerca Imagenes Gratis: Dónde Encontrar Y Descargar Imagenes Gratis Para Tus Artículos [del.icio.us] Imagenes Gratis: Dónde Encontrar Y Descargar Imagenes Gratis Para Tus Artículos [del.icio.us] en Yaaqui
Curioso Pero Inútil Blogueros

Blog de Curiosidades de ciencias, biología, astronomía y física
CPI (Curioso pero inútil) En directo en la Red desde 11111010100

Vidrios y bordes verdes
Vidrio-verde-1.jpg - Vidrios y bordes verdes Disculpen la aliteración en el título, pero es que venía al pelo. David nos pregunta: Buenos días Remo Me encanta el blog por esa forma sencilla y amena de acercar la ciencia a gente curiosa como nosotros… No sé si lo que viene será una consulta CPIera pero ahí va… Leyendo la entrada sobre retrovisores me [...] [..] Leer nota completa
Subscribirse a Bordes redondeados en imágenes con CSS 3 y jQuery
Publicado 05-Dec-2007 por Remo en romulo loredoraúl gonzález de cascorroFestival Nacional de Teatro de CamagüeyFestival Nacional
Leído 178 veces. Más resultados en Más artículos Vidrios y bordes verdes Fotos acerca Vidrios y bordes verdes Vidrios y bordes verdes en Yaaqui
De Todos Los Dias Buenos Aires

Vivencias y Espiritualidad de todos los dias. Con Cristo y Maria De todos los días

Desde los bordes, entre la multitud
Foto 0 en  - Desde los bordes, entre la multitud Para el día de hoy (25/06/10): [..] Leer nota completa
Subscribirse a Bordes redondeados en imágenes con CSS 3 y jQuery
Publicado 24-Jun-2010 por rgr en General
Leído 8 veces. Más resultados en Más artículos Desde los bordes, entre la multitud Fotos acerca Desde los bordes, entre la multitud Desde los bordes, entre la multitud en Yaaqui
Cgnauta Blog Mexico DF

Blog de diseño gráfico, informática, tecnología y cultura política. CGnauta blog

Box-Shadow: Diseño web con CSS 3 - Bordes sombreados
Ahora veremos la propiedad Box-Shadow que nos permite agregar una sombra, la implementación CSS 3 solamente la soporta Opera, en Firefox, Safari y Chrome requeriremos anteponer -moz- y -webkit- a box-shadow. [..] Leer nota completa
Subscribirse a Bordes redondeados en imágenes con CSS 3 y jQuery
Publicado 31-Dec-1969 por matius en General
Leído 15 veces. Más resultados en Más artículos Box-Shadow: Diseño web con CSS 3 - Bordes sombreados Fotos acerca Box-Shadow: Diseño web con CSS 3 - Bordes sombreados Box-Shadow: Diseño web con CSS 3 - Bordes sombreados en Yaaqui

Advertencia YAAQUI.COM no verifica la veracidad de la información publicada y no se responsabiliza por el uso que se le de a la infomación del contenido publicado en los feeds y weblogs independientes. Las opiniones vertidas en este sitio no necesariamente son nuestras. Nos reservamos el derecho de remover cualqueir material que consideremos inconveniente.



El cielo, reflejado al final por una ventana

Cielo en la ventana
Imagen de un buho

Búho
Imagen de Catherine Zeta-Jones espia

Catherine Zeta-Jones 3
Clasificados Costa Rica Clasificados Argentina Clasificados de España Clasificados Puerto Rico Envía una Postal