Repasos CSS: Bordes | Envato Tuts+

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Claro, todos estamos familiarizados con los bordes. ¿Hay algo nuevo que pueda ser introducido? ¡Bueno, apuesto a que hay un par de cosas en este artículo acerca de las que usted aún no sabía!

No sólo CSS3 se puede utilizar para crear esquinas redondeadas, sino que el simple y común CSS también se puede forzar para la visualización de formas personalizadas. Es correcto, en el pasado, antes de que se descubrieran estas técnicas, podríamos haber recurrido a usar imágenes de fondo absolutamente posicionadas para mostrar círculos o flechas. Afortunadamente - mientras alegremente damos un paso más lejos de Photoshop - este ya no es el caso.

Las Bases

Es probable que esté familiarizado con el uso más básico de los bordes.

1	border: 1px solid black;

El código anterior aplicará un borde 1px a un elemento. Así de simple; pero también podemos modificar la sintaxis un poco.

1	border-width: thick;
2	border-style: solid;
3	border-color: black;

Además de pasar un valor específico a border-width, alternativamente pueden usarse tres palabras clave: thin, medium y thick.

Si bien inicialmente puede parecer innecesario utilizar el método código-completo, hay un puñado de casos cuando esto tiene sus ventajas, como cuando necesita actualizar algún aspecto de un borde al ocurrir un evento designado.

Tal vez usted necesita para cambiar el color de un borde cuando el usuario pasa el cursor sobre un elemento específico. Utilizando la forma abreviada requeriría que repita los valores de píxeles.

.box {
    border: 1px solid red;   
}

.box:hover {
    border: 1px solid green;
}

Un enfoque más elegante y DRY sería actualizar específicamente la propiedad border-color.

.box {
    border: 1px solid red;   
}

.box:hover {
    border-color: green;
}

Adicionalmente, como veremos en breve, esta técnica no-abreviada es útil cuando se crean formas personalizadas con CSS.

Border-Radius

border-radius es el hijo dorado de CSS3 - la primera nueva propiedad que obtuvo un uso generalizado en la comunidad. Lo que quiere decir es que con exclusión de Internet Explorer 8 e inferiores, todos los navegadores pueden mostrar esquinas redondeadas.

Anteriormente, era necesario usar prefijos de proveedor tanto para Webkit como para Mozilla para que el estilo se aplicara correctamente.

1	-webkit-border-radius: 10px;
2	-moz-border-radius: 10px;
3	border-radius: 10px;

En estos días sin embargo, podemos quitar los perfijos de proveedor sin preocupaciones y simplemente seguir con la forma oficial: border-radius.

Como es de esperar, también podemos especificar valores personalizados para cada lado de una caja.

1	border-top-left-radius: 20px;
2	border-top-right-radius: 0;
3	border-bottom-right-radius: 30px;
4	border-bottom-left-radius: 0;

En el código anterior, establecer border-top-right-radius y border-bottom-left-radius a cero sería superfluo, a menos que el elemento esté heredando valores que necesiten ser reseteados.

De la misma manera que margin o padding, estos ajustes se pueden condensar en una sola propiedad si es necesario.

1	/* top left, top right, bottom right, bottom left */
2	border-radius: 20px 0 30px 0;

Como ejemplo (y como lo hacen los diseñadores web con tanta frecuencia), la forma de un limón se puede reproducir con CSS y la propiedad border-radius así:

.lemon {
   width: 200px; height: 200px; 

   background: #F5F240;
   border: 1px solid #F0D900;      
   border-radius: 10px 150px 30px 150px;
}

Mas Allá de las Bases

Muchos diseñadores se adhieren felizmente al conocimientos expuesto hasta ahora en este capítulo; sin embargo ¡existen algunas maneras en que podemos potenciarlo aún más!

Bordes Múltiples

Existe una variedad de técnicas a las que podemos referirnos, cuando nos encargamos de aplicar múltiples bordes a un elemento.

Border-Style

Si bien solid, dashed y dotted son los valores más frecuentes para la propiedad border-style, también hay algunas otras de las que podemos hacer uso, incluyendo groove y ridge.

1	border: 20px groove #e3e3e3;

O con la forma no-abreviada:

1	border-color: #e3e3e3;
2	border-width: 20px;
3	border-style: groove;

Mientras que esto es ciertamente de ayuda, un efecto ridge o groove no se refiere precisamente a bordes múltiples.

Contorno

La técnica más popular para crear dos bordes es aprovechar la propiedad outline.

1	.box {
2	border: 5px solid #292929;
3	outline: 5px solid #e3e3e3;
4	}

Este método funciona maravillosamente, sin embargo está limitado a dos bordes. Si usted necesita crear un efecto de capa degradada, será necesario un enfoque diferente.

Pseudo Elementos

Cuando la técnica de outline no es suficiente, un enfoque alternativo es aprovechar los pseudo elementos :before y :after y aplicar los bordes adicionales necesarios al contenido generado.

.box {
  width: 200px; height: 200px;
  background: #e3e3e3;
  position: relative;

  border: 10px solid green;  
}

/* Create two boxes with the same width of the container */
.box:after, .box:before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.box:after {
  border: 5px solid red;
  outline: 5px solid yellow;
}

.box:before {
  border: 10px solid blue;
}

Este quizás no es el enfoque más elegante, pero sin duda hace el trabajo. Una desventaja es que es fácil confundir el orden en que se aplicarán los colores del borde. Un cierto nivel de "adivinar y comprobar" a menudo se requiere para aplicar la secuencia correcta.

Sombra de Caja

La manera que utilizan los chicos cool para crear un número infinito de bordes es aprovechar el parámetro spread en la propiedad CSS3 box-shadow.

.box {
    border: 5px solid red;
     box-shadow: 
       0 0 0 5px green, 
       0 0 0 10px yellow,
       0 0 0 15px orange;
}

En este caso, estamos siendo inteligentes y estamos usando la box-shadow de una manera que no necesariamente pudo haber sido la intención original cuando la especificación se escribió.

Al establecer los componentes x, y y blur en 0, podemos usar el valor spread para crear bordes sólidos en las ubicaciones deseadas. Debido a que las box-shadows se pueden apilar mediante el uso de una coma, el número de niveles posibles es infinito.

Esta técnica degrada graciosamente muy bien. En los navegadores más antiguos, los cuales no reconocen la propiedad box-shadow, esto simplemente renderizará el único borde rojo de 5px.

Recuerde: los diseños no necesitan ser idénticos en todos los navegadores. Escriba su CSS para el más moderno de los navegadores, y luego proporcione respaldos adecuados de acuerdo a la situación.

Modificando Ángulos

Además de pasar un valor único a border-radius, podemos alternativamente proporcionar dos valores - separados por un / - para especificar valores únicos para los radios horizontal y vertical.

Por ejemplo…

1	border-radius: 50px / 100px; /* horizontal radius, vertical radius */

…es equivalente a:

1	border-top-left-radius: 50px 100px;
2	border-top-right-radius: 50px 100px;
3	border-bottom-right-radius: 50px 100px;
4	border-bottom-left-radius: 50px 100px;

Esta técnica es particularmente útil cuando se necesita imitar una curva sutil y larga, en vez de una esquina redondeada genérica. Por ejemplo, el siguiente código nos permite separarnos ligeramente de una forma cuadrada, resultando en efecto más curvado, similar al papel.

.box {
    width: 200px; height: 200px;
    background: #666;

    border-top-left-radius: 15em 1em;
    border-bottom-right-radius: 15em 1em;

}

Formas CSS

Quizás el mejor uso de los bordes es cuando se aplican inteligentemente a los elementos que tienen un ancho y una altura cero. ¿Confuso verdad? Veamos una demostración.

Para todos los ejemplos a continuación, asuma el siguiente marcado...

1	<div class="box"></div>

...y el siguiente estilo base:

.box {
   width: 200px;
   height: 200px;
   background: black;
}

El ejemplo referenciado con más frecuencia, al demostrar cómo se pueden utilizar las formas CSS en un proyecto, consiste en crear la flecha obligatoria.

La clave para entender cómo se puede formar una flecha con CSS es establecer un border-color único a cada lado y, a continuación, reducir los valores de width y height del contenedor a 0.

Asumiendo un div con una clase de arrow como el contenedor:

.arrow {
  width: 0; height: 0;

  border-top: 100px solid red;
  border-right: 100px solid green;
  border-bottom: 100px solid blue;
  border-left: 100px solid yellow;  
}

Como se demostró al principio de este capítulo, una sintaxis más limpia sería el no usar la versión abreviada que abarca todo:

.arrow {
  width: 0; height: 0;

  border: 100px solid;  
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

Incluso podemos reducir esto aún más, agrupando los valores de color.

.arrow {
  width: 0; height: 0;

  border: 100px solid;
  border-color: red green blue yellow;
}

¿Interesante, verdad? Sin embargo, tiene mucho sentido si damos un paso atrás. Esa es la única forma posible en que los colores podrían alinearse, asumiendo una propiedad width y una propiedad height de cero para el contenedor. Ahora, ¿qué pasa si ponemos todos los colores de borde a transparente, excepto para el lado azul?

.arrow {
  width: 0; height: 0;

  border: 100px solid;
  border-bottom-color: blue;
}

¡Excelente! Pero no parece demasiado semántico para crear un div de .arrow, todo con el propósito de agregar una flecha a la página. En su lugar, se pueden utilizar pseudo elementos para aplicar la flecha después o antes del elemento asociado.

Creand una Burbuja de Texto

Para crear una burbuja de texto de 100% CSS, comenzamos con el marcado.

1	<div class="speech-bubble">Hi there!</div>

A continuación, se debe aplicar un estilo base.

.speech-bubble {
    position: relative;
    background-color: #292929;

    width: 200px;
    height: 150px;
    line-height: 150px; /* vertically center */

    color: white;
    text-align: center;
}

La flecha se aplicará con el pseudo elemento after.

1	.speech-bubble:after {
2	content: '';
3	}

Los pseudo elementos :before y :after se pueden utilizar para insertar el contenido generado bien sea antes o después del contenido de un elemento.

En este punto, es simplemente una cuestión de reproducir la flecha y posicionarla en la ubicación correcta. Empezaremos por posicionar absolutamente el contenido, restableciendo width y height y aplicando los colores de borde.

.speech-bubble:after {
  content: '';
  position: absolute;

  width: 0;
  height: 0;

  border: 10px solid;
  border-color: red green blue yellow;
}

Debido a que sabemos que queremos que la flecha apunte hacia abajo, la imagen anterior demuestra que todos excepto el borde rojo (o superior) deben omitirse o establecerse en transparente.

.speech-bubble:after {
  content: '';
  position: absolute;

  width: 0;
  height: 0;

  border: 10px solid;
  border-top-color: red;
}

Al crear formas CSS, como no podemos usar la propiedad width para especificar que tan ancha debería ser la flecha, debería entonces utilizarse la propiedad border-width. En este caso, la flecha debe ser ligeramente más grande; Por lo que border-width puede aumentarse a 15px. También colocaremos la flecha en la parte inferior y en el centro del contenedor, usando las propiedades top y left respectivamente.

.speech-bubble:after {
  content: '';
  position: absolute;

  width: 0;
  height: 0;

  border: 15px solid;
  border-top-color: red;

  top: 100%;
  left: 50%;
}

Ya casi estamos allá; el paso final es actualizar el color de la flecha para que sea el mismo que el del fondo del contenedor. El posicionamiento también necesita ser modificado para tener en cuenta el ancho de los bordes (15px). Mientras estamos aquí, también aplicaremos un sutil border-radius para hacer que el contenedor sea más parecido a una burbuja.

.speech-bubble { 
   /* … other styles */
   border-radius: 10px;
}

.speech-bubble:after {
  content: '';
  position: absolute;

  width: 0;
  height: 0;

  border: 15px solid;
  border-top-color: #292929;

  top: 100%;
  left: 50%;
  margin-left: -15px; /* adjust for border width */
}

¿Nada mal, verdad? Aparte este código para unas cuantas clases reutilizables, y ya está listo para todos los proyectos futuros.

/* 
   Speech Bubbles
   Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION
   <div class="speech-bubble speech-bubble-top">Hi there</div>
*/

.speech-bubble {
  position: relative;
  background-color: #292929;

  width: 200px;
  height: 150px;
  line-height: 150px; /* vertically center */

  color: white;
  text-align: center;
  border-radius: 10px;

  font-family: sans-serif;
}

.speech-bubble:after {
  content: '';
  position: absolute;

  width: 0;
  height: 0;

  border: 15px solid;
}


/* Position the Arrow */

.speech-bubble-top:after {
  border-bottom-color: #292929;

  left: 50%;
  bottom: 100%;
  margin-left: -15px;   
}
.speech-bubble-right:after {
  border-left-color: #292929;

  left: 100%;
  top: 50%;
  margin-top: -15px;    
}

.speech-bubble-bottom:after {
  border-top-color: #292929;

  top: 100%;
  left: 50%;
  margin-left: -15px;   
}

.speech-bubble-left:after {
  border-right-color: #292929;

  top: 50%;
  right: 100%;
  margin-top: -15px;    
}

Bono: Mejor Centrado Vertical

Una desventaja al usar line-height para centrar verticalmente el texto es que usted está limitado a una sola línea. Si el texto requiere dos o más líneas, cada altura de línea será demasiado grande. Una solución inteligente es establecer un display de table para la burbuja de texto y un display de table-cell al párrafo que envuelve el texto. Esto nos permite alinear el texto al centro de manera consecuente.

1	<div class="speech-bubble speech-bubble-top">
2	<p>Text goes here.</p>
3	</div>

A continuación, el CSS modificado.

.speech-bubble {
 /* other styles */

  display: table;
}

.speech-bubble p {
  display: table-cell;
  vertical-align: middle;
}

Si las referencias a display: table traen de vuelta terribles recuerdos de diseños pasados de moda basados en tablas, no se preocupe. Estas propiedades se refieren simplemente al estilo en el que un elemento debe mostrarse.

No estamos limitados a triángulos; CSS es capaz de producir todo tipo de formas - ¡incluso corazones y signos de riesgo biológico!

.biohazard {
  width: 0; height: 0;

  border: 60px solid;
  border-radius: 50%;

  border-top-color: black;
  border-bottom-color: black;
  border-left-color: yellow;
  border-right-color: yellow;
}

Resumen

Aunque es cierto que la simple sintaxis de propiedad border: 1px solid black nos hace recorrer un largo camino, si somos inteligentes, podemos crear una variedad de útiles efectos, íconos y formas. ¿Quién habría pensado que los bordes podrían ser tan poderosos? La clave es recordar que el estilo para formas comunes o burbujas de texto sólo se debe crear una vez y luego ser abstraído a clases utilitarias para su uso futuro.