7 efectos HTML geniales que cualquiera puede agregar a su sitio web

Desea que su sitio web Cómo hacer un sitio web: para principiantes Cómo hacer un sitio web: Para principiantes Hoy lo guiaré a través del proceso de creación de un sitio web completo desde cero. No te preocupes si esto suena difícil. Te guiaré en cada paso del camino. Lea más para verse impresionante, pero sus habilidades de desarrollo web son deficientes?

¡No desesperes! No tienes que saber CSS Aprender HTML y CSS con estos tutoriales paso a paso Aprender HTML y CSS con estos tutoriales paso a paso ¿Tienes curiosidad sobre HTML, CSS y JavaScript? Si crees que tienes una habilidad para aprender a crear sitios web desde cero, aquí hay algunos tutoriales paso a paso que vale la pena probar. Leer más o PHP para construir un sitio de lujo. Algunos buenos pasos de HTML 5 antiguos para entender el código HTML básico 5 pasos para entender el código HTML básico Lea más y sabrá cómo copiar y pegar.

Hemos compilado 7 plantillas de efectos HTML gratis. Mejorarán la funcionalidad y la experiencia del usuario de su sitio, mientras no rompan el banco. Y pueden contener algo de CSS y PHP también.

Tal vez uno de estos es lo que has estado buscando.

1. Efecto de paralaje

Probablemente haya visto el Efecto Parallax Cómo crear un fondo de escritorio Parallax con Rainmeter Cómo crear un fondo de escritorio Parallax con Rainmeter Si desea un fondo de escritorio animado en vivo, ¡mire Rainmeter! Aquí le mostraremos cómo crear un efecto de paralaje único para el fondo de su escritorio de Windows. Leer más en artículos en línea de estilo de revista de lujo. A medida que se desplaza hacia abajo en un artículo principal, la imagen de fondo parece desplazarse a un ritmo diferente. Al ingresar a una sección diferente del artículo, la imagen de fondo cambia. Es un efecto genial que agrega profundidad visual al contenido..

Dado que este no es un efecto HTML puro, solo podemos ofrecer GIF animados para demostrar el resultado.

A continuación verás una versión básica del efecto Parallax; un cuadro de texto se mueve a través de una imagen de fondo estática mientras se desplaza.

Puede jugar con el efecto y copiar el código para el 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..

Continúe y obtenga los códigos para el efecto de paralaje de encabezado / pie de página de CodePen.

2. Cuadro de texto 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..

Entrada HTML:

Demostración de salida:

Su texto se mostrará aquí. Y puedes desplazarte hacia abajo para pasar por todo esto. Solo tiene que agregar una cantidad suficiente de texto para que se muestren las barras de desplazamiento. Obviamente, esto no es suficiente, supongamos que tenemos algo más que decir. Eventualmente, las barras de desplazamiento serán útiles. ¡Eso es! :)

Puedes jugar con los colores y el tamaño del cuadro de texto para que se ajuste a tus necesidades.

Si desea algo un poco más sofisticado, también puede obtener código para un buzón de comentarios personalizable de Quackit. Ofrecen varias plantillas, pero también puede usar su editor para cambiar manualmente y ajustar (ejecutar) su código personalizado..

3. Resaltar texto

Con un simple Etiqueta HTML puede agregar una tonelada de efectos a su texto o imágenes. Tenga en cuenta que no todos ellos funcionan en todos los navegadores. Los que se mencionan aquí funcionan en Google Chrome, Microsoft Edge y Mozilla Firefox.

Entrada:

Tu texto resaltado aquí.

Demostración de salida:

Tu texto resaltado aquí.

4. Añadir imagen de fondo al texto

Del mismo modo, puede cambiar el color de su texto o agregar una imagen de fondo. Este solo se vuelve realmente emocionante si su texto tiene un tamaño lo suficientemente grande, por lo que también aumenté el tamaño de la fuente..

Entrada:

MakeUseOf presenta ...

Tenga en cuenta que también podría agregar los elementos de estilo y fuente a un etiqueta para el mismo efecto, más texto en negrita.

Demostración de salida:

MakeUseOf presenta ...

5. Añadir información sobre el título

Cuando se desplaza con el mouse sobre un trozo de “manipulado” texto o imagen Usted sabe esto de imágenes o texto vinculado. Aquí es cómo puede agregar este a texto sin formato.

Entrada:

Mueve tu mouse sobre mi!

Demostración de salida:

Mueve tu mouse sobre mi!

6. Hacer desplazamiento o caída de texto

Cuando buscas “marquesina html” En Google, descubrirás un pequeño huevo de Pascua. Ver el conteo de resultados de búsqueda de desplazamiento? Ese es un efecto creado por la etiqueta de marquesina ahora obsoleta. Si bien esta función HTML ha quedado en desuso, la mayoría de los navegadores aún la admiten.

Entrada:

Hazlo scroll bebe!

Demostración de salida:

Hazlo scroll bebe!

Puede agregar atributos adicionales para controlar el comportamiento de desplazamiento, el color de fondo, la dirección, la altura y más. Estos efectos pueden llegar a ser bastante irritantes si te excedes..

Para un efecto de texto descendente, diríjase a Quackit nuevamente y copie su código de marquesina altamente personalizado.

7. Añadir un Switchmenu

Los efectos HTML más emocionantes 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 he venido a adorar. Es un poco más complicado que su 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, puede plantar toda la información necesaria en el sección de su sitio web.

Entrada:

Agregue el siguiente código en el sección de tu página:

Y este código va a donde quieras que aparezca el menú dinámico.

Los temas

- Navegadores / Complementos

- Aplicaciones web

- Consejos prácticos

- Cool Software

… y más!

Escritores del personal

- Karl Gechlik

- Tina

- Varun Kashyap

… y más!

Diverso

- Acerca de

- Contacto

- Archivo

- Renuncia

Demostración de salida:

Desafortunadamente, no podemos demostrar este efecto aquí. Pero la fuente original, Dynamic Drive, presenta una copia de trabajo de este efecto HTML dinámico.

Prima: Tableizer!

Si desea mostrar una hoja de cálculo en su sitio, deje que Tableizer! Transforma tus datos en una tabla HTML. Simplemente pegue los datos sin procesar de Excel, Google Doc o cualquier otra hoja de cálculo en el campo correspondiente, modifique la opciones de mesa, y haga clic Tableize It! para recibir la salida HTML.

Ahora puede copiar el código HTML y agregarlo a su sitio web. Considera la posibilidad de editar los colores de fondo para que se vea mucho mejor..

Si bien esto no es realmente un efecto HTML, es bastante útil.

¿Qué efecto eliges??

Le hemos mostrado siete (en su mayoría) efectos HTML que puede utilizar para mejorar su sitio web. Algunos son básicos, otros vienen con campanas y silbidos. Todos ellos son fáciles de implementar..

Para más Etiquetas de ideas, visita HTML Goodies. Si está interesado en HTML dinámico, visite Dynamic Drive para obtener toneladas de scripts increíbles. Dirígete a Quackit para obtener códigos HTML más puros.

Si desea profundizar y escribir su propio HTML, comience con estos ejemplos de código HTML simples y fáciles de aprender. Y cuando estés listo para HTML5, también te cubrimos.

Finalmente, cuando esté desarrollando su sitio web, mantenga la velocidad de la página 7 maneras de hacer que su sitio web o blog cargue más rápido para los visitantes 7 maneras de hacer que su sitio web o blog cargue más rápido para los visitantes A continuación, le ofrecemos algunos consejos para acelerar su sitio y asegurarse tus visitantes se quedan. Leer más en mente.

Explorar más sobre: ​​HTML, Desarrollo web, Herramientas para webmasters.