8 efectos HTML geniales que cualquiera puede agregar a sus sitios web

Aranzulla de Los Pobres

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 interesantes. 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, quizás la imagen de fondo cambie a medida que visita diferentes partes del sitio. Es un efecto genial que agrega profundidad visual al contenido y es ideal incluso si no comprende el código HTML básico .

Puede jugar con el efecto y copiar el código para obtener un efecto de desplazamiento Parallax simple 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 anterior 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.

Entrada:

 <div style="width: 25%; height: 50px; overflow: auto; scrollbar-face-color: #CE7E00; scrollbar-shadow-color: #FFFFFF; br /scrollbar-highlight-color: #6F4709; scrollbar-3dlight-color:#11111; scrollbar-darkshadow-color: #6F4709; br /scrollbar-track-color: #FFE8C1; scrollbar-arrow-color: #6F4709;">
 Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :)</div>

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 una simple etiqueta HTML <span> puede agregar un montón de efectos geniales a su texto o imágenes. Tenga en cuenta que no todos funcionan en todos los navegadores. Los que se mencionan aquí funcionan en Google Chrome, Microsoft Edge y Mozilla Firefox.

Este efecto de texto HTML resalta el texto entre las etiquetas <span>.

Entrada:

 <span style="background-color: #FFFF00>Your highlighted text here.</span>

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.

Entrada:

 <span style="background-image: url(https://www.makeuseof.com/wp-content/uploads/2017/09/Background-Image.jpg); font-size: 20pt">MakeUseOf presents...</span>

El mismo efecto se logra agregando los elementos de estilo y fuente al texto en una etiqueta <strong>.

Demostración de salida:

5. Truco HTML útil para agregar información sobre herramientas 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. Use este código HTML para agregar información sobre herramientas al texto sin formato en su página web.

Entrada:

 <span title="See, this is the tooltip. :)">Move your mouse over me!</span>

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.

Entrada:

 <marquee>I wanna scroll with it, baby!</marquee>

Demostración de salida:

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íjase a Quackit nuevamente y copie 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 <head> de su sitio web.

Entrada:

 <style type="text/css">
 .menutitle{
 cursor:pointer;
 margin-bottom: 5px;
 background-color:#ECECFF;
 color:#000000;
 width:140px;
 padding:2px;
 text-align:center;
 font-weight:bold;
 /*/*/border:1px solid #000000;/* */
 }.submenu{
 margin-bottom: 0.5em;
 }
 </style><script type="text/javascript">/***********************************************
 * Switch Menu script- by Martial B of http://getElementById.com/
 * Modified by Dynamic Drive for format & NS4/IE4 compatibility
 * Visit http://www.dynamicdrive.com/ for full source code
 ***********************************************/var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
 var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page onlyif (document.getElementById){ //DynamicDrive.com change
 document.write('<style type="text/css">n')
 document.write('.submenu{display: none;}n')
 document.write('</style>n')
 }function SwitchMenu(obj){
 if(document.getElementById){
 var el = document.getElementById(obj);
 var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
 if(el.style.display != "block"){ //DynamicDrive.com change
 for (var i=0; i<ar.length; i++){
 if (ar[i].className=="submenu") //DynamicDrive.com change
 ar[i].style.display = "none";
 }
 el.style.display = "block";
 }else{
 el.style.display = "none";
 }
 }
 }function get_cookie(Name) {
 var search = Name + "="
 var returnvalue = "";
 if (document.cookie.length > 0) {
 offset = document.cookie.indexOf(search)
 if (offset != -1) {
 offset += search.length
 end = document.cookie.indexOf(";", offset);
 if (end == -1) end = document.cookie.length;
 returnvalue=unescape(document.cookie.substring(offset, end))
 }
 }
 return returnvalue;
 }function onloadfunction(){
 if (persistmenu=="yes"){
 var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
 var cookievalue=get_cookie(cookiename)
 if (cookievalue!="")
 document.getElementById(cookievalue).style.display="block"
 }
 }function savemenustate(){
 var inc=1, blockid=""
 while (document.getElementById("sub"+inc)){
 if (document.getElementById("sub"+inc).style.display=="block"){
 blockid="sub"+inc
 break
 }
 inc++
 }
 var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
 var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
 document.cookie=cookiename+"="+cookievalue
 }if (window.addEventListener)
 window.addEventListener("load", onloadfunction, false)
 else if (window.attachEvent)
 window.attachEvent("onload", onloadfunction)
 else if (document.getElementById)
 window.onload=onloadfunctionif (persistmenu=="yes" && document.getElementById)
 window.onunload=savemenustate</script>
 And this code goes wherever you want the dynamic menu to appear.
 <!-- Keep all menus within masterdiv-->
 <div id="masterdiv"><div onclick="SwitchMenu('sub1')">Topics</div>
 <span id="sub1">
 - <a href="https://www.makeuseof.com/service/browser">Browsers/Addons</a><br>
 - <a href="https://www.makeuseof.com/service/web_based">Web Apps</a><br>
 - <a href="https://www.makeuseof.com/service/how-to">How-To Tips</a><br>
 - <a href="https://www.makeuseof.com/service/applications">Cool Software</a><br>
 ...and more!
 </span><div onclick="SwitchMenu('sub2')">Staff Writers</div>
 <span id="sub2">
 - <a href="https://www.makeuseof.com/tag/author/karl-l-gechlik/">Karl Gechlik</a><br>
 - <a href="https://www.makeuseof.com/tag/author/tinsie/">Tina</a><br>
 - <a href="https://www.makeuseof.com/tag/author/varunkashyap/">Varun Kashyap</a><br>
 ...and more!
 </span><div onclick="SwitchMenu('sub3')">Miscellaneous</div>
 <span id="sub3">
 - <a href="https://www.makeuseof.com/about/">About</a><br>
 - <a href="https://www.makeuseof.com/contact">Contact</a><br>
 - <a href="https://www.makeuseof.com/archives-2">Archives</a><br>
 - <a href="https://www.makeuseof.com/disclaimer">Disclaimer</a><br>
 </span></div>

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.

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 . Modifique las opciones de la tabla , luego haga clic en Tableize It 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.

Haga clic en 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.

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?

  • HTML Goodies le brinda excelentes ideas de etiquetas <span>.
  • Dynamic Drive 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.