Foros del Web » Creando para Internet » CSS »

redondear esquinas como en mozilla.org

Estas en el tema de redondear esquinas como en mozilla.org en el foro de CSS en Foros del Web. Buenas, Estaba mirando el codigo de mozilla.org para redondear las escunas de los cuadros. Veo que mete en las etiquetas Ul de la cabecera por ...
  #1 (permalink)  
Antiguo 10/02/2006, 06:04
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 13 años, 1 mes
Puntos: 1
redondear esquinas como en mozilla.org

Buenas,
Estaba mirando el codigo de mozilla.org para redondear las escunas de los cuadros.
Veo que mete en las etiquetas Ul de la cabecera por ejemplo la instruccion:
background: url("../../images/header_br.gif") no-repeat bottom right;
Pero no entiendo porque lo mete en Ul si es la esquina de la tabla...
A ver si alguien me orienta un poco sobre esta tecnica
graciassss
  #2 (permalink)  
Antiguo 13/02/2006, 09:05
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 13 años, 1 mes
Puntos: 1
nadie me puede dar un pista?
  #3 (permalink)  
Antiguo 13/02/2006, 21:41
 
Fecha de Ingreso: febrero-2006
Mensajes: 5
Antigüedad: 11 años, 9 meses
Puntos: 0
yo pienso que en realidad no es la esquina de la tabla sino una imgen que pone de fondo y que no se repite

"background: url("../../images/header_br.gif") no-repeat bottom right;
"
  #4 (permalink)  
Antiguo 14/02/2006, 02:10
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 13 años, 1 mes
Puntos: 1
pues entonces entiendo menos como hace las esquinas esas redondeadas con css
  #5 (permalink)  
Antiguo 14/02/2006, 02:37
 
Fecha de Ingreso: febrero-2006
Mensajes: 15
Antigüedad: 11 años, 10 meses
Puntos: 0
Si q se puede, lo unico q solo funciona para mozilla, para el resto de navegadores no te quedara mas remedio q usar imagenes de fondo

-moz-border-radius: valor;

El valor puede estar en pixels o en %, a mayor valor la curva es mas ptronunciada

tambien se puede aplicar a cada una de las 4 esquinas por separado;
-moz-border-radius-topleft: valor;
-moz-border-radius-topright:valor;
-moz-border-radius-bottomright:valor;
-moz-border-radius-bottomleft:valor;
  #6 (permalink)  
Antiguo 14/02/2006, 02:56
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 13 años, 1 mes
Puntos: 1
Estoy probando lo que dices por no me funciona ni en firefox
Código:
<html>
<head>
<style>
.prueba {
 width: 100px;
 height: 50px;
 background: red;
 moz-border-radius: 20px;
 border: 1px solid black;
}
</style>
</head>
<body>
<div class="prueba">
hola carambola
</div>
</body>
</html>
De todos modos, no veo nada de moz-border-radius en los css de mozilla, y ademas con IE tambien se ven los bordes redondeados de mozilla.org
  #7 (permalink)  
Antiguo 14/02/2006, 03:04
 
Fecha de Ingreso: febrero-2006
Mensajes: 15
Antigüedad: 11 años, 10 meses
Puntos: 0
.prueba {
width: 100px;
height: 50px;
background: red;
moz-border-radius: 20px;
border: 1px solid black;
}

te has dejado el -

has escrito moz-border-radius: 20px; y deberia ser -moz-border-radius: 20px;
  #8 (permalink)  
Antiguo 14/02/2006, 03:08
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 13 años, 1 mes
Puntos: 1
ahh vale ahora si, graciass, la pena que no funcione para todos los navegadores.
De todos modos ya te digo que, no veo nada de moz-border-radius en los css de mozilla, y ademas con IE tambien se ven los bordes redondeados de mozilla.org
  #9 (permalink)  
Antiguo 14/02/2006, 11:09
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
En mozilla.org usan imagenes en las esquinas, dále click derecho a los backgounds y opcion 'ver imagen de fondo', para que veas.

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #10 (permalink)  
Antiguo 14/02/2006, 11:20
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 13 años, 1 mes
Puntos: 1
Si, eso ya lo he visto, mi duda es como los meten en los css
  #11 (permalink)  
Antiguo 14/02/2006, 13:05
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Puedes darte una idea con este tutorial de Maestros del Web:
http://www.maestrosdelweb.com/editorial/cssesquinas/
__________________
Al final del día hablar es gratis, codificar no lo es
  #12 (permalink)  
Antiguo 26/02/2006, 07:52
 
Fecha de Ingreso: enero-2004
Ubicación: Salto
Mensajes: 484
Antigüedad: 13 años, 11 meses
Puntos: 2
Sin usar imágenes
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
div#nifty{ margin: 0 ;background: #F0EDE0}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #F0EDE0}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>

<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b
class="r3"></b><b class="r4"></b></b>

[Aquí el contenido]

<b class="rbottom"><b class="r4"></b><b
class="r3"></b><b class="r2"></b><b
class="r1"></b></b></div>
</body>
</html> 
http://usalo.blogspot.com/2005/05/li...s-con-css.html
__________________
Dios dira que esto no es justo, pero lo sera...
  #13 (permalink)  
Antiguo 26/02/2006, 12:06
 
Fecha de Ingreso: febrero-2006
Mensajes: 150
Antigüedad: 11 años, 10 meses
Puntos: 6
Buen método sebtev, gracias por esa información .


Saludos!
  #14 (permalink)  
Antiguo 27/02/2006, 09:33
Avatar de anyulled  
Fecha de Ingreso: diciembre-2005
Ubicación: Los Teques, Venezuela
Mensajes: 16
Antigüedad: 12 años
Puntos: 0
De acuerdo prueba esto

en internet circula un metodo llamado nifty corners, tampoco usa imagenes y funciona perfecto.

en mi pagina yo lo uso: checa cclt.org.ve
mete en google nifty corners y lo obtendrás

tambien está un tipo llamado stu nichols que es el fundador de l código mencionado arriba por steb, y tiene muchas mas posibilidades, prueba: stu-nicholls.co.uk
  #15 (permalink)  
Antiguo 08/03/2006, 04:07
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 13 años, 1 mes
Puntos: 1
Me gusta lo de los nifty cornes, graciass!!
  #16 (permalink)  
Antiguo 10/07/2007, 03:15
Avatar de SI TAN SOLO TUVIERA  
Fecha de Ingreso: marzo-2006
Ubicación: Aburrilandia, US
Mensajes: 652
Antigüedad: 11 años, 8 meses
Puntos: 3
Re: redondear esquinas como en mozilla.org

Buenisimo este nifty! 100% recomendado!
__________________
¿Dónde encontrar carros baratos en USA? En Autopten.
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 04:28.