En este proyecto, crearás muchas pegatinas divertidas que puedes usar para decorar páginas web.
Stickers!
HTML & CSS
Empezar
Aprenderás a utilizar degradados que cambian gradualmente de un color a otro para hacer que las pegatinas se vean bien.
10
¿Listo para comenzar? ¡Haz clic en el enlace al editor y sorprendete!
Ir al Proyecto
Importante: Nunca olvides de guardar tu proyecto en la medida que vas avanzando.
10
Pegatina colorida de programación
Un degradado o gradiente es un cambio gradual de un color a otro. Los gradientes se pueden utilizar para crear efectos geniales. Los vas a utilizar para crear adhesivos que puedes usar en tus páginas web.
El proyecto que abriste debería parecerse a esto:
10
Hagamos una pegatina “Yo <3 programar”
Utiliza un <div> con una clase sticker y un id coding para que puedas darle estilo y añade una linea con el código<br>
10
Vamos al archivo style.css. Verás que ya tienes la clase .sticker. Esto diseñará pegatinas en la página y centrará su contenido.
Recuerda que agregaste la identificación coding a tu pegatina. En la parte inferior de style.css agrega el siguiente código para darle estilo al texto:
10
Ahora puedes agregar un degradado para el fondo de la etiqueta. Un degradado lineal cambia de un color a otro a lo largo de una línea recta.
Este degradado cambiará de rojo en la parte superior a magenta en la parte inferior. Agrega el código a tu estilo coding:
10
Puedes mejorar el resultado agregando espacio alrededor y esquinas redondeadas.
Agrega el código resaltado:
10
Vamos a crear una etiqueta con el texto HTML & CSS. & es otro carácter que necesita codificación en HTML, el código es &.
Ahora vea tu archivo style.css y añade un estilo para tu nueva etiqueta:
Agrega el código resaltado para crear una nueva etiqueta:
10
Puedes hacer una pegatina con degradado utilizando una imagen. Si utilizas una imagen con un fondo transparente, el degradado se verá a través de él.
Agrega este estilo a style.css para darle a tu nueva pegatina de robot un degradado diagonal y un borde elegante:
Añade una pegatina a index.html utilizando la imagen que desees en "linkdeimagen"
10
Añadimos algo de texto a este sticker.
Agrega el siguiente código a style.css para mejorar su apariencia. Editamos propiedas como ubicación de texto, colores y mas.
Agrega un <span> que contenga el texto "herobrine" a index.html y dale un id "herotext"
10
Trinket - Stickers!
Erica De Pacheco
Created on May 5, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Corporate CV
View
Interactive Onboarding Guide
View
Higher Education Teaching Microsite
View
Modern microsite mobile
View
Basic Shapes Microsite
View
Basic Interactive Microsite
View
Beauty catalog mobile
Explore all templates
Transcript
En este proyecto, crearás muchas pegatinas divertidas que puedes usar para decorar páginas web.
Stickers!
HTML & CSS
Empezar
Aprenderás a utilizar degradados que cambian gradualmente de un color a otro para hacer que las pegatinas se vean bien.
10
¿Listo para comenzar? ¡Haz clic en el enlace al editor y sorprendete!
Ir al Proyecto
Importante: Nunca olvides de guardar tu proyecto en la medida que vas avanzando.
10
Pegatina colorida de programación
Un degradado o gradiente es un cambio gradual de un color a otro. Los gradientes se pueden utilizar para crear efectos geniales. Los vas a utilizar para crear adhesivos que puedes usar en tus páginas web.
El proyecto que abriste debería parecerse a esto:
10
Hagamos una pegatina “Yo <3 programar”
Utiliza un <div> con una clase sticker y un id coding para que puedas darle estilo y añade una linea con el código<br>
10
Vamos al archivo style.css. Verás que ya tienes la clase .sticker. Esto diseñará pegatinas en la página y centrará su contenido.
Recuerda que agregaste la identificación coding a tu pegatina. En la parte inferior de style.css agrega el siguiente código para darle estilo al texto:
10
Ahora puedes agregar un degradado para el fondo de la etiqueta. Un degradado lineal cambia de un color a otro a lo largo de una línea recta.
Este degradado cambiará de rojo en la parte superior a magenta en la parte inferior. Agrega el código a tu estilo coding:
10
Puedes mejorar el resultado agregando espacio alrededor y esquinas redondeadas.
Agrega el código resaltado:
10
Vamos a crear una etiqueta con el texto HTML & CSS. & es otro carácter que necesita codificación en HTML, el código es &.
Ahora vea tu archivo style.css y añade un estilo para tu nueva etiqueta:
Agrega el código resaltado para crear una nueva etiqueta:
10
Puedes hacer una pegatina con degradado utilizando una imagen. Si utilizas una imagen con un fondo transparente, el degradado se verá a través de él.
Agrega este estilo a style.css para darle a tu nueva pegatina de robot un degradado diagonal y un borde elegante:
Añade una pegatina a index.html utilizando la imagen que desees en "linkdeimagen"
10
Añadimos algo de texto a este sticker.
Agrega el siguiente código a style.css para mejorar su apariencia. Editamos propiedas como ubicación de texto, colores y mas.
Agrega un <span> que contenga el texto "herobrine" a index.html y dale un id "herotext"
10