Esquinas Redondeadas

[Sam_Enfot]

Hola,

Hoy me he levantado con muchas dudas existenciales y después de un sorteo ante notario, os ha tocado aguantarme. hehehe

(a modo de disculpas por si molesto mucho hoy)

---

Referente a cuadros con esquinas redondeadas... cito codigo *css:

Código:

.sup_der {esquinas
background-position:right top;
}
.sup_der, .inf_der {esquinas
float:right;
width:100%;
}
.esquina {esquinas
background:transparent url(../img/cuadro.gif) no-repeat scroll 0 0;
height:12px;

i cito codigo *html

Código:

<div id="cuadro1">
<div class="esquina sup_der">
<div class="esquina sup_izq"/>
</div>
<p>Hay muchas formas de hacer esto, y esta es una de ellas: usa una sola imagen como fondo y posicionada en cada esquina para conseguir el efecto de redondeado en cada unad e las cuatro.</p>
<div class="esquina inf_der">
<div class="esquina inf_izq"/>
</div>
</div>

Entones, si, esta explicado seguramente muchas veces.

Pero no entiendo en que línea en concreto se han redondeado las esquinas, y mediante que instruccion...

Por que la imagen adjuntada es un cuadro con puntas ¿no?
Que pasaría si cambiasemos el color de fondo? tendríamos que cambiar algo?


Gracias.

[hades87]

Aquí tienes unos cuantos ejemplos mas http://www.xyberneticos.com/index.ph...eadas-con-css/

Lo que imagino que estarás usando sera un div superior y otro inferior, dividido en 2 partes para poner las esquinas.

[Triby]

No hades87, mas bien esta hablando de uno de los ejemplos que Mikmoro tiene en www.araudi.net

Sam_Enfot, lo que pasa es que cada esquina tiene un tamaño definido y, lo mas importante, en el CSS se puede especificar en que posicion debe ubicarse la imagen de fondo respecto a cada contenedor.

Si quieres cambiar los colores, tendras que volver a hacer la imagen de fondo tambien.

[hades87]

Ok, Triby, entonces de ser así pido disculpas, quizás no entendí bien la pregunta.

PD: Aqui tienes un ejemplo sin imágenes, quizás te interese mas :)

[Sam_Enfot]

Hades, muchas gracias por el link. Me ha sido de mucha utilidad, he acabado usando uno de esas 16 trucos, el de crear 4 imagenes donde una para cada esquina.

Luego he creado un par de esquinas inferiores-izquiera de más, para cambiar un poco el "estilo" de según que contenedores.

Es decir, que me ha sido de mucha mucha utilidad.


-----


Y Triby,

La verdad es que no he entendido bien, bueno, si pero no fui capaz.
He visto que hay "bordes" que se limitan a una sola imagen, y según como la posicionemos i/o rotemos equivale al lado derecho-inferior o al...

Creo haber entendido esto, y que mismamente a eso te referías. Estuve probando hasta que no me salió por quinta vez, y lo dejé. hehehe

Aun así, EVIDENTEMENTE, muchas gracias por comentar.

[Mikmoro]

La imagen utilizada es esta:


que verás que tiene las esquinas redondeadas en verde pero con las puntas visibles, pero es que el truco en este caso concreto es que las puntas son del color del fondo de la página, por eso se ven redondeadas.
Pero vamos, hubiera sido igual de sencillo redondearlas de verdad, porque la imagen es un gif, que no tiene problema con las transparencias.

Creo que en general es más efectivo usar una sola imagen que cuatro. Si sólo quieres las esquinas redondeadas, dibujas un cuadro pequeño con las esquinas redondeadas del mismo color que la propia caja, y como te dicen, lo colocas como te interesa en cada una.