Capta la atención a textos específicos de una página web: bordes con sombras

Published On Jan-29-2019

Con el propósito de captar la atención de usuarios en textos específicos de una página web, aplicaremos los bordes con sombras en documentos CSS. Por desconocimiento de las propiedades exactas de las sombras, muchas veces se muestran en páginas web sin vistosidad. Para evitarlo, identificaremos los diferentes valores para box-shadow y text-shadow.

La propiedad box-shadow del lenguaje CSS permite crear sombras en bordes con algunos o todos los siguientes valores:

Desplazamiento horizontal: para definir el grosor de la sombra de abajo.
Desplazamiento vertical: para definir el grosor de la sombra a la derecha.
Distancia para el desenfoque: para definir la medida donde empieza a desenfocarse la sombra.
Distancia de dispersión: para definir la medida de dispersión, es decir, cuánto se extiende la sombra.
Color: para definirlo bien sea decimal, hexadecimal o en inglés.
Posición de la sombra: para mostrar la sombra dentro o fuera de la caja CSS.

061-01_0705_ilu01. Valores de sombras

Para especificar la propiedad text-shadow, es necesario tanto el desplazamiento horizontal como el vertical, de lo contrario, la sombra no será mostrada por el navegador web. Es posible especificar ambos con el mismo tamaño, sin embargo, es necesario definir ambos números para ser interpretados correctamente por el navegador web. En la siguiente imagen tenemos un ejemplo correcto e incorrecto de ello.

061-01_0705_ilu02. Creación de desplazamientos de una sombra

Si utilizamos números positivos en los desplazamientos de box-shadow, la sombra se muestra debajo y a la derecha del elemento; al aplicar números negativos, se ubica arriba y a la izquierda. En la siguiente ilustración observamos ambos ejemplos para ver con claridad la diferencia.

061-01_0705_ilu03. Sombras con números negativos y positivos

En el ejemplo de la siguiente imagen tenemos dos definiciones de bordes distintos, uno con nombre de clase “uno” y otro “dos” a fin de visualizar la diferencia entre desenfoque y desplazamiento:

061-01_0705_ilu04. Sombra con desenfoque y desplazamiento

En el párrafo clase uno: definimos como tercer valor tres píxeles, por ende, se empieza a difuminar la sombra del elemento a partir de este número.
En el párrafo clase dos: definimos como cuarto valor ocho píxeles, por ende, la sombra comienza mostrarse más hacia la esquina del elemento.

Para definir la posición de la sombra dentro de la caja CSS, es necesario agregar al final de box-shadow la palabra inset. Además, con la finalidad de mostrar una sombra en todo alrededor, especificamos en el cuarto valor el doble del desplazamiento, como se muestra en el siguiente ejemplo:

061-01_0705_ilu05. Sombra dentro y alrededor de la caja CSS

Keynotes

Para especificar la propiedad text-shadow, es necesario tanto el desplazamiento horizontal como el vertical, de lo contrario, la sombra no será mostrada por el navegador.
Si utilizamos números positivos en los desplazamientos de box-shadow, la sombra se muestra debajo y a la derecha del elemento; al aplicar números negativos, se ubica arriba y a la izquierda.
Para definir la posición de la sombra dentro de la caja CSS, es necesario agregar al final de box-shadow la palabra inset.

Reto

Aplica tres diferentes tipos de bordes con sombras en un documento CSS. Es necesario seguir la recomendación oficial de este lenguaje.

¡Comparte el resultado final de tu reto es VKTV y pide a tres compañeros comentar cómo lo hacen ellos!

Tiempo disponible: entre 15 y 30 minutos.

Aplicar para una beca

Me interesa graduarme de una
carrera en VonKelemen

Vonkelemen Master Instructors

Related Videos
	Conclusión Published On Mar-09-2017 Administración Empresarial Transcripción Durante esta lección, conocimos qué
	Un Tresillos y Tres Quintillos Published On May-28-2018 Solfeo Avanzado II Transcripción Uno de los conceptos más importantes con los
	In The Box vs Out of The Box Published On Feb-28-2018 Integración de Sistemas Transcripción Desde la aparición de los sistemas digi
	Elección del Diseño Published On Nov-27-2018 -Producción de Materiales Creativos Transcripción Al momento de diseñar, las elecciones perso
	Network: Configuración en red local (LAN) Published On May-31-2018 Steinberg Nuendo Expert TranscripciónSupongamos que tenemos un proyecto y deseamos
	Narrativa interactiva Published On May-30-2018 Producción y Diseño de Sonido para Audiovisuales Transcripción Para comprender las implicaciones operativas
	Conclusión Published On Sep-05-2019 -Campos Armónicos Menores, Escalas Pentatónicas y Compases Compuestos Transcripción La teoría musical puede ser apasionant
	Buenos directores vs. Malos directores Published On Mar-15-2017 -El Director y su Oficio Transcripción La tarea de dirigir un grupo de músicos pu
	Algoritmos de audio elástico (tiempo) Published On Mar-27-2017 -Principios Básicos del Proceso de Mezcla Transcripción Al igual que el timestretch, el audio elásti
	Cómo encontrar el manager adecuado Published On Mar-03-2017 Participantes de la Industria Transcripción Todo artista necesita personal manager.
	Teclados Power Metal Published On Mar-16-2017 Arreglos para Banda II Transcripción Desde Stratovarius, los teclados se convir
	Resumen Published On Mar-03-2017 -Integración de Equipo: Business Manager, Agente y Productor TranscripciónDurante esta lección hemos explorado el pa
	Código de tiempo Published On May-05-2018 Steinberg Nuendo Expert TranscripciónSupongamos que estamos trabajando el sonido p
	Accede intuitivamente a los parámetros de mezcla de uso más frecuente: mapeo de Quick Controls a un controlador MIDI Published On Nov-23-2020 -Producción audiovisual y gestión de archivos Quick Controls – Controlador MIDI Configuremos un con
	Introducción Published On Oct-01-2019 Teoría Musical Transcripción Muchas veces al componer una canción, se bu
	Conectando la Consola al PA Published On Mar-31-2017 TM-Operación de Consolas de Mezcla Transcripción Una vez que hemos realizado la mezcl
	HD00203_L9_11 Published On Jun-30-2017 Producción y Diseño de Sonido para Música Electrónica
	Impulsa tu negocio en medios digitales: embajadores en las marcas actuales Published On Apr-19-2020 -Introducción al Marketing Digital En la actualidad, las personas se han tornado en consumido
	Diseño de la estructura organizacional Published On Dec-30-2017 Administración Empresarial Transcripción Pocos temas de administración han evo
	Introducción Published On Nov-22-2016 -Equipamiento del Front of House TranscripciónHasta ahora, hemos discutido los detalles sob
	Duración y costo de la masterización Published On Mar-09-2017 Producción Musical Básica Transcripción Duración¿Cuándo tiempo toma master
	La perseverancia y la persistencia Published On Mar-15-2017 Desarrollo de la Creatividad Transcripción Un refrán popular dice que “el hábi
	Fades: Curva exponencial Published On Mar-10-2017 -Edición Correctiva Transcripción La curva exponencial presenta característica
	Entradas Digitales Published On Nov-24-2016 Curso de Prueba Importacion Transcripción. Hasta ahora, los equipos analizados aport
	Métodos de pago y cargo automático Published On Oct-30-2017 Reglamento Estudiantil Métodos de pago y cargo automático Puedo realizar mis pa
	Los bongos Published On Jan-04-2018 Arreglos de Percusión Transcripción Además de las congas, los bongos o bongoe
	Entiende la importancia de los recursos técnicos misceláneos: configuración y uso Published On Jan-28-2020 -Gestión de producción, técnica y de riesgos ¿Cuál es la importancia de conocer el consumo de energía
	Guitarra eléctrica (rítmica) Published On Apr-05-2017 TM-Técnicas de Postproducción II Transcripción En esta canción, contamos con dos gui
	Timestretch: demostración Published On Dec-27-2017 -Edición Restaurativa e Implicaciones Prácticas de Edición Transcripción Veamos cómo aplicar timestretch utilizando
	Aplica transiciones creativas entre canciones con diferentes tempos: función Pitch Bend Published On May-20-2021 Steinberg Wavelab Expert En algunos casos, la masterización toma licencia creativa

Únete a VonKelemen

Así aparecerán tu nombre y tu apellido en tus certificados

Tu email debe ser válido para el envío de tus certificados

Hombre Mujer

Cumpleaños

Día

Para verificación de identidad y envío de tus diplomas

Quiero tener acceso ilimitado a cursos gratuitos

Quiero recibir ofertas y productos gratuitos

Quiero verificar por Whatsapp

vonkelemen premium

Miles de vídeos HD con los secretos mejor guardados de los VonKelemen Master Instructors.

Aprende con los profesionales más importantes y relevantes del mundo,
granadores de múltiples premios Grammy y Billbord

más info

Moogie Canazio

Nathan East, Ray Charles, Sarah Vaughan, Dionne Warwick, Luis Miguel, Caetano Veloso, Eric Clapton, Diana Ross, Selena, Tom Jobim, João Gilberto, Maria Bethânia, Ivan Lins...
más info

Rafa Sardina

Stevie Wonder, D'Angelo, Lady Gaga, Celine Dion, Cristian Castro, Michael Jackson, Alejandro Fernandez, Mariah Carey, Plácido Domingo, Illya Kuriaki & The Valderramas, Shakira...
más info

Sebastian Krys

Sergio Dalma, Eros Ramazzotti, Sandy e Junior, Gloria Estefan, Carlos Vives, Shakira, Alejandro Sanz, Luis Fonsi, Vega, Kinky, Los Rabanes, Obie Bermúdez, Ricky Martin...
más info

Benny Faccone

Santana, Sting, Michael Jackson, Stevie Wonder, Dizzy Gillespie, Whitney Houston, Luis Miguel, Ricky Martin, Los Fabulosos Cadillacs, Maná, Barbra Streisand, Patti LaBelle...
más info

Peter Doell

Toto, War, Elton John, The Beach Boys, Celine Dion, Hans Zimmer, Ray Charles, Miles Davis, Marilyn Manson, R.E.M., Ben Harper, Tom Jones, Adam Lambert, Chuck Berry, Lynyrd...
más info

Colin Liebich

Brian Vibberts (ganador de múltiples premios Grammy), CJ Vanston (Productor de Toto, Chic Corea, Spinal Tap), Billy Sheehan...
más info

Brent Fischer

Usher, Paul McCartney, Robert Palmer, D’Angelo, Joao Gilberto, Carlos Santana, Raphael Saadiq, Michael Jackson, Prince, Al Jarreau, Toni Braxton, Eric Benet...

Me interesa

Selecciona tu membresía

Mensual	Anual
$29/mes	$290/año
Acceso ilimitado a todo el contenido PREMIUM	Acceso ilimitado a todo el contenido PREMIUM
Contrato anual, facturado mensualmente	Contrato anual, prepagaso
Suscribirme	Suscribirme
$29/mes	$290/año

Capta la atención a textos específicos de una página web: bordes con sombras

Login

vonkelemen premium

Moogie Canazio

Rafa Sardina

Sebastian Krys

Benny Faccone

Peter Doell

Colin Liebich

Brent Fischer