El autor seleccionó el Fondo de Diversidad en Tecnología para recibir una donación como parte del programa Write for DOnations.
Introducción
Trabajar con sombras, bordes y contornos es un componente clave del desarrollo web y puede proporcionar definición visual alrededor de elementos HTML y elementos de texto. La apariencia de bordes y sombras se puede manipular a través de cinco propiedades principales de CSS: border, border-radius, box-shadow, text-shadow y outline. Las sombras proporcionan profundidad y ayudan a que los elementos se destaquen, mientras que las propiedades de border pueden realizar muchas funciones visuales diferentes, desde crear un divisor lineal entre contenido hasta definir el espacio de una cuadrícula. La propiedad border-radius crea esquinas redondeadas en cajas e incluso puede hacer una forma circular. Por último, outline es una propiedad a menudo pasada por alto que proporciona gran parte de la misma funcionalidad que la propiedad border sin interrumpir el flujo de contenido.
En este tutorial, trabajarás con estas propiedades para crear un aviso legal para una empresa ficticia de turismo espacial. A lo largo de la demostración, crearás contenedores visualmente ricos utilizando propiedades basadas en bordes. Además, tendrás en cuenta los matices sobre valores más complejos, como múltiples sombras y cómo diferentes navegadores pueden implementar ciertas propiedades de manera diferente.
Requisitos previos
- Comprensión de la cascada y la especificidad de CSS, que puedes obtener leyendo Cómo aplicar estilos CSS a HTML con cascada y especificidad.
- Conocimiento de selectores de tipo, selectores combinados y grupos de selectores, que puedes encontrar en Cómo seleccionar elementos HTML para estilizar con CSS.
- Comprensión de las propiedades de
coloren CSS. Consulta Cómo usar valores de color con CSS para obtener más información. - Conocimiento de degradados CSS con las propiedades de
background. Echa un vistazo a Cómo aplicar estilos de fondo a elementos HTML con CSS para adquirir experiencia en la creación de fondos degradados. - Un archivo HTML vacío guardado en tu máquina local como
index.htmlal que puedes acceder desde tu editor de texto y navegador web preferidos. Para empezar, consulta nuestro tutorial Cómo Configurar tu Proyecto HTML, y sigue las instrucciones de Cómo Usar y Entender los Elementos HTML para saber cómo ver tu HTML en tu navegador. Si eres nuevo en HTML, prueba toda la serie Cómo Construir un Sitio Web en HTML.
Configurando la Base HTML y CSS
En esta sección, configurarás la base HTML para todos los estilos visuales que escribirás a lo largo del tutorial. También crearás tu archivo styles.css y agregarás estilos que establezcan el diseño del contenido.
Empieza abriendo index.html en tu editor de texto. Luego, añade el siguiente HTML al archivo:
Hay una gran cantidad de configuraciones de página definidas dentro del elemento <head>. El primer elemento <meta> define el conjunto de caracteres a utilizar para el texto. De esta manera, la mayoría de los caracteres especiales, como las marcas de acento, se renderizarán sin códigos HTML especiales. El segundo elemento <meta> indica a los navegadores, y en particular a los navegadores móviles, cómo tratar el ancho del contenido; de lo contrario, el navegador simulará un ancho de escritorio de 960px. El elemento <title> proporciona al navegador el título de la página. El elemento <link> carga el archivo CSS en el que escribirás tus estilos a lo largo de este tutorial.
La página también necesitará contenido para estilizar. Para el texto legal, utilizarás contenido de ejemplo de Legal Ipsum como texto ficticio, destinado únicamente a fines de estilo.
Vuelve a index.html en tu editor de texto y agrega el HTML resaltado del siguiente bloque de código:
Guarda tus cambios en index.html y luego abre tu navegador web. Selecciona el elemento de menú Archivo y luego selecciona la opción Abrir y carga tu archivo index.html en el navegador. La siguiente imagen muestra cómo se renderizará este HTML en el navegador:
Crea un nuevo archivo llamado styles.css en el mismo directorio que index.html, luego ábrelo en tu editor de texto. Este archivo contendrá todos los estilos utilizados a lo largo del tutorial. El primer conjunto de estilos aplicará una estética general en la que construirás. Aplica el CSS del siguiente bloque de código a tu archivo styles.css:
El estilo en este archivo establece el diseño inicial de la página, con un aviso legal centrado, botones con espaciado y renderizados con un degradado lineal, y una imagen de la luna utilizada como fondo. Antes de continuar, asegúrate de guardar el archivo styles.css.
Para mostrar la imagen vinculada en la propiedad background del conjunto de reglas body, necesitarás la imagen de fondo de la luna. Primero, crea un directorio images en la misma carpeta que tu archivo index.html:
Usa tu navegador para descargar este archivo en tu directorio images recién creado, o utiliza el siguiente comando curl para descargarlo a través de la línea de comandos:
A continuación, vuelve a tu navegador y actualízalo. El navegador ahora renderizará y aplicará los estilos al contenido de la página. La siguiente imagen muestra cómo se renderiza la página completa:
La longitud del contenido hace que la página sea muy larga. Dado que esto está destinado como texto legal, el contenido de .legal-contents puede convertirse en un espacio con desplazamiento. Esto se hace mediante una combinación de las propiedades height, max-height, y overflow.
Para crear un área con desplazamiento, abre styles.css en tu editor de texto. A continuación, ajusta la altura del contenido legal con el siguiente código:
En este código, se creó una propiedad height en el bloque de selector .legal-contents, luego se estableció su valor en 50vh, lo que significa el 50% de la altura de la ventana del área de visualización. También se creó una propiedad max-height con su valor establecido en 20rem. Por último, se añadió una propiedad overflow con un valor de auto, lo que crea la barra de desplazamiento si el contenido se desborda del contenedor.
Guarda estas adiciones en tu archivo styles.css, luego regresa a tu navegador y actualiza index.html. La altura completa de la página y el contenedor principal se ha condensado. Ahora, el texto de Legal Ipsum puede desplazarse dentro de su contenedor designado, como se ilustra en la siguiente animación:
A lo largo de esta sección, se configuró el HTML principal que se utilizará durante el resto del tutorial. También se estableció un espacio desplazable con la propiedad overflow. En la próxima sección, trabajarás con la propiedad border para aplicar un borde a estos contenedores.
Utilizando la propiedad border
La propiedad border es una de las formas originales de aplicar estilos en los bordes de los elementos. Aplica una línea de cualquier color al perímetro exterior de un contenedor. El valor de la propiedad consta de tres componentes: el grosor, el estilo y el color. La propiedad border aplica estos valores a los cuatro lados de un elemento. Puedes especificar lados individuales con las variaciones de dirección de border, como la propiedad border-top, que se aplicará solo a la parte superior de un elemento.
Para empezar a trabajar con la propiedad border, abre styles.css en tu editor de texto y ve al selector de clase .disclosure-alert. Dentro del bloque del selector, agrega una propiedad border con un valor establecido en 1px sólido hsl(0, 0%, 0%), como se destaca en el siguiente bloque de código:
Esta propiedad border es una propiedad abreviada, lo que significa que su valor es una combinación de otros valores. En este caso, el grosor de 1px representa el valor de la propiedad border-width. Este valor puede ser cualquier valor numérico con una unidad junto con algunos valores nombrados: thin, medium y thick. A continuación, sólido es el valor de border-style, que define cómo aparecerá la línea alrededor del elemento, en este caso, como una línea sólida y continua. Otros valores para border-style incluyen punteado, guion, doble y ninguno. El valor final define la propiedad border-color, que puede ser cualquier valor de color válido.
Guarda tus cambios en styles.css, luego abre index.html en un navegador web. El contenedor de contenido principal ahora tendrá un borde delgado de color negro alrededor, lo cual es más evidente ya que se superpone a la imagen de fondo de la luna. La siguiente imagen representa cómo aparece el borde en el área de contenido principal:
A continuación, puedes usar la propiedad borde para crear una sensación de profundidad aplicando reflejos y sombras a un elemento. Puedes lograr esto utilizando un borde direccional en un lado que sea más claro que el color de fondo, luego un color más oscuro en el lado adyacente.
Regresa a styles.css en tu editor de texto, luego ve al bloque de selección de clase .disclosure-header. El linear-gradient() en la propiedad fondo define un degradado morado oscuro que transiciona a un tono ligeramente más oscuro. Para crear más profundidad que el degradado solo, ajusta el borde con el siguiente código:
Agregaste una propiedad borde-superior con un valor de 1px sólido hsl(300, 50%, 35%), que es un poco más claro que el valor de inicio del degradado. Luego, creaste una propiedad borde-inferior configurada con un valor de 1px sólido hsl(300, 50%, 5%), que es ligeramente más oscuro que el final del degradado.
Guarda tus cambios en styles.css, luego vuelve al navegador y actualiza index.html. El fondo morado del encabezado ahora tiene un ligero resaltado morado que atraviesa la parte superior del encabezado, y una ligera sombra a lo largo de la parte inferior. La siguiente imagen muestra cómo se verá esto en el navegador:
Dado que border es una propiedad abreviada, puedes agregar propiedades de forma larga adicionales. Se puede aplicar un border que define el ancho y el estilo de las dos clases de botón, mientras que un border-color se puede aplicar en las clases individuales.
Para empezar a trabajar con border-color, abre styles.css en tu editor de texto. En el bloque selector para .button, agrega una propiedad border con un valor de 1px solid, luego agrega una propiedad border-color para .button-primary y .button-secondary:
Esto define un borde de estilo 1px de ancho solid para ambos botones. Luego, agregaste una propiedad border-color para personalizar los colores de los selectores de .button-primary, .button-secondary y sus estados asociados :hover.
Guarda estos cambios en styles.css, luego actualiza la página en tu navegador web. Como se muestra en la siguiente imagen, los botones ahora tienen un poco más de definición proporcionada por un borde de color más oscuro coincidente:
Por último, cada dirección de border es también una propiedad abreviada. Esto significa que -width, -style y -color se pueden aplicar a cada propiedad de dirección. Por ejemplo, la propiedad de forma larga border-right-color solo aplicará un color al borde del lado derecho.
Para trabajar con estas propiedades de borde de escritura larga direccionales, regrese a styles.css en su editor de texto. Vaya al bloque de selector .legal-contents y establezca el ancho y el estilo para los cuatro lados del borde, luego personalice los colores de cada lado:
En este código, agregaste border: 1px solid al final del archivo. Después de eso, adicionalmente creaste las propiedades border-top-color, border-bottom-color, border-right-color y border-left-color. Para los valores, utilizaste diferentes valores hsl() para grises.
Guarde los cambios en styles.css, luego recargue la página en el navegador. El contenedor de contenido desplazable ahora tiene un borde gris oscuro a lo largo de la parte superior, un gris ligeramente más claro en los lados y un borde blanco en la parte inferior. Esto es para dar la percepción de que el contenido está empotrado detrás del fondo gris claro, causando un efecto donde el resalte está en el borde inferior, como se muestra en la siguiente imagen:
En esta sección, utilizaste la propiedad border y sus diversas variaciones de escritura larga. Creaste varios bordes, que se aplicaron a diferentes lados según fuera necesario. En la próxima sección, trabajarás con la propiedad border-radius, que permite que las esquinas de los contenedores sean redondeadas.
Aplicando un border-radius
Las esquinas redondeadas han sido una estética de diseño en la web mucho antes de que existiera la propiedad border-radius para lograr la tarea. Esta propiedad puede aceptar cualquier unidad numérica o valor porcentual, y es una propiedad abreviada como las propiedades margin o padding. Esto significa que cada esquina puede ajustarse individualmente según sea necesario.
Para comenzar a trabajar con la propiedad border-radius, abre styles.css en tu editor de texto. Ve al bloque selector .disclosure-alert y la propiedad border-radius. Luego, establece el valor en 1.5rem, lo que aplicará ese valor a las cuatro esquinas de la propiedad. El CSS resaltado en el siguiente bloque de código muestra cómo se escribe esto:
Guarda esta adición en styles.css luego abre o actualiza index.html en un navegador web. Solo las dos esquinas inferiores aparecerán redondeadas, mientras que las dos superiores permanecerán con bordes puntiagudos. La siguiente imagen ilustra cómo se renderiza esto en el navegador:
La razón por la que solo se ven dos esquinas redondeadas se debe a cómo interactúan los elementos descendientes entre sí en la web. El navegador tiende a mantener el contenido visible. El elemento .disclosure-alert tiene cuatro esquinas redondeadas, pero debido a que el elemento .disclosure-header está dentro del elemento y no tiene esquinas redondeadas, se superponen las esquinas redondeadas. Una solución rápida es agregar overflow: hidden a .disclosure-alert, lo que hace que el contenedor recorte cualquier contenedor y contenido descendiente. Sin embargo, este enfoque puede hacer que el contenido necesario sea ilegible o invisible. Una práctica mejor es aplicar un border-radius a la clase .disclosure-header para que coincida con la curva de la esquina de su ancestro.
Para ajustar las esquinas superpuestas, regrese a styles.css en su editor de texto. Vaya al bloque de selector .disclosure-header y agregue la propiedad border-radius. Dado que solo las dos esquinas superiores necesitan ajuste, el valor será 1.5rem 1.5rem 0 0:
El formato extendido de este valor aplicará una curva de 1.5rem a las esquinas superior izquierda y superior derecha.
Guarde los cambios en styles.css y actualice index.html en el navegador. Ahora, el encabezado morado tiene una esquina redondeada y no está cubriendo el contenedor principal. Sin embargo, ha surgido un nuevo problema, ya que un pequeño borde blanco del contenedor principal está asomando detrás del encabezado morado, como se muestra en la siguiente imagen ampliada:
Las esquinas tanto de .disclosure-alert como de .disclosure-header tienen el mismo tamaño de 1.5rem, pero sus anchos tienen una diferencia de tamaño. Esta diferencia de tamaño es causada por el borde en el lado izquierdo y derecho del elemento .disclosure-alert. Dado que el ancho del borde es de 1px en ambos lados, la diferencia de tamaño es de 2px o 0.125rem. Para que las curvas coincidan, el valor de border-radius para .disclosure-header necesita ser 0.125rem más pequeño de lo que es actualmente. Cambia los valores de border-radius de 1.5rem a 1.375rem, como se destaca en el siguiente bloque de código:
Guarda este cambio en styles.css y luego actualiza la página en el navegador web. La delgada franja de blanco ya no está y las curvas de los dos elementos coinciden en el lugar adecuado. La siguiente captura de pantalla ampliada muestra cómo se alinean estas curvas:
Por último, aplicarás una esquina redondeada a los botones en la parte inferior del contenedor principal. Estos botones tendrán una forma de píldora, con una parte superior e inferior larga y plana y lados completamente redondeados. Para lograrlo, el valor de border-radius debe ser un valor basado en unidades más grande que la altura del elemento.
Para hacer un botón con forma de píldora, abre styles.css en tu editor de texto. En el bloque de selección .button, agrega la propiedad border-radius y luego establece el valor en 2rem. Esto puede ser un número arbitrario siempre que sea mayor que la altura calculada, la combinación del font-size, line-height, padding y border-width que pueden afectar la altura total de un elemento. El CSS resaltado en el siguiente bloque de código muestra dónde agregar esta propiedad:
Hay dos cosas a tener en cuenta sobre este enfoque. La primera es que no se establece un valor de height en este elemento. Debe evitarse establecer un valor de height, ya que el contenido puede y estará en una posición de flujo fuera del contenedor. Al evitar un height establecido, el botón puede crecer para que coincida con el contenido total. La segunda es que esto no funcionará correctamente con un valor basado en porcentaje. Los valores basados en porcentaje en una propiedad border-radius curvan un porcentaje de la altura y la anchura, lo que provoca una forma ovalada en lugar de una esquina redondeada.
Guarda tus cambios en styles.css, luego regresa al navegador y actualiza index.html. La página ahora mostrará dos botones oblongos con forma de píldora, como se muestra en la siguiente imagen:
A lo largo de esta sección, se utilizó la propiedad border-radius para aplicar esquinas redondeadas a múltiples elementos, descubriendo que un border-radius no impide que los elementos descendientes salgan del espacio curvo. También se ajustó el valor de un border-radius para que coincidiera con el ancho de un elemento cuando se superponen varios elementos redondeados. En la siguiente sección, se utilizará la propiedad text-shadow para aplicar sombras a contenido de texto.
Utilizando la propiedad text-shadow
Aplicar sombras al texto tiene muchos usos en el desarrollo web cotidiano. Las sombras pueden crear profundidad, un efecto de resplandor o ayudar al texto a destacarse en lugares donde podría pasarse por alto. A lo largo de esta sección, aplicarás text-shadow a múltiples elementos para crear varios efectos visuales.
La propiedad text-shadow consta de hasta cuatro valores: desplazamiento en el eje x, desplazamiento en el eje y, radio de desenfoque y color. Como ejemplo, los valores podrían lucir así: 2px 4px 10px red. De estos cuatro valores, solo los valores de desplazamiento son obligatorios. El color de la sombra por defecto es el color del texto.
Para comenzar a trabajar con text-shadow, empezarás creando un efecto de resplandor en el encabezado. Abre styles.css en tu editor de texto y ve al selector de clase .disclosure-header. Dentro del bloque selector, agrega la siguiente propiedad text-shadow:
A glow effect means the color will emanate from every edge of the text, so the x- and y-axis offset values here are set to 0. You set the blur for the glow to 0.375rem (equivalent to 6px) to give a subtle halo of color to the text. Lastly, the color value was set to a bit darker than the color property: hsl(300, 50%, 50%).
Guarda esta adición en tu archivo styles.css. Luego, abre index.html en un navegador web. El texto del encabezado en negrita sobre el fondo de degradado morado ahora tiene un resplandor de un morado intermedio alrededor de él. La siguiente imagen ilustra cómo se renderiza este efecto en el navegador:
A continuación, se pueden colocar varias sombras en elementos de texto, lo que permite crear un efecto en relieve en el texto. Este efecto se logra colocando una sombra de color más claro debajo del objeto y una sombra de color más oscuro arriba.
Para crear un efecto en relieve, vuelve a styles.css en tu editor de texto. El efecto se agregará a los botones en la parte inferior del contenedor. Para los selectores .button-primary, .button-primary:hover, .button-secondary y .button-secondary:hover, agrega una propiedad text-shadow. Revisa el CSS resaltado en el siguiente bloque de código para los valores:
La primera sombra es un resalte más claro en el fondo inferior. Esto se hace con el desplazamiento de 0 1px, luego la versión más clara de los matices del degradado de fondo. Luego, haces la sombra sobre el texto con un desplazamiento de 0 -1px, que eleva la sombra 1px y utiliza una variación más oscura de los colores de fondo.
Guarda estos cambios en styles.css, luego actualiza la página en tu navegador web. El texto dentro de los botones ahora tiene un ligero resalte debajo del texto y una ligera sombra encima del texto. La combinación de estos valores de text-shadow crea el efecto en relieve tal como se muestra en la siguiente imagen:
En esta sección, aplicaste la propiedad text-shadow a algunos elementos. Creaste un efecto de resplandor en el encabezado y un efecto en relieve con múltiples sombras en los botones. En la próxima sección, aplicarás sombras a los elementos HTML con la propiedad box-shadow.
Agregando box-shadow a los Elementos
Así como la propiedad text-shadow permite que el contenido de texto tenga sombras, la propiedad box-shadow permite que los elementos y contenedores también tengan sombras. La propiedad box-shadow tiene dos características adicionales que explorarás a lo largo de esta sección, incluida la capacidad de controlar la difusión del desenfoque y establecer la sombra dentro del elemento.
Para comenzar a trabajar con la propiedad box-shadow, abre styles.css en tu editor de texto. En el bloque de selector .disclosure-alert, agrega la propiedad box-shadow. Al igual que con text-shadow, los valores de desplazamiento en los ejes x e y son necesarios, y si no se proporciona un color, se utiliza el valor de la propiedad color. Para esta primera box-shadow, establece los desplazamientos en 0, el desenfoque en 0.5rem, y el color en un oscuro hsl(300, 40%, 5%), como se destaca en el siguiente bloque de código:
Guarde los cambios en styles.css y actualice la página en su navegador web. Ahora hay una sombra casi negra que se extiende desde el contenedor. También tenga en cuenta que la sombra respeta y sigue las curvas que creó con la propiedad border-radius. La siguiente imagen muestra cómo se renderiza esto en el navegador:
A continuación, vuelva a styles.css y comience a crear un efecto más complejo agregando dos efectos de resplandor adicionales grandes al box-shadow. Agregue una coma entre cada nueva sombra, estableciendo cada una para que tenga un desplazamiento en el eje y de 0.5rem. Luego, configure grandes desenfoques y use variaciones más claras del azul y morado de la paleta de colores, como se destaca en el siguiente bloque de código:
El orden de estas sombras es importante. La primera sombra con el color casi negro se presentará por encima de las nuevas sombras, y cada sombra subsiguiente se agrega detrás de la siguiente.
Guarde los cambios en styles.css y actualice la página en su navegador. Como se ilustra en la siguiente imagen, la combinación de múltiples sombras crea un efecto único:
La función de difuminado de extensión de la propiedad box-shadow se puede utilizar para crear una sensación de profundidad. El valor de extensión acepta valores tanto positivos como negativos. Un valor de extensión negativo combinado con un desplazamiento y difuminado fuertes crea una sombra que se siente distante y lejos del contenedor fuente.
Para comenzar, regrese a styles.css en su editor de texto. Entre la pequeña sombra oscura y la sombra azul más grande en el selector .disclosure-alert, agregue el siguiente CSS destacado del bloque de código:
Esta adición al conjunto de sombras mantiene el desplazamiento del eje x en 0, pero mueve considerablemente el eje y a 6rem. A continuación, el desenfoque no es tan grande como el resplandor, pero tiene un tamaño decente de 4rem. Luego viene el valor de extensión del desenfoque, que en este caso se establece en -2rem. El valor predeterminado para la extensión es 0, que es igual al contenedor. Con -2rem, la extensión se condensará hacia adentro desde el contenedor para crear un efecto visual de profundidad.
Guarda tus cambios en styles.css, luego actualiza index.html en el navegador. La sombra es de un color morado profundo que crea la sensación de que el cuadro de contenido principal flota muy por encima de la superficie de la luna, como se muestra en la siguiente imagen:
Otro uso de un box-shadow es crear un ligero efecto de resalte y sombra biselada, como hiciste anteriormente con la propiedad border en el encabezado. La ventaja de usar un box-shadow en lugar de un border es que no afecta al modelo de caja, lo que provoca desplazamientos en el flujo de contenido. También se puede usar en conjunto con un border. Al usar este efecto con un border, se debe agregar el valor inset al box-shadow para que la sombra esté dentro del contenedor.
Para comenzar a usar un valor inset en la propiedad box-shadow, abre styles.css en tu editor de texto. Este efecto se agregará a los botones, por lo que aplicarás estos estilos a .button-primary, .button-primary:hover, .button-secondary y .button-secondary:hover. Al igual que con el text-shadow, esto consistirá en una combinación de desplazamiento de 0 1px y 0 -1px. La diferencia es que la palabra inset puede agregarse al principio o al final del valor, como se destaca en el siguiente bloque de código:
Guarda estos cambios en styles.css y luego actualiza index.html en tu navegador. Ahora, los botones tienen un resaltado y una sombra, similar al texto. Esto, junto con el fondo degradado, crea un efecto simple pero distinguido para los botones. La siguiente imagen muestra cómo se renderiza esto en el navegador:
Por último, también puedes aplicar un valor de difuminación al esparcir una sombra interior. El esparcimiento mueve el punto de inicio del desenfoque hacia afuera desde el borde, pero al usar inset, el esparcimiento mueve el punto de inicio hacia adentro. Esto significa que cuando se aplica un valor negativo al esparcimiento en un inset, la sombra se expande fuera del área de visualización del elemento. La expansión hacia afuera del esparcimiento puede crear una sombra que parezca un degradado corto. Esto puede crear la ilusión de que un elemento tiene redondeo en los bordes, ya que la sombra se aplica debajo del contenido del elemento.
Para comenzar a crear este efecto, abre styles.css en tu editor de texto. Navega hasta el selector de clase .legal-contents y agrega una propiedad box-shadow. Esta sombra consistirá en tres sombras. La primera establecerá una sombra corta alrededor del interior de todo el contenedor, y las siguientes dos proporcionarán una sombra ligera alargada en la parte superior e inferior del elemento. El CSS destacado en el siguiente bloque de código demuestra cómo se configura esto:
Guarda tus cambios en styles.css, luego actualiza la página en el navegador. Las sombras ahora están creando un efecto que hace que el texto legal parezca estar colocado como una ventana en el contenedor. Las sombras también ayudan a realzar los colores de borde que se aplicaron a este elemento. La siguiente imagen ilustra cómo se renderiza esto en el navegador:
En esta sección, pusiste en práctica la propiedad box-shadow. También utilizaste las características de difuminado, extensión e inset de box-shadow para permitir más opciones de estilo. En la última sección, implementarás la propiedad outline, luego usarás box-shadow para crear un outline más versátil.
Usando la Propiedad outline
La última propiedad que afecta a los bordes de los elementos es la propiedad outline. En todos los navegadores, el estado :focus de los elementos se realiza utilizando la propiedad outline. Sin embargo, la implementación por defecto del estilo :focus de cada navegador varía significativamente. La propiedad outline es similar a la propiedad border, excepto por dos diferencias clave: no tiene variaciones de propiedad direccional y no afecta al modelo de caja. Esta última de esas dos diferencias la hace ideal para los estilos :focus, ya que proporciona un indicador visual del elemento activo sin interrumpir el flujo de contenido.
Para observar el valor predeterminado del navegador de un estado :focus, abre index.html en tu navegador. Utiliza la tecla TAB para navegar por la página hasta que uno de los botones inferiores tenga el foco. Dependiendo del navegador que estés utilizando, es posible que puedas ver o no los estilos :focus por defecto. Por ejemplo, Firefox muestra un contorno punteado blanco, pero no es perceptible sobre el fondo gris claro. La siguiente imagen muestra de izquierda a derecha cómo aparece el estilo de foco predeterminado en Firefox, Safari y Chrome:
Para comenzar a personalizar tu propio estado :focus con la propiedad outline, abre styles.css en tu editor de texto. Ve al selector de clase .button y añade la propiedad outline:
Al igual que la propiedad border, el valor para outline incluye un ancho, estilo y valor de color. Dado que el objetivo de un estado de enfoque es llamar la atención sobre un elemento, el ancho aumenta a 0.25rem, que es equivalente a 4px. A continuación, estableces el estilo en solid, para que el estado de enfoque sea más similar al de Safari y Chrome. Por último, estableces el color en un azul profundo con hsl(200, 100%, 50%).
Guarda tus cambios en styles.css, luego regresa a tu navegador y actualiza la página. Una vez más, el navegador determina cómo se representa el outline. La siguiente imagen muestra cómo se ven estos estilos en Firefox, Safari y Chrome, de izquierda a derecha:
En los tres navegadores, la propiedad outline se muestra de manera bastante diferente. Firefox se ajusta firmemente alrededor de toda la forma redondeada del botón. Safari crea un cuadro de ángulo recto, pero toca los bordes del botón. Chrome es similar a Safari, pero agrega algo de espacio adicional entre el botón y el outline.
Para crear un estilo que se parezca al de Firefox en todos los navegadores, es necesario usar box-shadow en lugar de outline.
Para comenzar a crear un estado de :focus más personalizado, regresa a tu archivo styles.css en tu editor de texto. Lo primero que debes hacer es deshabilitar el estilo predeterminado del navegador para outline cambiando el valor en el selector .button:focus de outline a none, como se destaca en el siguiente bloque de código:
A continuación, descienda hasta los selectores button-primary:hover y button-secondary:hover y agregue una coma seguida de una variación de estado :focus, como se destaca en el siguiente bloque de código:
Finalmente, cree dos nuevos selectores para el :focus de cada botón, .button-primary:focus y .button-secondary:focus. Dentro de los nuevos bloques de selector, agregue una nueva propiedad box-shadow con las mismas sombras interiores que en sus contrapartes :hover, :focus. Luego, agregue otra sombra a la serie con los desplazamientos y el desenfoque establecidos en 0. Después de eso, agregue una propagación de 0.25rem, lo que creará una línea sólida y no difuminada alrededor del elemento. Finalmente, agregue el mismo color a ambas instancias. El CSS destacado en el siguiente bloque de código muestra cómo se escribe esto:
Guarde estos cambios en styles.css y regrese a su navegador para actualizar index.html. Ahora, al usar la tecla TAB para navegar por la página, independientemente del navegador, el estilo :focus en los botones se verá igual. La siguiente imagen muestra cómo aparece la versión box-shadow de un contorno en el navegador junto con toda la página:
Esta última sección te introdujo a la propiedad outline y cómo cada navegador la utiliza de diferentes maneras. Como mínimo, se necesita un indicador :focus para la accesibilidad, y la propiedad outline cumple con esa función. Expandiendo sobre esto, también creaste un estilo :focus más avanzado y visualmente consistente al crear una box-shadow con un valor de propagación grande.
Conclusión
Dar estilo a los bordes de los elementos permite que el diseño de un sitio web gane variedad y atención. La propiedad border puede ayudar a proporcionar definición y separación entre el contenido. La propiedad border-radius suaviza la estética y ayuda a definir la actitud del diseño. Las sombras en el texto y en las cajas aportan profundidad y ayudan a centrar la atención en el contenido. Por último, la propiedad outline proporciona formas accesibles de destacar elementos con enfoque de teclado. En este tutorial, utilizaste todas estas propiedades para crear una página web visualmente interesante y utilizable. Comprender cada una de estas propiedades y cómo y cuándo usarlas ayudará a resolver todo tipo de problemas de interfaz frontend y crear nuevas experiencias.
Si deseas leer más tutoriales de CSS, prueba los otros tutoriales en la serie Cómo Estilizar HTML con CSS.