Vous voulez que votre site Web soit superbe, 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 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 la fonctionnalité 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.
Vous avez probablement vu l'effet de parallaxe utilisé sur des sites Web avec des publicités en ligne. Lorsque vous faites défiler un article, l'image d'arrière-plan semble défiler à un rythme différent ou une publicité apparaît.
Alternativement, peut-être que l'image d'arrière-plan change lorsque vous visitez différentes parties du site. C'est un effet sympa qui ajoute de la profondeur visuelle au contenu et idéal même si vous ne comprenez pas le code HTML de base.
Vous pouvez jouer avec l'effet et copier le code d'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 Header/Footer Parallax ci-dessus à partir de CodePen.
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 n'occupe 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.
Saisie :
Mettre du texte dans cette boîte vous permettra de voir jusqu'où il peut s'étendre - éventuellement les barres de défilement devraient s'afficher, vous permettant de faire défiler le texte. C'est ça! :)
Si vous désirez quelque chose d'un peu plus fantaisiste, vous pouvez également récupérer le code d'une boîte de commentaires personnalisable à partir de Quackit.
Ils proposent plusieurs modèles, mais vous pouvez également utiliser leur éditeur pour modifier et tester (exécuter) manuellement votre code personnalisé.
Avec une simple balise HTML , vous pouvez ajouter une tonne d'effets sympas à votre texte ou à vos images. Notez que tous ne fonctionnent pas sur tous 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 .
Saisie :
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 de fond. Celui-ci a fière allure si la taille de la police du texte est plus grande.
Saisie :
MakeUseOf présente...
Le même effet est obtenu en ajoutant les éléments de style et de police au texte dans une balise .
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 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.
Saisie :
Passez votre souris sur moi !
Démo de sortie :
6. Les astuces HTML les plus cool à ce jour :défilement ou chute de texte
Lorsque vous recherchez "marquee html" sur Google, vous découvrirez un petit œuf de Pâques. Vous voyez le nombre de résultats de recherche par défilement en haut ? C'est un effet créé par la balise marquee 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.
Saisie :
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 assez irritants s'ils sont trop utilisés.
Pour un effet de texte qui tombe, rendez-vous à nouveau sur Quackit et copiez leur code de chapiteau hautement personnalisé.
7. Construire un Cool Switchmenu avec HTML
Les astuces HTML les plus cool sont les effets HTML dynamiques. Cependant, ils sont souvent basés sur des scripts. Voici un effet pour les menus dont vous conviendrez qu'il est très élégant.
C'est un peu plus compliqué que votre balise HTML moyenne car cela 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
de votre site Web.
Saisie :
Et ce code va là où vous voulez que le menu dynamique apparaisse.
Sujets
- Navigateurs/Addons
- Applications Web
- Conseils pratiques
- Logiciel sympa
...et plus!
Rédacteurs
- Karl Gechlik
- Tina
- Varun Kashyap
...et plus!
Divers
- À propos
- Contact
- Archives
- Avertissement
Démo de sortie :
Malheureusement, nous ne pouvons pas démontrer cet effet ici. Mais la source d'origine, Dynamic Drive, propose 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 ! transformer vos données en 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, car 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. Envisagez de 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 très pratique.
Plus de codes et d'effets HTML sympas pour votre site
La puissance de HTML, CSS et JavaScript offre des options potentiellement illimitées pour des effets époustouflants sur votre site Web. Vous en voulez plus ?
- HTML Goodies vous propose d'excellentes idées de balises .
- Dynamic Drive propose de nombreux scripts HTML dynamiques incroyables.
- Quackit propose un 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 codage HTML de base.
[]
