EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            metaetiqueta viewport
            Configuración metaetiqueta viewport, web responsive
            20/10/2019
            Gradientes CSS lineal y radial
            Gradientes en CSS: gradiente lineal y radial
            22/10/2019

            Sombras CSS en texto y contenedores o cajas

            Sombras CSS en texto y contenedores

            Sombras CSS en texto y contenedores

            Tabla de contenidos

            • Sombras en texto y contenedores o cajas con CSS
            • 1. Propiedades text-shadow y box-shadow
            • 2. Generadores de sombra online
            • Ejercicios propuestos

            Sombras en texto y contenedores o cajas con CSS

            Gracias a las propiedades de CSS3 «text-shadow» y «box-shadow» podemos aplicar sombras en los textos y en los contenedores para así enriquecer nuestras interfaces.

            1. Propiedades text-shadow y box-shadow

            El formato es prácticamente el mismo para las dos propiedades.

            • text-shadow: posx posy desenfoque color | none;
            • box-shadow: posx posy desenfoque tamaño color inset | none;

            Significado de las propiedades:

            • posx: sombra que se aplica en el eje horizontal.
            • posy: sombra que se proyecta en el eje vertical.
            • desenfoque o blur: cantidad de sombra borrosa.
            • tamaño: tamaño de la sombra hacia los lados.
            • color: color de la sombra.
            • inset: posiciona la sombra dentro del marco.

            Importante: 

            • Para aplicar sombras arriba y a la izquierda se deben utilizar valores negativos.
            • Para aplicar doble sombra se pueden poner dos valores separados con coma.
            • Recuerda que para este tipo de propiedades debemos incluir los prefijos para navegadores.

            Veamos por ejemplo qué significan los valores de la propiedad «text-shadow» del siguiente ejemplo:

            text-shadow: 3px 4px 0px #fff;
            box-shadow: 10px 10px 14px 2px rgba(0,0,0,0.47);
            • 3px: es el tamaño de la sombra que se aplica a la derecha del texto.
            • 4px: es la sombra que se proyecta hacia abajo.
            • 0px: es la cantidad de sombra borrosa que se aplica.
            • #fff: es el color de la sombra. Se puede aplicar también en RGBA y HSLA.

            Para aplicar sombras arriba y a la izquierda se deben utilizar valores negativos.

            Para aplicar varias sombras se puede añadir una lista de sombras separadas por comas. En el siguiente ejemplo se aplicarían dos sombras.

            text-shadow: 3px 4px 0px #fff, 2px 2px 1px #ccc;

            Recuerda que para este tipo de propiedades debemos incluir los prefijos para navegadores correspondientes.


            Ejemplo

            Prueba las siguientes propiedades sobre diferentes párrafos y observa las diferencias entre los distintos valores.

            .shadow1 { text-shadow: 3px 3px 2px rgba(152, 150, 207, 0.7);}
            .shadow2 {box-shadow: 10px 10px 14px 2px rgba(0,0,0,0.47);}
            .shadow3 {box-shadow: 5px 1px 4px 2px #45f875 inset;}
            .shadow4 {text-shadow: 3px 4px 0px grey, 2px 2px 1px yellow;}

            0

            2. Generadores de sombra online

            Para facilitarnos la tarea de la creación de sombras podemos utilizar un generador de sombras tanto para los textos como para las cajas o contenedores. Algunas herramientas online útiles son las siguientes:

            Generador de sombras en textos: css3gen.com/text-shadow/

            Generador de sombras en cajas o contenedores: cssmatic.com/box-shadow

            Comprueba tu aprendizaje

            Si tenemos definida la propiedad "text-shadow: 3px 4px 2px #fff;"...

            ¡Bien! ¡Has fallado!

            Si tenemos definida la propiedad "box-shadow: 10px 5px 1px #fff;"...

            ¡Bien! ¡Has fallado!

            ¿Es posible aplicar dos sombras diferentes en un texto?

            ¡Bien! ¡Has fallado!

            Ejercicios propuestos

            Actividad 4.

            Define una sombra inferior negra en el menú de tu proyecto web de 10px de desplazamiento vertical y con un desenfoque de 15px. Agrega también una sombra de tipo texto en uno o más encabezados que disponga de 4px de desplazamiento horizontal y vertical y 2px de desenfoque.

            Compartir

            UD4. CSS Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Metaetiqueta viewport
            • 5. Sombras CSS
            • 6. Gradientes CSS
            • 7. Selector de atributos en CSS
            • 8. Transiciones en CSS
            • 9. Transformaciones en CSS
            • 10. Propiedad overflow
            • 11. Flexbox, modelo de caja flexible
            • 12. Centrar horizontal y verticalmente con CSS
            • 13. Preprocesadores Less y Sass
            • 14. Estilos, elementos y código para la composición de tu web
            • 15. Herramientas útiles y referencias CSS
            • 16. CSS Grid para maquetar contenido con rejillas

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results