HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tutorial CSS

CSS INICIO Introducción a CSS Sintaxis CSS Selectores de CSS CSS Cómo Comentarios CSS Colores CSS
Colors RGB HEX HSL
Fondos CSS
Background Color Background Image Background Repeat Background Attachment Background Shorthand
Bordes CSS
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
Márgenes CSS
Margins Margin Collapse
Relleno CSS Altura/ancho de CSS Modelo de caja CSS Esquema CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Texto CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Fuentes CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Iconos CSS Enlaces CSS Listas CSS Tablas CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Pantalla CSS Ancho máximo de CSS Posición de CSS Índice Z de CSS Desbordamiento de CSS CSS flotante
Float Clear Float Examples
Bloque en línea CSS Alinear CSS Combinadores de CSS Pseudo-clase CSS Pseudoelemento CSS Opacidad CSS Barra de navegación CSS
Navbar Vertical Navbar Horizontal Navbar
Menús desplegables de CSS Galería de imágenes CSS Sprites de imagen CSS Selectores de atributos CSS Formularios CSS Contadores CSS Diseño del sitio web CSS Unidades CSS Especificidad CSS CSS !importante Funciones matemáticas CSS

CSS Avanzado

Esquinas redondeadas CSS Imágenes de borde CSS Fondos CSS Colores CSS Palabras clave de color CSS Gradientes CSS
Linear Gradients Radial Gradients Conic Gradients
Sombras CSS
Efectos de sombra Sombra de la caja
Efectos de texto CSS Fuentes web CSS Transformaciones CSS 2D Transformaciones CSS 3D Transiciones CSS Animaciones CSS Información sobre herramientas de CSS Imágenes de estilo CSS Reflejo de imagen CSS Ajuste de objeto CSS Posición del objeto CSS Enmascaramiento CSS Botones CSS Paginación CSS Columnas múltiples de CSS Interfaz de usuario de CSS Variables CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Tamaño del cuadro CSS Consultas de medios CSS Ejemplos de CSS MQ Caja flexible de CSS
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

Responsivo CSS

Introducción a la tracción trasera Vista de RWD Vista de cuadrícula RWD Consultas de medios RWD Imágenes de RWD Vídeos de RWD Marcos RWD Plantillas RWD

Cuadrícula CSS

Introducción a la cuadrícula Contenedor de rejilla Elemento de cuadrícula

CSS SASS

Tutorial de SASS

Ejemplos de CSS

Plantillas CSS Ejemplos de CSS prueba css Ejercicios CSS Certificado CSS

Referencias CSS

Referencia CSS Selectores de CSS Funciones CSS CSS Referencia Aural Fuentes web seguras CSS CSS Animable Unidades CSS Convertidor CSS PX-EM Colores CSS Valores de color CSS Valores predeterminados de CSS Compatibilidad con navegador CSS

Sombra de caja CSS

❮ Anterior Próximo ❯

Propiedad CSS box-shadow

La propiedad CSS box-shadowse usa para aplicar una o más sombras a un elemento.

Especifique una sombra horizontal y vertical

En su uso más simple, solo especifica una sombra horizontal y una vertical. El color predeterminado de la sombra es el color del texto actual.

Un elemento <div> con una sombra de caja

Ejemplo

Especifique una sombra horizontal y una vertical:

div {
  box-shadow: 10px 10px;
}

Especifique un color para la sombra

El colorparámetro define el color de la sombra.

Un elemento <div> con una sombra de caja gris

Ejemplo

Especifique un color para la sombra:

div {
  box-shadow: 10px 10px grey;
}

Agregue un efecto de desenfoque a la sombra

El blurparámetro define el radio de desenfoque. Cuanto mayor sea el número, más borrosa será la sombra.

Un elemento <div> con una sombra de caja gris borrosa de 5px

Ejemplo

Agregue un efecto de desenfoque a la sombra:

div {
  box-shadow: 10px 10px 5px grey;
}

Establecer el radio de propagación de la sombra

El spreadparámetro define el radio de dispersión. Un valor positivo aumenta el tamaño de la sombra, un valor negativo disminuye el tamaño de la sombra.

Un elemento <div> con una sombra de cuadro gris borrosa, con un radio de extensión de 12px

Ejemplo

Establezca el radio de propagación de la sombra:

div {
  box-shadow: 10px 10px 5px 12px grey;
}

Establecer el parámetro de inserción

El insetparámetro cambia la sombra de una sombra exterior (interior) a una sombra interior.

Un elemento <div> con una sombra de cuadro borrosa, gris e insertada

Ejemplo

Agregue el parámetro de inserción:

div {
  box-shadow: 10px 10px 5px grey inset;
}

Agregar múltiples sombras

Un elemento también puede tener múltiples sombras:

Ejemplo

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Tarjetas

También puede usar la box-shadowpropiedad para crear tarjetas de papel:

1

1 de enero de 2021

Noruega

Hardanger, Noruega

Ejemplo

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Ponte a prueba con ejercicios

Ejercicio:

Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.

<style>
h1 {
  : 2px 2px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text

❮ Previous Next ❯