¿Quiere que su sitio web se vea bien, pero no tiene habilidades de desarrollo web? ¡No se desesperen! No necesita saber CSS o PHP para crear un sitio web favorito. Este artículo le dará 7 plantillas de efectos HTML gratuitas. Mejorarán la funcionalidad y la experiencia del usuario de su sitio. Y también pueden contener algo de CSS y PHP. Quizás uno de estos efectos es lo que estás buscando.
Efectos HTML
- 1. Efecto de paralaje
- 2. Cuadro de texto desplazable
- 3. Resaltar texto
- 4. Agrega un fondo de pantalla al texto
- 5. Agrega una leyenda al título.
- 6. Desplace el texto o cree un efecto de texto que se mueva hacia arriba y hacia abajo
- 7. Agregar menú de conversión
- Tableizador
1. Efecto de paralaje
Es posible que haya visto el efecto Parallax en los periódicos en línea. Cuando se desplaza hacia abajo hasta un artículo, el fondo de pantalla se moverá más lento que el contenido anterior. Cuando ingrese a otra parte del artículo, el fondo de pantalla cambiará. Es un gran efecto profundizar la imagen para el contenido.
- Instrucciones para crear un sitio web para principiantes
Dado que esto no es un efecto HTML puro, el artículo solo puede proporcionar GIF animados para ilustrar.
A continuación, verá una versión básica de Parallax, un cuadro de texto que se desplaza en un fondo de pantalla estático cuando se desplaza.
Puede crear este efecto copiando el código anterior de W3Schools.
La versión más compleja de este efecto es una combinación de HTML, CSS y JS.
Puede descargar el efecto desde CodePen.
2. Cuadro de texto desplazable
Este es un elemento HTML simple pero su utilidad le permite encapsular párrafos largos de texto en un formato compacto. De esta forma no ocupa todo el espacio de la página.
HTML de entrada:
Si desea algo interesante, también puede obtener el código para un cuadro de comentarios personalizable de Quackit.com. Proporcionan algunas plantillas, pero también puede usar sus editores para cambiar y ejecutar su propio código.
3. Resaltar texto
Con etiquetas HTML simples, puede agregar toneladas de efectos a texto o imágenes. Tenga en cuenta que no todos funcionan en navegadores. Las etiquetas HTML mencionadas aquí funcionan en Google Chrome, Microsoft Edge y Mozilla Firefox.
HTML de entrada:
Văn bản bạn muốn đánh dấu ở đây
4. Agrega un fondo de pantalla al texto
Del mismo modo, puede cambiar el color del texto o agregar un fondo de pantalla. Esto solo es realmente interesante si su texto es lo suficientemente grande, por lo que también debe aumentar el tamaño de fuente.
Entrada:
Texto que necesita para agregar fondo de pantalla aquí
5. Agrega una leyenda al título.
Aparece una leyenda de título cuando pasa el mouse sobre un texto o una imagen. Lo sabes por imágenes o enlaces de texto. Así es como puede agregarlo a texto sin formato.
Entrada:
Nội dung bạn muốn giải thích ở đây
6. Desplace el texto o cree un efecto de texto que se mueva hacia arriba y hacia abajo
Al buscar “marquee html” en Google, verá un texto que le informa la hora de los resultados de búsqueda. Es un efecto creado por la etiqueta de marquesina. Aunque esta función HTML ha quedado obsoleta, la mayoría de los navegadores aún la admiten.
Entrada:
Contenido de texto que desea desplazar aquí
Puede agregar otras propiedades para controlar el desplazamiento, el color de fondo, la dirección, la altura y más. Estos efectos pueden volverse bastante molestos si los abusa.
Para un efecto de texto descendente, vaya a Quackit nuevamente y copie el código de marquesina altamente personalizable.
Los efectos HTML más interesantes son los efectos HTML dinámicos. Sin embargo, a menudo se basan en guiones. Es un poco más complicado que las etiquetas HTML normales porque funciona con una tabla de estilos y scripts. La ventaja es que no tiene que descargar un archivo CSS o un script para que funcione, puede poner toda la información necesaria en la parte del sitio web.
Entrada:
Agregue el siguiente código a la sección de la página:
Y este código donde quiera que aparezca el menú.
– Browsers/Addons
– Web Apps
– How-To Tips
– Cool Software
…and more!
– Karl Gechlik
– Tina
– Varun Kashyap
…and more!
– About
– Contact
– Archives
– Disclaimer
Demostración de salida:
Desafortunadamente, el artículo no muestra este efecto aquí, pero será similar a la imagen a continuación:
Tableizador
Si desea mostrar la hoja de cálculo en su sitio web, deje que Tableizer.journalistopia.com convierta sus 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 las opciones de la tabla y haga clic en Tableize It! para recibir salida HTML.
Ahora puede copiar el código HTML y agregarlo a su sitio web. Considere editar el color de fondo para que se vea mejor. Aunque esto no es realmente un efecto HTML, es bastante útil.
El artículo ha incluido siete efectos HTML que puede utilizar para renovar su sitio. Algunos son básicos, otros son un poco complicados, pero en general se pueden hacer.
¡Les deseo todo el éxito!
Efectos HTML efectos de mouse Código HTML de Tableizer
¿Quiere que su sitio web se vea bien, pero no tiene habilidades de desarrollo web? ¡No se desesperen! No necesita saber CSS o PHP para crear un sitio web favorito. Este artículo le proporcionará 7 plantillas de efectos HTML gratuitas. Mejorarán la funcionalidad y la experiencia del usuario de su sitio. Y también pueden contener algo de CSS y PHP. Quizás uno de estos efectos es lo que estás buscando.
Efectos HTML
- 1. Efecto de paralaje
- 2. Cuadro de texto desplazable
- 3. Resaltar texto
- 4. Agrega un fondo de pantalla al texto
- 5. Agrega una leyenda al título.
- 6. Desplace el texto o cree un efecto de texto que se mueva hacia arriba y hacia abajo
- 7. Agregar menú de conversión
- Tableizador
1. Efecto de paralaje
Es posible que haya visto el efecto Parallax en los periódicos en línea. Cuando se desplaza hacia abajo hasta un artículo, el fondo de pantalla se moverá más lento que el contenido anterior. Cuando ingrese a otra parte del artículo, el fondo de pantalla cambiará. Es un gran efecto profundizar la imagen para el contenido.
- Instrucciones para crear un sitio web para principiantes
Dado que este no es un efecto HTML puro, el artículo solo puede proporcionar GIF animados para ilustrar.
A continuación, verá una versión básica de Parallax, un cuadro de texto que se desplaza en un fondo de pantalla estático cuando se desplaza.
Puede crear este efecto copiando el código anterior de W3Schools.
La versión más compleja de este efecto es una combinación de HTML, CSS y JS.
Puede descargar el efecto desde CodePen.
2. Cuadro de texto desplazable
Este es un elemento HTML simple pero su utilidad le permite encapsular párrafos largos de texto en un formato compacto. De esta forma no ocupa todo el espacio de la página.
HTML de entrada:
Si desea algo interesante, también puede obtener el código para un cuadro de comentarios personalizable de Quackit.com. Proporcionan algunas plantillas, pero también puede usar sus editores para cambiar y ejecutar su propio código.
3. Resaltar texto
Con etiquetas HTML simples, puede agregar toneladas de efectos a texto o imágenes. Tenga en cuenta que no todos funcionan en navegadores. Las etiquetas HTML mencionadas aquí funcionan en Google Chrome, Microsoft Edge y Mozilla Firefox.
HTML de entrada:
Văn bản bạn muốn đánh dấu ở đây
4. Agrega un fondo de pantalla al texto
Del mismo modo, puede cambiar el color del texto o agregar un fondo de pantalla. Esto solo es realmente interesante si su texto es lo suficientemente grande, por lo que también debe aumentar el tamaño de fuente.
Entrada:
Texto que necesita para agregar fondo de pantalla aquí
5. Agrega una leyenda al título.
Aparece una leyenda de título cuando pasa el mouse sobre un texto o una imagen. Lo sabes por imágenes o enlaces de texto. Así es como puede agregarlo a texto sin formato.
Entrada:
Nội dung bạn muốn giải thích ở đây
6. Desplace el texto o cree un efecto de texto que se mueva hacia arriba y hacia abajo
Al buscar “html marquesina” en Google, verá un texto que le informa la hora de los resultados de la búsqueda. Es un efecto creado por la etiqueta de marquesina. Aunque esta función HTML ha quedado obsoleta, la mayoría de los navegadores aún la admiten.
Entrada:
Contenido de texto que desea desplazar aquí
Puede agregar otras propiedades para controlar el desplazamiento, el color de fondo, la dirección, la altura y más. Estos efectos pueden volverse bastante molestos si los abusa.
Para un efecto de texto descendente, vaya a Quackit nuevamente y copie el código de marquesina altamente personalizable.
Los efectos HTML más interesantes son los efectos HTML dinámicos. Sin embargo, a menudo se basan en guiones. Es un poco más complicado que las etiquetas HTML normales porque funciona con una tabla de estilos y scripts. La ventaja es que no tiene que descargar un archivo CSS o un script para que funcione, puede poner toda la información necesaria en la parte del sitio web.
Entrada:
Agregue el siguiente código a la sección de la página:
Y este código donde quiera que aparezca el menú.
– Browsers/Addons
– Web Apps
– How-To Tips
– Cool Software
…and more!
– Karl Gechlik
– Tina
– Varun Kashyap
…and more!
– About
– Contact
– Archives
– Disclaimer