CSS

Los bordes con CSS y un limón

10 abril, 2012

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:

CSS: border width

CSS: border width

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;
CSS3: border-radius

CSS3: border-radius

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] [/twocol_one] [twocol_one_last] [/twocol_one_last] [twocol_one] [/twocol_one] [twocol_one_last] [/twocol_one_last]

Ver ejemplo funcionando

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.

También podría gustarte

Sin Comentarios

Dejar un Comentario