8 Effets HTML Simples et Professionnels pour Enrichir Vos Sites Web

Vous souhaitez rendre votre site web plus attractif sans maîtriser le développement avancé ? Pas de panique ! Grâce à des balises HTML basiques et un simple copier-coller, vous pouvez ajouter des effets sophistiqués. Ces modèles gratuits améliorent la fonctionnalité et l'expérience utilisateur (UX), combinant souvent HTML, CSS et un soupçon de JavaScript.

1. Effet de parallaxe élégant avec HTML

L'effet de parallaxe crée une profondeur visuelle : l'arrière-plan défile à un rythme différent du contenu principal. Idéal pour les headers ou footers, il est accessible même aux débutants.

Testez et copiez le code simple sur W3Schools.

Pour une version avancée (HTML + CSS + JS), récupérez ce code sur CodePen.

2. Zone de commentaires défilante personnalisable

Cette boîte compacte gère les longs textes sans encombrer la page. Personnalisez couleurs et taille via CSS.

Exemple de code :

<div style="width: 25%; height: 50px; overflow: auto; scrollbar-face-color: #CE7E00; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #6F4709; scrollbar-3dlight-color: #111111; scrollbar-darkshadow-color: #6F4709; scrollbar-track-color: #FFE8C1; scrollbar-arrow-color: #6F4709;">
Texte long pour activer le défilement...
</div>

Pour plus d'options, utilisez l'éditeur de Quackit.

8 Effets HTML Simples et Professionnels pour Enrichir Vos Sites Web

3. Astuce HTML : Texte surligné

Utilisez la balise <span> pour des effets visuels compatibles Chrome, Edge et Firefox.

Code :

<span style="background-color: #FFFF00;">Votre texte surligné ici.</span>

Résultat : 8 Effets HTML Simples et Professionnels pour Enrichir Vos Sites Web

4. Image de fond sur le texte

Ajoutez une texture élégante au texte avec une police plus grande.

Code :

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

Affichez un message au passage de la souris, parfait pour les explications.

Code :

<span title="Ceci est l'info-bulle !">Survolez-moi.</span>

Résultat : 8 Effets HTML Simples et Professionnels pour Enrichir Vos Sites Web

6. Texte défilant ou tombant (attention : obsolète)

La balise <marquee> (dépréciée mais encore supportée) crée un défilement. Utilisez-la avec modération pour éviter l'irritation.

Code :

<marquee>Texte qui défile !</marquee>

Résultat : 8 Effets HTML Simples et Professionnels pour Enrichir Vos Sites Web

Pour un effet tombant personnalisé, voir Quackit.

7. Menu déroulant dynamique

Créez un menu accordéon élégant sans fichiers externes. Collez ce code dans la <head> et le body.

Code complet (simplifié et corrigé) :

<style>
.menutitle { cursor: pointer; margin-bottom: 5px; background: #ECECFF; color: #000; width: 140px; padding: 2px; text-align: center; font-weight: bold; border: 1px solid #000; }
.submenu { margin-bottom: 0.5em; display: none; }
</style>
<script>
function SwitchMenu(obj) {
  var el = document.getElementById(obj);
  var ar = document.getElementById("masterdiv").getElementsByTagName("span");
  for (var i=0; i<ar.length; i++) {
    if (ar[i].className=="submenu") ar[i].style.display = "none";
  }
  el.style.display = (el.style.display != "block") ? "block" : "none";
}
</script>
<div id="masterdiv">
  <div class="menutitle" onclick="SwitchMenu('sub1')">Sujets</div>
  <span id="sub1" class="submenu">
    - <a href="https://www.makeuseof.com/service/browser">Navigateurs</a><br>
    - <a href="https://www.makeuseof.com/service/web_based">Apps Web</a><br>
    ...</span>
  <div class="menutitle" onclick="SwitchMenu('sub2')">Rédacteurs</div>
  <span id="sub2" class="submenu">...</span>
  <div class="menutitle" onclick="SwitchMenu('sub3')">Divers</div>
  <span id="sub3" class="submenu">...</span>
</div>

Testez sur Dynamic Drive.