Colores dinamicos div puntas redondeadas.

LeonardoEF · #1 (**permalink**) 16/08/2009, 21:35

Hola,

Alquien me puede decir como rayos hace twitter para tener puntas redondeadas con el fondo y el color del sidebar dinamico???

es decir, el fondo se puede cambiar, el color del side bar tambien, entonces como hacen las puntas redondeadas??

creo que esto tambien deberia ir en CSS, pero lo puse aca porque, si van a las opciones de la cuenta de twitter, para cambiar el color del sidebar, cuando mueve el selector de color, cambia el sidebar de color dinamicamente (javascript supongo), eso lo entiendo, pero como hacen las puntas redondeadas????????????

si alguien sabe expliqueme
salu2

Adler · #2 (**permalink**) 17/08/2009, 07:04

Hola

Son imágenes. En css usan background:url(imagen);

Suerte

goyo_ · #3 (**permalink**) 17/08/2009, 09:16

#header {
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

La magia revelada

LeonardoEF · #4 (**permalink**) 17/08/2009, 13:02

@Adler jajjaja si yo siempre lo hacía con imagenes pero asi no puede ser dinámico, o el fondo o la esquina debe tener un color fijo xD

@goyo_ jajjaj siip, al principio pensé que era magia xD

Grax both...

Adler · #5 (**permalink**) 17/08/2009, 13:46

Hola, a veces creo que soy disléxico

Cita:

Iniciado por goyo_

#header {
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

La magia revelada

Esa mágica solo saca el conejo en IE, para que funcione en otros navegadores

Código css:

Ver original<style type="text/css">
div#contenedor{ 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="contenedor">
<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><bclass="r1"></b></b>
</div>

Fuente

Suerte

qvixote · #6 (**permalink**) 17/08/2009, 15:17

Googlea por Nifty Corners Cube y también encontrarás algo que te puede ayudar.

abimaelrc · #7 (**permalink**) 17/08/2009, 15:33

Tambien te sugiero que leas en esta pagina http://www.araudi.net/ tiene muchos ejemplos de CSS que te van ayudar. Por ejemplo

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;

No funciona para IE por lo tanto mira en esa pagina que vas a poder conseguir ejemplos que funcionan en todos los navegadores, sin necesidad de imagenes.

LeonardoEF · #8 (**permalink**) 17/08/2009, 18:49

@Adler gracias por la opcion ;) aunque se ve un poco "antiestandard" pero efectiva

igual opté por esto:

Código:

<style type="text/css">	

div {
     border-radius:8px;
     -moz-border-radius:8px;
     -webkit-border-radius:8px;
     -khtml-border-radius:8px;
}

</style>

En realidad me importa poco como se vea en el IE xD
Gracias de todos modos
Salu2