Foros del Web » Creando para Internet » Diseño web »

Borders redondeados sin usar imagenes y compatible con navegadores

Estas en el tema de Borders redondeados sin usar imagenes y compatible con navegadores en el foro de Diseño web en Foros del Web. Hola buenas tengo una pequeña duda. Es sobre la propiedad border-radius la cual necesito usar para hacer un campo de busqueda redondeado. Seria bastante sencillo ...
  #1 (permalink)  
Antiguo 05/10/2012, 18:32
 
Fecha de Ingreso: marzo-2012
Mensajes: 20
Antigüedad: 12 años, 3 meses
Puntos: 1
Borders redondeados sin usar imagenes y compatible con navegadores

Hola buenas tengo una pequeña duda. Es sobre la propiedad border-radius
la cual necesito usar para hacer un campo de busqueda redondeado.

Seria bastante sencillo hacerlo con alguna imagen pero quiero que en un futuro poder animarlo con animate() de jquery. y otra dificultad seria que solo seran los bordes redondeados en las esquinas izquierdas.

ee usado el siguiente codigo en Html y CSS

Código CSS:
Ver original
  1. #text-search{
  2.     border-top-left-radius:6px;
  3.     border-bottom-left-radius:6px;
  4.     -moz-border-top-left-radius:6px;
  5.     -moz-border-bottom-left-radius:6px;
  6.     -webkit-border-top-left-radius:6px;
  7.     -webkit-border-bottom-left-radius:6px;
  8.     background:#171717 url(images/search-bg.png) repeat-x;
  9.     width:167px;
  10.     height:28px;
  11.     float:right;
  12.     }

la imagen del background es una especie de degradado con luz. Como ven agregue el -moz y el -webkit para poder aumentar el rango de compatibilidad

ahora bien también lo hice mediante jquery para poder estar seguro asi que con esto es seguro de que sea soportado por todos los navegadores ???

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     $('#text-search').css({
  3.         'border-top-left-radius': '6px',
  4.         'border-bottom-left-radius': '6px'
  5.     });
  6. });

gracias por leer. Soy nuevo en esto
  #2 (permalink)  
Antiguo 05/10/2012, 20:34
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 15 años
Puntos: 641
Respuesta: Borders redondeados sin usar imagenes y compatible con navegadores

¿Pues podrías probarlo en todos los navegadores no?
  #3 (permalink)  
Antiguo 06/10/2012, 09:01
 
Fecha de Ingreso: marzo-2012
Mensajes: 20
Antigüedad: 12 años, 3 meses
Puntos: 1
Respuesta: Borders redondeados sin usar imagenes y compatible con navegadores

Cita:
Iniciado por memoadian Ver Mensaje
¿Pues podrías probarlo en todos los navegadores no?
En las versiones actuales de todos los navegadores funciona muy bien el detalle es en las versiones anteriores como IE6, IE7 e IE8
  #4 (permalink)  
Antiguo 06/10/2012, 09:51
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 15 años
Puntos: 641
Respuesta: Borders redondeados sin usar imagenes y compatible con navegadores

Pues yo daría por muerto IE6 e IE7

pero si quieres ver como se ve

http://browsershots.org/ ahí hay varias capturas desde diferentes navegadores.
  #5 (permalink)  
Antiguo 06/10/2012, 10:36
 
Fecha de Ingreso: marzo-2012
Mensajes: 20
Antigüedad: 12 años, 3 meses
Puntos: 1
Respuesta: Borders redondeados sin usar imagenes y compatible con navegadores

Ok, gracias creo que me servira
  #6 (permalink)  
Antiguo 06/10/2012, 17:35
Avatar de disenoexpress  
Fecha de Ingreso: julio-2012
Mensajes: 19
Antigüedad: 11 años, 10 meses
Puntos: 0
Respuesta: Borders redondeados sin usar imagenes y compatible con navegadores

IE6, creo recordar que no tenia compatibilidad con border-radius. Pero no desdeñes a IE8, que sigue funcionando en miles de ordenadores con windows XP.Para navegadores realmente viejos había una librería javascript llamada DD_Roundles. Puedes echarle un vistazo en http://www.dillerdesign.com/experiment/DD_roundies/

Etiquetas: border, compatibilidad, diseño, html, javascript, jquery, navegadores, radius
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:25.