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
Practical Microsite
View
Essential Microsite
View
Akihabara Microsite
View
Essential CV
View
Akihabara Resume
View
Momentum: Manager Guide
View
Momentum: First Operational Steps
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