8 effets HTML sympas que n’importe qui peut ajouter à leurs sites Web

Hibou Gourou

Vous voulez que votre site Web soit génial, mais vos compétences en développement Web font défaut.

Ne désespérez pas! Vous n'avez pas besoin de connaître CSS ou PHP pour créer un site sophistiqué avec des effets sympas. Quelques balises HTML simples et savoir comment copier-coller feront l'affaire.

Pour vous aider à démarrer avec des effets HTML sympas, nous avons compilé ces modèles de code d'effet HTML gratuits. Ils amélioreront les fonctionnalités et l'expérience utilisateur de votre site, sans vous ruiner. Bien qu'ils soient principalement HTML, ces codes sympas peuvent également contenir du CSS et du PHP.

1. Effet de parallaxe cool avec HTML

Vous avez probablement vu l'effet de parallaxe utilisé sur les sites Web avec des publicités en ligne. Lorsque vous faites défiler un article vers le bas, l'image d'arrière-plan semble défiler à un rythme différent ou une publicité apparaît.

Sinon, l'image d'arrière-plan change peut-être lorsque vous visitez différentes parties du site. C'est un effet sympa qui ajoute de la profondeur visuelle au contenu et est idéal même si vous ne comprenez pas le code HTML de base .

Vous pouvez jouer avec l'effet et copier le code pour un simple effet de défilement Parallax à partir de W3Schools .

Dans sa version la plus sophistiquée, cet effet est une combinaison de HTML, CSS et JS.

Allez-y et récupérez les codes pour l' effet de parallaxe d'en – tête / pied de page ci-dessus à partir de CodePen .

2. Code de zone de commentaire HTML défilable

Il s'agit d'un élément HTML simple mais utile qui vous permet de regrouper de longs extraits de texte dans un format compact. De cette façon, il ne prend pas tout l'espace sur la page.

Vous pouvez jouer avec les couleurs et la taille de la zone de texte pour l'adapter à vos besoins.

Contribution:

 <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 vous désirez quelque chose d'un peu plus sophistiqué, vous pouvez également récupérer du code pour une boîte de commentaires personnalisable de Quackit .

Ils proposent plusieurs modèles, mais vous pouvez également utiliser leur éditeur pour modifier et tester (exécuter) manuellement votre code personnalisé.

3. Une astuce HTML sympa: texte en surbrillance

Avec une simple balise HTML <span>, vous pouvez ajouter une tonne d'effets sympas à votre texte ou à vos images. Notez que tous ne fonctionnent pas sur les navigateurs. Ceux mentionnés ici fonctionnent dans Google Chrome, Microsoft Edge et Mozilla Firefox.

Cet effet de texte HTML met en évidence le texte entre les balises <span>.

Contribution:

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

Démo de sortie:

4. Ajouter une image d'arrière-plan au texte

De même, vous pouvez changer la couleur de votre texte ou ajouter une image d'arrière-plan. Celui-ci a fière allure si la taille de la police du texte est plus grande.

Contribution:

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

Le même effet est obtenu en ajoutant les éléments de style et de police au texte dans une balise <strong>.

Démo de sortie:

5. Astuce HTML utile pour ajouter une info-bulle de titre

Une info-bulle de titre apparaît lorsque vous faites défiler avec la souris sur un morceau de texte ou d'image «manipulé». Vous les aurez vus utilisés sur des sites Web sur des images, du texte lié ou même des éléments de menu dans des applications de bureau. Utilisez ce code HTML pour ajouter une info-bulle au texte brut de votre page Web.

Contribution:

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

Démo de sortie:

6. Les astuces HTML les plus cool à ce jour: texte défilant ou tombant

Lorsque vous recherchez "marquee html" sur Google, vous découvrirez un petit œuf de Pâques. Voir le nombre de résultats de recherche défilants en haut? C'est un effet créé par la balise de sélection désormais obsolète. Bien que cet effet de texte HTML autrefois cool soit obsolète, la plupart des navigateurs le prennent toujours en charge.

Contribution:

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

Démo de sortie:

Vous pouvez ajouter d'autres attributs pour contrôler le comportement de défilement, la couleur d'arrière-plan, la direction, la hauteur, etc. Attention cependant; ces effets peuvent devenir très irritants s'ils sont surutilisés.

Pour un effet de texte tombant cool, dirigez-vous à nouveau vers Quackit et copiez leur code de sélection hautement personnalisé.

7. Créez un menu de commutation sympa avec HTML

Les astuces HTML les plus intéressantes sont les effets HTML dynamiques. Cependant, ils sont souvent basés sur des scripts. Voici un effet pour les menus qui, vous en conviendrez, semble très élégant.

C'est un peu plus compliqué que votre balise HTML moyenne car elle fonctionne avec une feuille de style et des scripts. L'avantage est que vous n'avez pas besoin de télécharger un fichier CSS ou script pour le faire fonctionner. Au lieu de cela, collez simplement le code suivant dans la section <head> de votre site Web.

Contribution:

 <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>

Démo de sortie:

Malheureusement, nous ne pouvons pas démontrer cet effet ici. Mais la source d'origine, Dynamic Drive , présente une copie de travail de cet effet HTML dynamique.

8. Obtenir une feuille de calcul HTML avec Tableizer

Si vous souhaitez afficher une feuille de calcul sur votre site, laissez Tableizer! transformez vos données en un tableau HTML. Collez simplement les données brutes d'Excel, de Google Doc ou de toute autre feuille de calcul dans l'outil de conversion sur tableizer.journalistopia.com . Ajustez les options du tableau , puis cliquez sur Tableize It pour recevoir la sortie HTML.

C'est peut-être l'un des codes HTML les plus cool pour votre site Web, comme Tableize It! fait tout le travail acharné.

Cliquez sur Copier le code HTML dans le presse-papiers pour copier le code HTML et l'ajouter à votre site Web. Pensez à modifier les couleurs d'arrière-plan pour le rendre beaucoup plus cool.

Bien que ce ne soit pas vraiment un effet HTML, c'est assez pratique.

Plus de codes HTML et d'effets pour votre site

La puissance de HTML, CSS et JavaScript offre des options potentiellement illimitées pour des effets époustouflants sur votre site Web. Vouloir plus?

  • HTML Goodies vous donne d'excellentes idées de balises <span>.
  • Dynamic Drive possède de nombreux scripts HTML dynamiques incroyables.
  • Quackit propose du code HTML sympa.

Nous vous avons montré huit codes HTML sympas que vous pouvez copier pour améliorer votre site Web. Bien que différents, ils sont tous faciles à mettre en œuvre tant que vous connaissez les techniques de base de codage HTML.