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
	Licencias directas en la música Published On Jul-03-2017 Derecho Musical Transcripción Cabe destacar que este sistema de licencias
	Editando sobre la marcha: bases y overdubs Published On Mar-08-2017 -Planeamiento y Grabación de un Proyecto Musical Transcripción Tomemos un minuto para analizar la linealida
	Compás cuatro por cuatro Published On Apr-11-2017 -Conceptos Básicos de Armonía y Métrica Transcripción Dentro de la música popular actual, existen
	Canciones para álbumes compilatorios Published On Dec-14-2016 Edición y publicación de composiciones, negociaciones y contratos Transcripción. A lo largo de los años, el negocio musi
	Funciones armónicas de un campo armónico mayor Published On Apr-17-2017 TM-Introducción a la Armonía Transcripción Ahora que hemos aprendido el concepto de ca
	¿EQ para controlar Feedbacks? Published On Mar-08-2017 Técnicas Aplicadas para el Sonido en Vivo Transcripción Uno de los problemas que más preocupan a l
	Composición de secuencias rítmicas Published On Feb-22-2018 Producción y Diseño de Sonido para Música Electrónica TranscripciónLa composición de secuencias rítmicas
	Aplica con precisión diseños a páginas web: impacto del selector CSS Published On Jan-28-2019 Introducción al Diseño Web Con la finalidad de aplicar con precisión diseños a pág
	Conclusión Published On Mar-31-2017 Introducción al Music Business Management Transcripción Durante esta lección analizamos la importa
	La onda de sonido Published On Dec-12-2017 Teoría del Sonido Transcripción. ¿Qué es realmente el sonido? Entendem
	Conclusión Published On Mar-09-2017 Introducción al Manejo de Presupuestos Transcripción Como hemos visto, el dinero es un
	Reglas generales de comportamiento Published On May-15-2017 -Comunicación y el Servicio al Cliente TranscripciónSon tantas cosas a las que se debe prestar at
	HD01210_L8_10 Published On Jun-24-2017 Instrumentación y Orquestación
	Los cinco acordes disminuidos Published On Sep-20-2018 Teoría Musical Avanzada Transcripción Continuaremos nuestro estudio de los acor
	Masterización: herramientas en software Published On May-18-2018 Técnicas de Mastering Transcripción A pesar de que es posible configurar sistema
	Fomenta la integración del personal: inducción y culturización Published On Jul-28-2019 -Gestión de producción, técnica y de riesgos ¿Qué beneficios se obtienen al implementar un proceso de
	Inicia con Melodyne: instalación y activación Published On Nov-15-2019 -Melodyne: Fundamentos operativos El primer paso para incorporar Melodyne en
	Estructura rítmica con cinco corcheas consecutivas desde el pulso dos, parte I Published On Jul-21-2017 Solfeo Avanzado I Transcripción Con la intención de ampliar los alcan
	Superposición de ondas Published On Sep-05-2018 Acústica Conceptual Transcripción Dos grupos de personas que emprendan la solu
	Ajuste tímbrico por sección: automatización vs. multing Published On Mar-31-2018 Técnicas de Mezcla Transcripción Una vez que cada instrumento ha s
	Asegura un programa social exitoso: importancia de la segmentación en el marketing social Published On Apr-17-2020 -Fundamentos del Comportamiento del Consumidor La segmentación añade valor a los procesos del marketing
	Cualidades de la música Published On Nov-30-2017 TM-Fundamentos para la Creación Musical en el DAW Transcripción ¿Qué es la música? La música
	Equilibra las necesidades del cliente y el uso de los recursos: estructuras organizativas Published On Jul-15-2019 -Fundamentos para producción de eventos ¿De qué manera podemos lograr un equilibrio entre las ne
	Promueve la autopromoción de la marca: técnicas anti-spam Published On May-22-2020 -Impacto de la Tecnología en la Psicología y Comportamiento del Consumidor La autopromoción de las marcas es sumamente importante pa
	Formalismo en la creación de un arreglo Published On Aug-22-2018 Arreglos Orquestales I Transcripción En muchos aspectos de nuestra vida, el orden
	Flujo de señal entre bloque de entrada y procesamiento Published On Nov-24-2016 Curso de Prueba Importacion Transcripción. Continuemos integrando el sistema de nues
	El reverb en la masterización Published On May-30-2018 Técnicas de Mastering Transcripción Comúnmente hemos escuchado que el reverb se
	Prepara instrumentaciones eficaces: características del registro de las maderas Published On Jan-18-2021 -Técnicas de Instrumentación y Orquestación Acústica La familia de viento-madera de una orquesta sinfónica est
	Problemas en la compra de medios: En los tipos de televisión Published On Jul-08-2017 Media Planning Transcripción Los comerciales, también conocidos como spo
	Las disputas entre stakeholders: métodos Published On Jul-05-2017 Ética Profesional Transcripción Los métodos integrativos de resolució

Ú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