Foros del Web » Creando para Internet » CSS »

Esquinas Redondeadas

Estas en el tema de Esquinas Redondeadas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/06/2009, 04:27
 
Fecha de Ingreso: junio-2009
Ubicación: Reus, Tarragona, España
Mensajes: 63
Antigüedad: 8 años, 6 meses
Puntos: 1
Esquinas Redondeadas

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.
  #2 (permalink)  
Antiguo 15/06/2009, 04:30
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Esquinas Redondeadas

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.
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 15/06/2009, 04:35
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Esquinas Redondeadas

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.
__________________
- León, Guanajuato
- GV-Foto
  #4 (permalink)  
Antiguo 15/06/2009, 04:37
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Esquinas Redondeadas

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 :)
__________________
No diseñes usando tablas.
  #5 (permalink)  
Antiguo 15/06/2009, 08:27
 
Fecha de Ingreso: junio-2009
Ubicación: Reus, Tarragona, España
Mensajes: 63
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: Esquinas Redondeadas

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.
  #6 (permalink)  
Antiguo 15/06/2009, 09:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Esquinas Redondeadas

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.
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 23:26.