Vamos a dar un pequeño repaso a la generación de bordes y como redondear esquinas con las hojas de estilo. Como ejemplo final verempos como crear un limón con CSS. Antes veamos un poco la definición de border en CSS
La propiedad border
es una de las «propiedades shorthand» que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales. En este caso, se trata de una de las propiedades shorthand más completas, ya que permite establecer hasta 12 propiedades de forma simultánea.
La propiedad border
se utiliza para establecer el mismo grosor, estilo y/o anchura de todos los bordes de un elemento. Al contrario que las propiedades margin y padding, con la propiedad border
no es posible indicar diferentes valores para cada uno de los cuatro bordes.
Como se trata de una de las propiedades más flexibles de CSS, su definición parece complicada, sobre todo en lo que se refiere a los valores permitidos («alguno o todos los siguientes valores y en cualquier orden»).
El uso más habitual de border
es el de establecer simultáneamente el grosor, estilo y color del borde de un elemento.
Bordes Básicos
Estamos familiarizados con la utilizacion de los bordes siguientes:
border: 1px solid black;
Con el código anterior aplicamos un borde de tamaño 1 pixel de color negro. También podemos cambiar un poco la sintaxis:
border-width: thick; border-style: solid; border-color: black;
Podemos varias el tamaño del borde, mas que el tamaño podemos pensar en el tipo de linea, como vemos en esta imagen:
Tal vez necesies cambiar el color del borde cuando el usuario se desplaza sobre un elemento específico. En estos caso es necesario repetir el valor de los pixel para que funcione correctamente, vemos un ejemplo:
.box { border: 1px solid red; } .box:hover { border: 1px solid green;
Una forma más elegante sería modificar solamente la propiedad que vamos a cambiar, el color del borde, en este caso tendríamos el siguiente código:
.box { border: 1px solid red; } .box:hover { border-color: green; }
Con esta técnica podremos crear formas personlizadas.
Border-Radius
border-radius
es una nueva propiedad para CSS3. Sirve para redondear las esquinas y lamentablemente no funciona con Internet Explorer 8.
Pra ver correctamente tienes que tener instalado un navegador actualizado.
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
Tambien podemos especificar distintos valores para cada lado
border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;
Podemos condensar todo en una sola línea de código:
/* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0;
Si nos fijamos el sentido es el de las agujas del reloj comenzando en el 12 para top left, 3 para top right, 6 para botton right y 9 para botton left.
Como ejemplo podemos dibujar la forma de un limón de este modo:
.limon { width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px; }
Como resultado tendremos en los distintos navegadores el mismo resultado, como podemos comprobar:
[twocol_one][singlepic id=139 w=320 h=240 float=left][/twocol_one] [twocol_one_last][singlepic id=140 w=320 h=240 float=left][/twocol_one_last] [twocol_one][singlepic id=141 w=320 h=240 float=left][/twocol_one] [twocol_one_last][singlepic id=142 w=320 h=240 float=left][/twocol_one_last]Hasta aquí podríamos darnos por satisfechos pero podemos añadir un poquito mas, como multiples bordes, modificación de ángulos y unos ejemplos mas. Como se está haciendo un poquito largo lo dejamos para una segunda parte.