Home-theater-designers
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 des sites Web avec des publicités en ligne. Lorsque vous faites défiler un article vers le bas, le 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 le faites pas. comprendre le code HTML de base .
Vous pouvez jouer avec l'effet et copier le code pour un effet de défilement de parallaxe simple 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 ce qui précède Effet de parallaxe en-tête/pied de page de CodePen .
2. Code de zone de commentaire HTML déroulant
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.
Saisir:
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! :) Si vous désirez quelque chose d'un peu plus sophistiqué, vous pouvez également récupérer le 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 : le texte en surbrillance
Avec un simpleBalise 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 lesMots clés.
Saisir:
Your highlighted text here.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 de fond. Celui-ci a fière allure si la taille de la police du texte est plus grande.
Saisir:
MakeUseOf presents...Le même effet est obtenu en ajoutant les éléments de style et de police au texte dans un étiqueter.
pas de son des haut-parleurs windows 10
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.
Saisir:
Move your mouse over me!Démo de sortie :
6. Les astuces HTML les plus cool à ce jour : faire défiler ou tomber du texte
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éfilant en haut ? C'est un effet créé par la balise chapiteau désormais obsolète. Bien que cet effet de texte HTML autrefois cool ait été déprécié, la plupart des navigateurs le prennent toujours en charge.
Saisir:
I wanna scroll with it, baby!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 trop utilisés.
Pour un effet de texte tombant cool, retournez à Quackit et copiez leur code de chapiteau hautement personnalisé.
7. Construisez un menu de commutation sympa 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 qui, vous en conviendrez, semble très lisse.
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 de votre site Web.
Saisir:
.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;
}
/***********************************************
* 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('n')
document.write('.submenu{display: none;}n')
document.write('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 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
And this code goes wherever you want the dynamic menu to appear.
Topics
- Browsers/Addons
- Web Apps
- How-To Tips
- Cool Software
...and more!
Staff Writers
- Karl Gechlik
- Tina
- Varun Kashyap
...and more!
Miscellaneous
- About
- Contact
- Archives
- Disclaimer
Démo de sortie :
Malheureusement, nous ne pouvons pas démontrer cet effet ici. Mais la source d'origine, Entraînement dynamique , présente une copie de travail de cet effet HTML dynamique.
8. Obtenez 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 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 à l'adresse tableizer.journalistopia.com . Ajustez le options de tableau , puis clique Tableize 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 dur.
Cliquez sur Copier le 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.
comment coller sans formater mac
Bien que ce ne soit pas vraiment un effet HTML, c'est assez pratique.
Plus de codes HTML et d'effets 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. Vouloir plus?
- Bonus HTML vous donne grandidées de balises.
- Entraînement dynamique a de nombreux scripts HTML dynamiques incroyables.
- charlatan offre 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.
Partager Partager Tweeter E-mail 17 exemples de code HTML simples que vous pouvez apprendre en 10 minutesVous voulez créer une page Web de base ? Apprenez ces exemples HTML et essayez-les dans un éditeur de texte pour voir à quoi ils ressemblent dans votre navigateur.
Lire la suite Rubriques connexes- La programmation
- HTML
- Développement web
- Outils pour les webmasters
Éditeur adjoint pour la sécurité, Linux, le bricolage, la programmation et la technologie expliquée, et producteur de podcasts vraiment utiles, avec une vaste expérience dans le support de bureau et de logiciels. Contributeur au magazine Linux Format, Christian est un bricoleur de Raspberry Pi, un amateur de Lego et un fan de jeux rétro.
Plus de Christian CawleyAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner