La propiedad border-radius es la que nos permite "redondear" los bordes de casi cualquier un objeto:
-moz-border-radius: 10px; // en Firefox -webkit-border-radius: 10px; // en Chorme y Safari border-radius: 10px; // la propiedad según al w3.org
No es necesario que se redondeen los cuatro lados; funciona de manera similar a la propiedad border así que el orden es el mismo: arriba/izquierda arriba/derecha abajo/derecha y abajo izquierda así que podemos poner cuatro valores distintos:
-moz-border-radius: 10px 20px 30px 40px; -webkit-border-radius: 10px 20px 30px 40px; border-radius: 10px 20px 30px 40px;
si ponemos un solo valor: -moz-border-radius: 10px;
será lo mismo que escribir: -moz-border-radius: 10px 10px 10px 10px;
si ponemos dos valores:-moz-border-radius: 20px 5px;
será lo mismo que escribir: -moz-border-radius: 20px 5px 20px 5px;
si ponemos tres valores: -moz-border-radius: 20px 5px 20px;
será lo mismo que escribir: -moz-border-radius: 20px 5px 20px 5px;
Además, cada uno de ellos tiene una propiedad especial que también puede ser utilizada:
-moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft
-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-right-radius -webkit-border-bottom-left-radius
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
Ahora bien, cuando pensamos en esto, nos imaginamos "círculos", obviamente, la palabra radius nos indica eso, el valor que le ponemos es el valor del radio de un círculo; tanto es así que podemos crear un círculo casi perfecto.
Si tenemos un elemento que mide 100x100 y le ponemos a border-radius un valor de 50, el resultado será esto:
será lo mismo que escribir: -moz-border-radius: 10px 10px 10px 10px;
si ponemos dos valores:-moz-border-radius: 20px 5px;
será lo mismo que escribir: -moz-border-radius: 20px 5px 20px 5px;
si ponemos tres valores: -moz-border-radius: 20px 5px 20px;
será lo mismo que escribir: -moz-border-radius: 20px 5px 20px 5px;
Además, cada uno de ellos tiene una propiedad especial que también puede ser utilizada:
-moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft
-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-right-radius -webkit-border-bottom-left-radius
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
Ahora bien, cuando pensamos en esto, nos imaginamos "círculos", obviamente, la palabra radius nos indica eso, el valor que le ponemos es el valor del radio de un círculo; tanto es así que podemos crear un círculo casi perfecto.
Si tenemos un elemento que mide 100x100 y le ponemos a border-radius un valor de 50, el resultado será esto:
Pero eso no es todo, en realidad, border-radius es una propiedad que también permite crear elipses y para eso, separamos los valores con una barra inclinada; por ejemplo:
-moz-border-radius: 20px / 5px; -webkit-border-radius: 20px / 5px; border-radius: 20px / 5px;
En esos casos, el primer valor es el radio horizontal y el segundo, el radio vertical.
10 comentarios:
Que bien... es magistral!! si tan solo los navegadores nos ayudaran un poquitico con aquello de los estándares... (guiño-guiño)(sueño-sueño) :)
Me encanta la manera tan simple que tienes de explicar todo. Gracias a ti al fin puedo modificar mi plantilla que desde hace años lo desea hacer. Ayer me acosté en la madrugada haciendo muchas cosas a mi blog de pruebas. Muchas gracias por toda tu ayuda :P
Eclipsada me he quedado yo :S
Hola JMiur, off topic. ¿Como puedo pasar el crosscol de estar arriba al footer? El footer de mi plantilla no tiene lugar para hacerlo ¿como lo agrego?
Gracias
Felipe:
Úsese sólo cuando se está despierto. Caso contrario, no me hago responsable :-D
Gracias por el comentario Yeli :D
Gem@:
Interesante ¿no? Habrá que probar.
Claudio:
El crosscol es una sección y el footer es otra. No puede colocarse una sección dentro de la otra; lo que puedes hacer s mover su contenido.
Si en cambio, quieres mover la sección crosscol abajo, basta que sin expandir los artilugios, copies el DIV completo y lo pegues arriba o debajo del DIV del footer pero no adentro.
@JMiur
JMiur, ante la imposibilidad de hacerlo, redirijo la pregunta, ¿como genero un espacio para agregarlo al footer, dividio a su vez en tres columnas? gracias
No sé que quieres mover con exactiud. Si se trata de un gadget, simplemente lo arrastras en la primera plantilla de diseño.
Excelente ya lo aplique en mi nuevo blog de curiosidades..
Es bueno, pero no para internet explorer que aun que no queramos reconocerlos es el navegador mas usado, tendras algun tip para este?
Yo n oreconozco n idejo de reconocer. Cada cual utiliza el navegador que más le guste y eso será así siempre. Ninguno es mejor que otro, sólo son diferentes.
Esta es una propiedad que no funcionará en versiones de IE inferiores a la 9 pero, carece de importancia ya que simplemente es ignorada. Puede simularse utilizando scripts diversos.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...