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
            Sombras CSS en texto y contenedores
            Sombras CSS en texto y contenedores o cajas
            22/10/2019
            selector de atributos css
            Selector de atributos en CSS
            22/10/2019

            Gradientes en CSS: gradiente lineal y radial

            Gradientes CSS lineal y radial

            Gradientes CSS lineal y radial

            Tabla de contenidos

            • Gradientes en CSS: gradiente lineal y radial
            • 1. Gradiente lineal
            • 2. Gradiente radial
            • 3. Generadores de gradientes
            • 4. Patrones de gradientes
            • Ejercicios propuestos

            Gradientes en CSS: gradiente lineal y radial

            Los gradientes nos permiten añadir efectos de colores degradados en nuestros diseños. Los gradientes están disponibles desde CSS3 y se configuran como fondos, por lo que tendremos que usar la propiedad “background“. Disponemos de dos tipos de gradientes: lineal y radial.

            1. Gradiente lineal

            El gradiente lineal se define mediante la función linear-gradient() y permite crear fondos degradados en una dirección específica. El formato es el siguiente:

            background: linear-gradient(dirección|ángulo, color, color, color...);
            background: linear-gradient(dirección|ángulo, color tamaño, color tamaño, color tamaño...);
            background: linear-gradient(color, color, color…);

            Significado de las propiedades:

            • Dirección | ángulo: indica la dirección o ángulo del gradiente. Puede ser especificado usando las palabras clave to top, to bottom, to left y to right. También puede ser indicado por un ángulo para declarar una dirección específica del gradiente.
            • Color: permite crear una lista con varias paradas para ir cambiando el color del gradiente. Se pueden definir tantos colores como se necesiten. Se puede utilizar el nombre de color (en inglés), valor hexadecimal, color en RGB o HSL.
            • Tamaño: altura a la que comienza a cambiar el color del gradiente.

            Recuerda utilizar la extensión que te facilita la tarea de crear los prefijos para navegadores. En estas propiedades hay diferencias entre las funciones estándar y las especificadas por los navegadores.


            Ejemplo

            Prueba las siguientes propiedades en diferentes contenedores y observa las diferencias entre los distintos valores.

            background: linear-gradient(90deg, rgba(176,174,238,1) 0%, rgba(29,30,31,1));
            background: linear-gradient(to right, red,brown,orange,yellow,blue,green,violet,pink);
            background: linear-gradient(to top, #000, #ccc);
            background: linear-gradient(to right,red 300px,brown 400px,orange 700px);

            0

            2. Gradiente radial

            El gradiente radial nos permite crear degradados con formas circulares. El formato para los gradientes radiales es muy parecido al anterior. En este caso, debemos usar la función radial-gradient() y un nuevo atributo para la forma.

            background: radial-gradient(forma, color, color, color...);
            background: radial-gradient(forma tamaño, color, color, color...);
            background: radial-gradient(forma, color tamaño, color tamaño, color tamaño...);
            background: radial-gradient(color, color, color...);

            Significado de las propiedades:

            • forma: existen dos tipos de forma: circle y ellipse (el valor por defecto será ellipse). De forma optativa se puede indicar el tamaño de la forma.
            • color: permite crear una lista con varias paradas para ir cambiando el color del gradiente. Se pueden definir tantos colores como se necesiten.
            • tamaño: para cada color se puede indicar la posición en la que comienzan las transiciones.


            Ejemplo

            Prueba las siguientes propiedades en diferentes contenedores y observa las diferencias entre los distintos valores.

            background: radial-gradient(ellipse, rgba(176,174,238,1) 0%, rgba(29,30,31,1));
            background: radial-gradient (circle,red,brown,orange,yellow,blue);
            background: radial-gradient(circle,red 300px,brown 400px,orange 700px);
            background: radial-gradient(#000, #ccc);

            0

            3. Generadores de gradientes

            Para facilitarnos la tarea de la creación de gradientes podemos utilizar un generador de gradientes online que nos proporcione el código CSS necesario para nuestro diseño. Algunas herramientas online útiles son las siguientes:

            • cssgradient.io
            • css3gen.com/gradient-generator


            Ejemplo

            gradiante radial CSS
            background: rgb(176,174,238);
            background: radial-gradient(circle, rgba(176,174,238,1) 0%, rgba(29,30,31,1) 100%);

            4. Patrones de gradientes

            Podemos aplicar diseños muy trabajados creando patrones sin necesidad de cargar imágenes con mucho peso. Existen diversos artistas dedicados a hacer este tipo de diseños. Algunos ejemplos de diseños de este tipo se pueden obtener en la siguiente plataforma:

            • leaverou.github.io/css3patterns

            Comprueba tu aprendizaje

            ¿Qué formato no puedes utilizar para definir un color de un gradiente?

            ¡Bien! ¡Has fallado!

            Los gradientes se definen...

            ¡Bien! ¡Has fallado!

            Existen dos tipos de gradientes: lineal y radial.

            ¡Bien! ¡Has fallado!

            Ejercicios propuestos

            Actividad 5.

            Aplica un gradiente en uno de los contenedores de tu proyecto web. El gradiente debe contener los colores establecidos en la guía de estilo de tu proyecto web.

            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