APRENDAMOS A DISEÑAR

BORDES COLORIDOS

AGREGÁNDOLE BORDES COLORIDOS A LA FIRMA

Muy buenas, a todos. Sé que en algún lugar del mundo es la 8:30 am
En este tutorial voy a explicarles sobre los bordes coloridos en las firmas. El “border-radius” o redondeado vendrá en la segunda parte de BORDES. Bien, un ejemplo de firma con bordes sería esta:
[Tienes que estar registrado y conectado para ver esa imagen]
Las barras de derecha e izquierda de color celeste vienen a ser los bordes. Veremos cómo se crean los mismos.
Pero ¿qué son los bordes o de qué sirven? El nombre de este atributo correctamente escrito en el code sería “border” y básicamente es un elemento decorativo. Establece algunas (derecha, izquierda, arriba o abajo) o todas las propiedades de todos los bordes de los elementos.
El code de los bordes estrictamente debe seguir el siguiente orden: Anchura, Estilo de borde y Color. "border: AApx estilo #color;”
Para la anchura lo más común, y recomendable, es la notación en pixeles, pero también existen tres medidas textuales que son: “thin” “médium” “thick” [Tienes que estar registrado y conectado para ver esa imagen]Reemplazando los pixeles por los valores textuales nos queda esto “border: medium estilo #color;”
Referente al estilo del borde tenemos ocho diferentes opciones: “solid” “dotted” “dashed” “double” “groove” “ridge” “inset” y “outset”.
[Tienes que estar registrado y conectado para ver esa imagen]
solid: El borde está formado por una línea recta continua.
dotted: El borde está formado por una serie de puntos separados por espacios.
dashed: El borde está formado por una serie de pequeños rayas intercaladas por espacios.
double: Borde doble. Está formado por dos líneas rectas continuas separadas entre sí por un espacio en blanco. El espacio depende de los pixeles usados. Mientras menor sea el número, el espacio es más pequeño por lo cual se puede ver como una simple línea y no como si fuera doble.
groove: Borde hundido que a simple vista parece que se encuentra por debajo del nivel de la superficie de la pantalla.
ridge: Borde saliente que a simple viste parece que se encuentra por encima del nivel de la superficie de la pantalla.
inset: Borde hundido. Provoca que el elemento que encierra parezca que se encuentra por debajo del nivel de la superficie de la pantalla.
outset: Borde saliente. Provoca que el elemento que encierra parezca que se encuentra por encima del nivel de la superficie de la pantalla.

1. Os mostraré el uso de bordes en imágenes, porque sí, también se puede colocar bordes en textos. Vale. Ya tenemos nuestro “div” con la imagen.

Código:

<center><div style="background-image: url(https://31.media.tumblr.com/652a76bc9377317685bb55682fcc931b/tumblr_inline_n0a1vyS4jp1s8rvnx.png); width: 500px; height: 210px;”></div></center>

En este caso he dejado el height a 220px y el width a 500px.
2. Ahora agregaré el “border” a 6px, con el estilo “ridge” y un tono azulado. Este atributo con sus tres valores los colocaré en el mismo “div” que el de la imagen.

Código:

<center><div style="background-image: url(https://31.media.tumblr.com/62428f0de7485b3bd9ae2474aa730d70/tumblr_inline_n17zvdG6ur1szis5a.png); width: 500px; height: 220px; border: 6px ridge #7882b9;"></div></center>

3. En lo personal, el estilo de “border” que me gusta más es el “double” pero colocándola en el mismo “div” que el de la imagen no se ve bien. Sale algo así:

Lo sé. En el espacio que se supone debería estar en blanco se ha copiado el background de la imagen y las líneas dobles ni se notan. Para arreglar esto abriré otro “div style” antes de el de la imagen y OJO, lo voy a cerrar después del otro div cerrado. Esto indica que este nuevo “div” contiene al de la imagen.

Código:

<center><div style="width: 500px; height:220px; border: 4px double #7882b9;"><div style="background-image: url(https://31.media.tumblr.com/62428f0de7485b3bd9ae2474aa730d70/tumblr_inline_n17zvdG6ur1szis5a.png); width: 500px; height: 220px; "></div></div></center>

¿Habéis visto? Es muy importante que a este nuevo “div” le asignéis el mismo width (ancho) y height (alto) que el de la imagen.
4. ¿Qué pasa si quiero el borde doble a los lados y el sólido arriba y abajo? Sencillo. El “border” puede ser especificado para cada una de las cuatro zonas así como también se puede especificar el color, por separado, de cada una de estas. Aunque es mucho embrollo y molesto a la hora de lidiar con el límite de caracteres, se los voy a explicar.
border-top: Establece algunas o todas las propiedades del borde superior de los elementos.
border-bottom: Establece algunas o todas las propiedades del borde inferior de los elementos.
border-right: Establece algunas o todas las propiedades del borde derecho de los elementos.
border-left: Establece algunas o todas las propiedades del borde izquierdo de los elementos.
En el code que ya tengo voy a dejar los bordes de lados a 4px en “double” y azulados. A los bordes de arriba y abajo igual los dejaré en 4px pero con “solid” y de un azulado más oscuro.

Código:

<center><div style="width: 500px; height:220px; border-right: 4px double #7882b9; border-left: 4px double #7882b9; border-top: 4px solid #505c97; border-bottom: 4px solid #505c97;"><div style="background-image: url(https://31.media.tumblr.com/62428f0de7485b3bd9ae2474aa730d70/tumblr_inline_n17zvdG6ur1szis5a.png); width: 500px; height: 220px; "></div></div></center>

El code va quedando mono poco a a poco. Recuerden que estos atributos del border los estoy colocando en el primer “div” que es el que viene antes de el de la imagen.
5. Pero como patosa que soy quiero que se vea mejor así que les voy a presentar un nuevo atributo el “padding” ¿Qué es? Es el que establece la anchura de algunas o todas las zonas de relleno de los elementos. La propiedad “padding” es tan poderosa que permite establecer una, dos, tres o las cuatro zonas de relleno de forma simultánea. Si se desea el mismo relleno para los cuatro lados se simplifica simplemente como: “padding: AApx” esto le indicará al navegador que debe crear un relleno equivalente a 4px de grosor en las cuatro zonas.
Si se indican dos valores, el primero hace referencia a los rellenos verticales y el segundo es el valor de los rellenos horizontales, algo así: “padding: AApx BBpx” El primero (AApx) irá representando al espacio de arriba y abajo; el segundo para derecha e izquierda.
En el code que ya tengo con los bordes como he querido, justo en el mismo “div” de los bordes, le voy a agregar el padding a unos 4px (para los valores verticales) y a 6px (para los horizontales). OJO, ustedes pueden agregarle el padding en el número que más les sea cómodo.

Código:

<center><div style="width: 500px; height:220px; border-right: 4px double #7882b9; border-left: 4px double #7882b9; border-top: 4px solid #505c97; border-bottom: 4px solid #505c97; padding: 4px 6px;"><div style="background-image: url(https://31.media.tumblr.com/62428f0de7485b3bd9ae2474aa730d70/tumblr_inline_n17zvdG6ur1szis5a.png); width: 500px; height: 220px; "></div></div></center>

La creación de un nuevo “div” que encierra al “div” de la imagen, junto con el padding son necesarios en tres tipos de bordes: “dotted” (puntos) “dashed” (líneas cortas) y “double” (líneas dobles). Los demás estilos de bordes van perfecto dentro del “div” de la imagen.
6. Finalmente vamos a aplicar lo aprendido de los bordes a los textos. Ejemplo:
[Tienes que estar registrado y conectado para ver esa imagen]
Básicamente le agregamos el “border” en el mismo “div” que el de nuestro texto. El texto simple sería este:

Código:

<center><link href="http://fonts.googleapis.com/css?family=Parisienne" rel="stylesheet" type="text/css"><div style="font-family:'Parisienne'; font-size:55px;color:#4da1a1; text-shadow: 1px 1px 1px black; line-height: 100%;">Preview</div></center>

Preview

Todo sencillo con el “line-height” al 100%. Ahora le voy a agregar un borde en estilo “dotted” a 2px y del mismo color a mi texto. PERO. Siempre hay un pero, en este caso deben agregarle un “width” (anchura) al “div” del texto ya que de lo contrario el borde seguirá infinitamente pues no hemos definido un límite. En este caso le pondré el ancho de 200px.

Código:

<center><link href="http://fonts.googleapis.com/css?family=Parisienne" rel="stylesheet" type="text/css"><div style="width: 200px; font-family:'Parisienne'; font-size:55px; color:#4da1a1; text-shadow: 1px 1px 1px black; line-height: 100%; border-bottom: 2px dotted #4da1a1">Preview</div></center>

Preview

Bien. Para agregar bordes a un texto secundario el “padding” es completamente necesario, de lo contrario las letras irían pegadas a los bordes lo cual no se ve bien estéticamente.
Sin padding este code de texto secundario con el "text-align" en "justify" con el “border” a 3px en estilo “solid” queda así:

TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO

Pero le voy a dar un “padding” de 4px aplicado a cada lado. Mi resultado es este:

Código:

<center><div style="width: 400px; font-family: verdana; font-size:12px; color: #00000; line-height: 100%; border: 3px solid #4da1a1; padding: 4px; text-align: justify;">TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO</div></center>

TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO

Se ve mucho mejor.
¿Preguntas? Por favor, dejadlas abajo.