redondear esquinas como en mozilla.org

wakewakeup · #1 (**permalink**) 10/02/2006, 06:04

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

wakewakeup · #2 (**permalink**) 13/02/2006, 09:05

nadie me puede dar un pista?

salmantino · #3 (**permalink**) 13/02/2006, 21:41

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;
"

wakewakeup · #4 (**permalink**) 14/02/2006, 02:10

pues entonces entiendo menos como hace las esquinas esas redondeadas con css

pepean74 · #5 (**permalink**) 14/02/2006, 02:37

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;

wakewakeup · #6 (**permalink**) 14/02/2006, 02:56

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

pepean74 · #7 (**permalink**) 14/02/2006, 03:04

.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;

wakewakeup · #8 (**permalink**) 14/02/2006, 03:08

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

baccxus · #9 (**permalink**) 14/02/2006, 11:09

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

wakewakeup · #10 (**permalink**) 14/02/2006, 11:20

Si, eso ya lo he visto, mi duda es como los meten en los css

baccxus · #11 (**permalink**) 14/02/2006, 13:05

Puedes darte una idea con este tutorial de Maestros del Web:
http://www.maestrosdelweb.com/editorial/cssesquinas/

sebtev · #12 (**permalink**) 26/02/2006, 07:52

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

man0l0 · #13 (**permalink**) 26/02/2006, 12:06

Buen método sebtev, gracias por esa información

.

Saludos!

anyulled · #14 (**permalink**) 27/02/2006, 09:33

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

wakewakeup · #15 (**permalink**) 08/03/2006, 04:07

Me gusta lo de los nifty cornes, graciass!!

SI TAN SOLO TUVIERA · #16 (**permalink**) 10/07/2007, 02:15

Buenisimo este nifty! 100% recomendado!