Comunidad PHPeros

Lenguajes => CSS => Mensaje iniciado por: AlejoSketch en 26 de Enero de 2012, 05:59:50 am

Título: [GUÍA] CSS3: border-radius
Publicado por: AlejoSketch en 26 de Enero de 2012, 05:59:50 am
Hola, que tal?  :)

Últimamente elegir CSS3 se convierte en una elección común entre los diseñadores web y aunque son conceptos relativamente nuevos han tenido tal acogida que un gran porcentaje de los sitios modernos integran una o más de las nuevas "ventajas".

Es por ello que en este post vamos a repasar una de ellas y que seguramente te será de gran utilidad en el futuro si piensas diseñar una interfaz web agradable y funcional obviando hacer uso exagerado de imágenes y otros recursos que ahora pueden ser fácilmente reemplazados por CSS3.

En esta primera parte vamos a tratar con border-radius, actualmente bien conocido por muchos y usado por la mayoría.
1. - Uso

A. Podemos aplicarlo de forma general (para las 4 esquinas):
(http://img13.imageshack.us/img13/7774/72620222.png)#ejemplo {
border-radius: 15px;
}
Aplica un radio de 15px para los cuatro (4) lados.
B. También puedes aplicarlo a algún lado específico:
(http://img109.imageshack.us/img109/6958/19533896.png)#ejemplo {
border-bottom-right-radius: 15px;
}
Aplica un radio de 15px en la esquina inferior derecha.
C. Añade dos (2) valores para crear radios asimétricos.
(http://img831.imageshack.us/img831/8742/47013512.png)#ejemplo {
border-bottom-right-radius: 30px 60px;
}
Aplica un radio de 30px para un lado, y de 60px para el otro.
D. Asigna valores distintos para cada lado:
(http://img405.imageshack.us/img405/4926/27950311.png)#ejemplo {
border-radius: 30px 60px 30px 60px;
}
Así podrás obtener un radio especifico en cada esquina.
2. - Compatibilidad

Aunque CSS3 nos da la posibilidad de usar esta función de esta manera: border-radius: {valor}; muchos navegadores no la reconocen hasta la fecha, esto es una desventaja a la hora de crear y diseñar un sitio que garantice compatibilidad con la mayoría o todos.

Es por ello que lo más recomendable es añadir unas cuantas líneas de código más pero enfocadas a trabajar en los navegadores, por ejemplo con el radio general:

CSS3:
border-radius: {valor};

Mozilla Firefox:
-moz-border-radius: {valor};

Opera/Safari:
-webkit-border-radius: {valor};

Y para los radios específicos:

Descripción: | CSS3 | Mozilla Firefox | Otros
superior izquierda | border-top-left-radius | -moz-border-radius-topleft | -webkit-border-top-left-radius
inferior izquierda | border-bottom-left-radius | -moz-border-radius-bottomleft | -webkit-border-bottom-left-radius
superior derecha | border-top-right-radius | -moz-border-radius-topright | -webkit-border-top-right-radius
inferior derecha | border-bottom-right-radius | -moz-border-radius-bottomright | -webkit-border-bottom-right-radius
Así podemos asegurar que la cobertura de nuestro diseño se extienda a más navegadores.
NOTA:

Este post ha sido un repaso básico acerca de "border-radius" de CSS3, aquí vemos en acción los conceptos más básicos del mismo. para obtener más información sobre este tema puedes visitar varias fuentes de información que también podrán servir de referencia:

- http://www.css3.info/ (http://www.css3.info/preview/rounded-border/)
- http://border-radius.com/ (http://border-radius.com/)
- http://w3schools.com/ (http://w3schools.com/cssref/css3_pr_border-radius.asp)

Gracias.  ;)
Título: Re:[GUÍA] CSS3: border-radius
Publicado por: GuayAngel12 en 26 de Enero de 2012, 10:10:57 am
La verdad, muy interesante, yo ya tenía constancia de border-radius, pero no está mal aprender otras cosas, espero tus tutoriales.

Un Saludo,
Ángel Q.
Título: Re:[GUÍA] CSS3: border-radius
Publicado por: nmartin021 en 26 de Enero de 2012, 20:22:00 pm
No conocía lo de los valores asimétricos, gracias. +1
Título: Re:[GUÍA] CSS3: border-radius
Publicado por: -Pituko- en 26 de Enero de 2012, 23:15:38 pm
Cita de: nmartin021 en 26 de Enero de 2012, 20:22:00 pm
No conocía lo de los valores asimétricos, gracias. +1
Y yo tampoco, me enseño algo el día de hoy y yo que creía conocer muy bien el border-radius ;) +1
Título: Re:[GUÍA] CSS3: border-radius
Publicado por: AlejoSketch en 26 de Enero de 2012, 23:30:44 pm
Cita de: nmartin021 en 26 de Enero de 2012, 20:22:00 pm
No conocía lo de los valores asimétricos, gracias. +1

Cita de: -Pituko- en 26 de Enero de 2012, 23:15:38 pm
Y yo tampoco, me enseño algo el día de hoy y yo que creía conocer muy bien el border-radius ;) +1

Entonces no será sorpresa si digo que yo tampoco lo sabía. :D

Para hacer ese breve post visité y leí los links de referencia que añadí al final, leí una parte de un eBook (CSS3 for web designers - Dan Cederholm) correspondiente al tema y probé en .html para ver que tal me iba... y resulta que antes no sabía algunas cosas que ahora si.

Gracias a ambos por los comentarios positivos  :-[


Título: Re:[GUÍA] CSS3: border-radius
Publicado por: sondeo en 28 de Enero de 2012, 18:07:09 pm
me quedo con el primero buen aporte
Título: Re:[GUÍA] CSS3: border-radius
Publicado por: Animus en 09 de Febrero de 2012, 14:47:53 pm
Ya lo sabía, gracias, es una herramienta útil puedes conseguir eféctos simples y bonitos, lo puedes aplicar lógicamente a text-box, submit's etc..
Título: Re:[GUÍA] CSS3: border-radius
Publicado por: B4nDidO en 03 de Marzo de 2012, 12:43:44 pm
Si bastante simple y ya no es lo de ir diseñando las img y luego usarlar era complejo. :-[
Título: Re:[GUÍA] CSS3: border-radius
Publicado por: AlejoSketch en 03 de Marzo de 2012, 16:28:07 pm
Cita de: B4nDidO en 03 de Marzo de 2012, 12:43:44 pm
Si bastante simple y ya no es lo de ir diseñando las img y luego usarlar era complejo. :-[

Si, esto suponía usar imágenes incluso aunque el fondo fuese lo más simple del mundo, ahora nos podemos ahorrar unas cuantas peticiones al servidor.  :)