Home-theater-designers
Quieres que tu sitio web se vea increíble, pero faltan tus habilidades de desarrollo web.
¡No desesperes! No es necesario que conozca CSS o PHP para crear un sitio elegante con efectos geniales. Algunas etiquetas HTML simples y saber cómo copiar y pegar bastará.
Para comenzar con algunos efectos HTML geniales, hemos compilado estas plantillas de código de efectos HTML gratuitas. Mejorarán la funcionalidad y la experiencia del usuario de su sitio, sin romper el banco. Si bien son en su mayoría HTML, estos códigos geniales también pueden contener algo de CSS y PHP.
1. Genial efecto de paralaje con HTML
Probablemente haya visto el efecto Parallax utilizado en sitios web con anuncios en línea. A medida que se desplaza hacia abajo en un artículo, la imagen de fondo parece desplazarse a un ritmo diferente, o aparece un anuncio.
Alternativamente, tal vez la imagen de fondo cambie a medida que visita diferentes partes del sitio. Es un efecto genial que agrega profundidad visual al contenido e ideal incluso si no lo hace entender el código HTML básico .
Puedes jugar con el efecto y copiar el código para un simple efecto de desplazamiento Parallax de W3Schools .
En su versión más sofisticada, este efecto es una combinación de HTML, CSS y JS.
Adelante, busque los códigos de lo anterior Efecto de paralaje de encabezado / pie de página de CodePen .
2. Código de cuadro de comentario HTML desplazable
Este es un elemento HTML simple pero útil que le permite empaquetar fragmentos largos de texto en un formato compacto. De esta forma, no ocupa todo el espacio de la página.
Puede jugar con los colores y el tamaño del cuadro de texto para que se ajuste a sus necesidades.
Aporte:
|_+_|Si desea algo un poco más elegante, también puede buscar el código para un cuadro de comentarios personalizable de Quackit .
Ofrecen varias plantillas, pero también puede usar su editor para cambiar y probar (ejecutar) manualmente su código personalizado.
3. Un truco genial de HTML: texto resaltado
Con un simpleEtiqueta HTML que puede agregar una tonelada de efectos geniales a su texto o imágenes. Tenga en cuenta que no todos funcionan en todos los navegadores. Los mencionados aquí funcionan en Google Chrome, Microsoft Edge y Mozilla Firefox.
Este efecto de texto HTML resalta el texto entre lasetiquetas.
Aporte:
|_+_|Demostración de salida:
4. Agregar imagen de fondo al texto
Asimismo, puede cambiar el color de su texto o agregar una imagen de fondo. Este se ve muy bien si el tamaño de fuente del texto es mayor.
Aporte:
|_+_|El mismo efecto se logra agregando los elementos de estilo y fuente al texto en un etiqueta.
diferencia entre usb a y usb c
Demostración de salida:
5. Truco HTML útil para agregar una descripción emergente de título
Aparece una información sobre herramientas de título cuando se desplaza con el mouse sobre un fragmento de texto o imagen 'manipulado'. Los habrá visto utilizados en sitios web en imágenes, texto vinculado o incluso elementos de menú en aplicaciones de escritorio. Utilice este código HTML para agregar información sobre herramientas al texto sin formato en su página web.
Aporte:
|_+_|Demostración de salida:
6. Los mejores trucos de HTML hasta ahora: texto que se desplaza o cae
Cuando busque 'marquee html' en Google, descubrirá un pequeño huevo de Pascua. ¿Ves el recuento de resultados de búsqueda con desplazamiento en la parte superior? Ese es un efecto creado por la etiqueta de marquesina ahora obsoleta. Si bien este efecto de texto HTML que alguna vez fue genial ha quedado obsoleto, la mayoría de los navegadores aún lo admiten.
Aporte:
|_+_|Demostración de salida:
Usted puede agregar más atributos para controlar el comportamiento de desplazamiento, el color de fondo, la dirección, la altura y más. Sin embargo, tenga cuidado; estos efectos pueden volverse bastante irritantes si se usan en exceso.
Para un efecto de texto que cae genial, dirígete a Quackit de nuevo y copiar su código de marquesina altamente personalizado.
7. Cree un menú de cambio genial con HTML
Los mejores trucos de HTML son los efectos HTML dinámicos. Sin embargo, a menudo se basan en secuencias de comandos. Aquí hay un efecto para los menús que estará de acuerdo en que se ve muy elegante.
Es un poco más complicado que la etiqueta HTML promedio porque funciona con una hoja de estilo y scripts. La ventaja es que no tiene que cargar un archivo CSS o script para que funcione. En su lugar, simplemente pegue el siguiente código en la sección de su sitio web.
Aporte:
|_+_|Demostración de salida:
Desafortunadamente, no podemos demostrar este efecto aquí. Pero la fuente original, Unidad dinámica , presenta una copia de trabajo de este efecto HTML dinámico.
8. Obtenga una hoja de cálculo HTML con Tableizer
Si desea mostrar una hoja de cálculo en su sitio, ¡deje que Tableizer! Transforme sus datos en una tabla HTML. Simplemente pegue los datos sin procesar de Excel, Google Doc o cualquier otra hoja de cálculo en la herramienta de conversión en tableizer.journalistopia.com . Ajusta el opciones de mesa , luego haga clic en Tableizarlo para recibir la salida HTML.
Este es quizás uno de los mejores códigos HTML para su sitio web, como Tableize It! hace todo el trabajo duro.
Hacer clic Copiar HTML al portapapeles para copiar el código HTML y agregarlo a su sitio web. Considere editar los colores de fondo para que se vea mucho más fresco.
¿Dónde puedo imprimir documentos?
Si bien esto no es realmente un efecto HTML, es bastante útil.
Más códigos HTML y efectos geniales para su sitio
El poder de HTML, CSS y JavaScript ofrece opciones potencialmente ilimitadas para efectos sorprendentes en su sitio web. ¿Quieren más?
- Objetos HTML te da genialetiquetar ideas.
- Unidad dinámica tiene muchos scripts HTML dinámicos increíbles.
- Quackit ofrece un código HTML genial.
Le mostramos ocho códigos HTML geniales que puede copiar para mejorar su sitio web. Si bien son diferentes, todos son fáciles de implementar siempre que conozca las técnicas básicas de codificación HTML.
Cuota Cuota Pío Correo electrónico 17 ejemplos simples de código HTML que puede aprender en 10 minutos¿Quieres crear una página web básica? Aprenda estos ejemplos HTML y pruébelos en un editor de texto para ver cómo se ven en su navegador.
Leer siguiente Temas relacionados- Programación
- HTML
- Desarrollo web
- Herramientas para webmasters
Editor adjunto de seguridad, Linux, bricolaje, programación y explicación técnica, y productor de podcasts realmente útil, con amplia experiencia en soporte de escritorio y software. Colaborador de la revista Linux Format, Christian es un manipulador de Raspberry Pi, amante de Lego y fanático de los juegos retro.
Más de Christian CawleySuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse