8 efectos HTML increíbles que cualquiera puede agregar a sus sitios web

Quieres que tu sitio web se vea bien, pero faltan tus habilidades de desarrollo web.


html-efectos-opcional

¡No desesperes! No necesita saber CSS o PHP para crear un sitio elegante con efectos interesantes. Unas pocas etiquetas HTML simples y saber cómo copiar y pegar estará bien.

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 increíbles códigos también pueden contener algo de CSS y PHP.

1. Fant√°stico 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 interesante que agrega profundidad visual al contenido y es ideal incluso si no comprende el HTML b√°sico.


código-de-la-página-web-mostrada-en-el-monitor-de-la-computadora

Puede jugar con el efecto y copiar el código para 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 recupere los c√≥digos para el efecto de encabezado / pie de p√°gina de Parallax de CodePen.

Este es un elemento HTML simple pero √ļtil que le permite comprimir 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 tama√Īos del cuadro de texto seg√ļn 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.

El cuadro de comentarios personalizado es un simple efecto HTML

Ofrecen varias plantillas, pero también puede usar su editor para editar y probar (ejecutar) manualmente su código personalizado.

3. Un truco de HTML genial: texto resaltado

Con una simple etiqueta HTML puede agregar toneladas de efectos interesantes 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 .

Entrada:

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

Salida de demostración:

Fant√°stico efecto de texto destacado en HTML

4. Agrega una imagen de fondo al texto

Asimismo, puede cambiar el color de su texto o agregar una imagen de fondo. Esto 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 un etiqueta.

Salida de demostración:

Cuando pasa el cursor sobre un texto o imagen ¬ęmanipulado¬Ľ, se muestra una informaci√≥n sobre herramientas de t√≠tulo. 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 una pista al texto sin formato en su p√°gina web.

Entrada:

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

Salida de demostración:

Las sugerencias se agregan f√°cilmente en HTML

6. Los mejores trucos de HTML hasta ahora: desplazarse o soltar texto

Cuando busque en Google ¬ęmarquee html¬Ľ, descubrir√° un peque√Īo huevo de Pascua. ¬ŅVes el resultado de b√ļsqueda de desplazamiento ascendente? Este es un efecto creado por la etiqueta de marquesina ahora obsoleta. Si bien este impresionante efecto de texto HTML ha quedado obsoleto, la mayor√≠a de los navegadores a√ļn lo admiten.

Entrada:

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

Salida de demostración:

Texto de selección HTML

Se pueden agregar atributos adicionales 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 caída de texto genial, diríjase a Quackit nuevamente y copie su código de selección altamente personalizado.

Los trucos HTML m√°s interesantes son los efectos HTML din√°micos. Sin embargo, a menudo se basan en secuencias de comandos. Aqu√≠ hay un efecto de men√ļ en el que estar√°s de acuerdo en que se vea muy fluido.

Es un poco más complicado que la etiqueta HTML promedio porque funciona con una hoja de estilo y un script. 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.

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>

Salida de demostración:

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! 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 la herramienta de conversión en tableizer.journalistopia.com. Edita el archivo opciones de mesa, luego haga clic en Tableizarlo para recibir salida HTML.

Convertir tablas a 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 cambiar los colores de fondo para hacerlo mucho más interesante.

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. ¬ŅQuiero m√°s?

Le mostramos ocho excelentes códigos HTML 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.


código-html-simple

17 ejemplos sencillos de código HTML que puede aprender en 10 minutos

Aunque los sitios web modernos generalmente se construyen con interfaces f√°ciles de usar, es √ļtil conocer algo de HTML b√°sico. Si conoce las siguientes 17 etiquetas de ejemplo HTML (y algunos extras), podr√° …


Sobre el Autor

.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *