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
	Micrófonos Published On Jul-26-2017 Acústica Conceptual Transcripción El oído es un sistema integrado de captaci�
	Cadencias rotas de intercambio modal: acordes del segundo y tercer grado bemolado Published On Sep-02-2020 Armonía Avanzada I Transcripción En las cadencias rotas también está pres
	Unidades fundamentales y derivadas Published On Dec-12-2017 Teoría del Sonido Transcripción. Entender verdaderamente las unidades es vit
	¿Cómo utilizar las inserciones en la grabación y en la mezcla? Published On Dec-28-2017 -Consolas de mezcla: Flujo de señal básico TranscripciónEl punto de inserción permite agregar todo t
	Celesta Published On Mar-09-2017 -Conceptos Básicos de Instrumentación y Orquestación Transcripción La celesta presenta la forma de un pequeño
	Mi primera producción profesional Published On May-04-2018 Entrevista con Jeren Johnson
	Introducción Published On Jul-30-2017 Historia de los Compositores Occidentales Transcripción El siglo veinte trajo consigo, también, la
	Retrologue: Síntesis analógica virtual Published On Feb-18-2019 -Steinberg Cubase LE Retrologue es uno de los instrumentos virtuales más podero
	Ordenamientos simétricos: adornos Published On May-25-2018 Armonía Avanzada II Transcripción Los ordenamientos simétricos pueden ser apl
	Adopta un estilo de vida exitoso: tres principios para el éxito profesional Published On Mar-15-2019 Artist Management Un estilo de vida exitoso requiere la observancia de deter
	Máxima organización y variación en el tiempo del proyecto: Markers y Tempo Track Published On Jan-22-2020 -Cubase: métodos de grabación y arreglo instrumental En la música, las canciones suelen tener variaciones de v
	Crea contenidos altamente comprensibles: lenguaje acorde a la población Published On Dec-10-2018 Introducción a las Relaciones Públicas Las campañas de relaciones públicas tienen como objetivo
	Plan de negocios: escenarios Published On Aug-03-2017 Media Planning Transcripción La estructura financiera también contiene
	Batería (parte I) Published On Mar-16-2017 Arreglos para Banda II Transcripción A continuación, estudiaremos algunos ritm
	Patchbays Published On Feb-28-2018 -Configuración de Estudios de Grabación Profesionales TranscripciónAl utilizar configuraciones más complejas co
	Benny Faccone \| Establece redes de contacto: negociando a través del internet. Published On Jun-11-2018 -Técnicas de negocios para el productor musical Transcripción Las habilidades para establecer redes d
	Análisis de direccionalidad Published On Dec-14-2017 -Gestión avanzada de la sesión de grabación Transcripción ¿Cómo se selecciona un micrófono de acu
	Acordes híbridos a partir de una escala locria Published On Nov-29-2019 -Introducción a la Armonía Modal Transcripción Continuaremos el estudio de los acordes hí
	De la inspiración a la realización Published On Dec-27-2017 -Composición Avanzada y Colaboraciones en la Industria Transcripción Ahora estudiaremos el proceso de llevar
	Comunicación Published On Mar-15-2017 Introducción a la Administración de Proyectos Transcripción El proceso de comunicación es la herram
	Escalas comunes para improvisar en un campo armónico menor Published On Jan-25-2020 -Técnicas de Improvisación con Escalas Pentatónicas Transcripción Ahora, se estudiarán las escalas para
	Análisis I Published On Sep-02-2017 Arreglos para Banda II Transcripción A continuación, analizaremos algunas ca
	Definir la estructura de la canción Published On Dec-31-2017 -Ritmos, Patrones y Estructuras Transcripción Supongamos que escribimos una melodía
	Introducción Published On Mar-25-2017 Conceptos Musicales Transcripción Esta lección estará dedicada a uno de los
	Estimación de los gastos de estructura y Gastos Financieros Published On Mar-09-2017 Introducción al Manejo de Presupuestos Transcripción • Gastos de estructura Los ga
	La música de cámara y la iglesia en el siglo XVII Published On Jun-25-2017 Historia de la Música Transcripción Así como el Barroco consistía en música m
	Exposición de datos para la toma de decisiones \| Operaciones, parte II Published On Aug-22-2017 Presupuestos y Calendarios Transcripción Ahora, tratemos de analizar la forma e
	Fades: tipos de curvas Published On Mar-10-2017 -Edición Correctiva Transcripción Diferentes DAWs ofrecen opciones distiontas e
	Bajo eléctrico Published On Jan-17-2018 Ecualización y Compresión Aplicada Transcripción Hasta este punto, hemos mencionado la importa
	¿Por qué reverberación artificial? (Parte II) Published On Mar-13-2017 Efectos de Tiempo y Efectos de Fase Transcripción A continuación, se discutirán diversos as

Ú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