Cuando se diseña una Web o la plantilla de un blog los espacios que lo forman son rectángulos o cajones, unos dentro de otros. Cada uno de los rectángulos tiene un borde, que puede ser visible o no, algo que se decide a través de la propiedad CSS Border. En la versión HTML5, el código HTML principal lo que hace es asignar un nombre, una identidad y un valor semántico a cada uno de los rectángulos. Pero su aspecto lo decidiremos a través del código CSS: con la propiedad Border podemos modificar el aspecto de cada uno de los lados de la caja de forma individual. Se pueden variar 3 aspectos: su estilo, su color, su tamaño y el redondeo de las puntas. Las tres primeras propiedades de los bordes son propiedades CSS3 que ya estában en versiones anteriores del CSS, mientas que el redondeo (border-radius) es una propiedad nueva que ha surgido con la versión CSS3.
El estilo de los bordes.
La propiedad para el estilo es el border-style y su valor se expresa a través de una palabra que definirá el aspecto del borde. Los bordes habituales tienen la caracterísitca solid, que es una línea normal. Esta es la propiedad principal del borde.
A continuación observamos diferentes valores que pueden existir para el tipo de borde. Abajo tienes la explicación y a la derecha una imagen mostrando el aspecto de estos bordes sin tener color.
El color de los bordes.
La propiedad es border-color y el valor es un número de 6 cifras que expresan un color RGB, tal y como puedes ver en este artículo. Un ejemplo de la sintaxis del color de los bordes sería esta:
selector {border-color:#003366; }
El tamaño de los bordes.
La propiedad es border-width y el valor del grosor del margen se puede expresar en píxeles, en porcentages o en centímetros. Un ejemplo de la sintaxis del color.
selector {border-width:10px; }
El redondeo de los bordes.
La propiedad es border-radius, y su valor indica el radio del giro de la curva. Si el valor es grande la curva se vuelve mayor. A la derecha puedes ver como quedan los diferentes estilos de bordes con el redondeo que aporta la propiedad border-radius de CSS3.
Un ejemplo de esta propiedad sería.
selector {border-radius: 5px; }
Dar un estilo diferenciado a cada lado del margen.
Hasta el momento hemos visto como usar las propiedades CSS3 para dar un aspecto uniforme a todo el borde de un cuadrado, pero también podemos dar un aspecto diferenciado a cada uno de los lados, o de las esquinas del margen. Para ello se añadirá una palabra adicional: bottom, left, right, top.
Por ejemplo, si queremos crear una línea en el lado izquierdo y dejar el resto sin ser visible.
selector {
border-rigth-style:solid ;
border-right-width:10px;
border-bottom-style:none;
border-top-style:none;
border-left-style:none;}
Personalizando el redondeo de los bordes
Y también se puede personalizar la curvatura de los bordes de cada esquina. Por un lado cada uno de los bordes puede estar más o menos redondeado (igual que hemos realizado ahora con las líneas de los costados). Por otro lado las curvaturas del redondeo se pueden hacer asimétricas de forma que la curvatura sea más pronunciada en un lado o en el otro.
Un ejemplo de como se pueden colocar diferentes radios a la curvatura de las esquinas.
selector {border-radius: 5px, 10px, 30px, 5px; }
o biene esta.
selector (
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;)
Al igual que podemos dar bordes con el lenguaje CSS, también es posible hacerlo directamente con el lenguaje HTML o con un Javascript. Para los que esteis interesados en profundizar sobre el tema os recomiendo este post de Vagabundia.
La propiedad para el estilo es el border-style y su valor se expresa a través de una palabra que definirá el aspecto del borde. Los bordes habituales tienen la caracterísitca solid, que es una línea normal. Esta es la propiedad principal del borde.A continuación observamos diferentes valores que pueden existir para el tipo de borde. Abajo tienes la explicación y a la derecha una imagen mostrando el aspecto de estos bordes sin tener color.
- None: sin bordes.
- Dotted: bordes puntuados.
- Dashed: bordes con una línea discontinua.
- Solid: borde de una línea continua y sólida.
- Double: borde con dos líneas.
- Groove: borde en 3D acanalado.
- Ridge: borde en 3D estriado.
- Inset: borde en 3D hacia dentro.
- Outset: borde en 3D hacia afuera.
El color de los bordes.
La propiedad es border-color y el valor es un número de 6 cifras que expresan un color RGB, tal y como puedes ver en este artículo. Un ejemplo de la sintaxis del color de los bordes sería esta:
selector {border-color:#003366; }
El tamaño de los bordes.
La propiedad es border-width y el valor del grosor del margen se puede expresar en píxeles, en porcentages o en centímetros. Un ejemplo de la sintaxis del color.
selector {border-width:10px; }
El redondeo de los bordes.
La propiedad es border-radius, y su valor indica el radio del giro de la curva. Si el valor es grande la curva se vuelve mayor. A la derecha puedes ver como quedan los diferentes estilos de bordes con el redondeo que aporta la propiedad border-radius de CSS3.
Un ejemplo de esta propiedad sería.
selector {border-radius: 5px; }
Dar un estilo diferenciado a cada lado del margen.
Hasta el momento hemos visto como usar las propiedades CSS3 para dar un aspecto uniforme a todo el borde de un cuadrado, pero también podemos dar un aspecto diferenciado a cada uno de los lados, o de las esquinas del margen. Para ello se añadirá una palabra adicional: bottom, left, right, top.
Por ejemplo, si queremos crear una línea en el lado izquierdo y dejar el resto sin ser visible.
selector {
border-rigth-style:solid ;
border-right-width:10px;
border-bottom-style:none;
border-top-style:none;
border-left-style:none;}
Personalizando el redondeo de los bordes
Y también se puede personalizar la curvatura de los bordes de cada esquina. Por un lado cada uno de los bordes puede estar más o menos redondeado (igual que hemos realizado ahora con las líneas de los costados). Por otro lado las curvaturas del redondeo se pueden hacer asimétricas de forma que la curvatura sea más pronunciada en un lado o en el otro.
Un ejemplo de como se pueden colocar diferentes radios a la curvatura de las esquinas.
selector {border-radius: 5px, 10px, 30px, 5px; }
o biene esta.
selector (
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;)
Al igual que podemos dar bordes con el lenguaje CSS, también es posible hacerlo directamente con el lenguaje HTML o con un Javascript. Para los que esteis interesados en profundizar sobre el tema os recomiendo este post de Vagabundia.
0 comentarios:
Publicar un comentario