Code CSS pour formatage de texte en code HTML (défilement texte)
Mon post sur le Forum WebAcappella
https://forum.intuisphere.com/t/resolu-code-css-pour-formatage-de-texte-en-code-html-defilement-de-texte/11956
Défilement de texte avec code CSS
Essai - Test - Essai - Test - Essai - Test - Essai - Test - Essai - Test - Essai - Test - Essai - Test - Essai - Test
AlbertX
12 avr.
Bonsoir @Edelweiss.
Place le code ci-dessous dans Propriétés du texte => Onglet CSS => Editer le code CSS.
En procédant de la sorte, tu gardes la main sur le formatage de ton texte via WAFusion (Police, taille, couleur).
@+AX.
Le Code CSS
.$ {
display:block;
-webkit-animation:linear marqueelike 20s infinite ;
-moz-animation:linear marqueelike 20s infinite ;
-o-animation:linear marqueelike 20s infinite ;
-ms-animation:linear marqueelike 20s infinite ;
animation:linear marqueelike 20s infinite ;
margin-left:-100%;
padding:0 5px;
text-align:left;
height:25px;
}
.$ :after {
content:attr(data-text);
position:absolute;
white-space:nowrap;
padding-left:10px;
}
@-webkit-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@-moz-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@-o-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@-ms-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@media only screen and (max-width: 860px) {
.defileParent {
display: block;
margin: 3em auto;
overflow: hidden;
position: relative;
table-layout: fixed;
width: 100%;
}
.$ {
display:block;
-webkit-animation:linear marqueelike 15s infinite ;
-moz-animation:linear marqueelike 15s infinite ;
-o-animation:linear marqueelike 15s infinite ;
-ms-animation:linear marqueelike 15s infinite ;
animation:linear marqueelike 15s infinite ;
margin-left:-100%;
padding:0 5px;
text-align:left;
height:25px;
}
}
AlbertX
12 avr.
@Edelweiss.
Les modifications se font comme pour un texte classique, directement via les propriétés du texte dans l’interface de WAFusion.
Pas besoin de toucher au code. Je dirais même n’y touche surtout pas !
@+AX.
MaryHabitué
13 avr.
Bonjour @Edelweiss

Edelweiss:
Connais-tu un site pour « grand débutant » dans le domaine du HTML et du CSS me permettant de m’autoformer dans ce domaine, étant à la retraite j’ai du temps devant moi
Je te conseil les cours libres d’Open Classroom
Juste une inscription pour les cours libres ils sont au top  OpenClassrooms

Apprenez à créer votre site web avec HTML5 et CSS3
Vous rêvez d'apprendre à créer des sites web ? Débutez avec ce cours qui vous enseignera tout ce qu'il faut savoir sur le développement de sites web en HTML5 et CSS3 !
Apprenez à créer votre site web avec HTML5 et CSS3
Vous souhaitez créer vos propres sites web ? Vous êtes au bon endroit ! Dans ce cours, vous apprendrez comment utiliser HTML5 et CSS3, les deux langages de programmation à la base de tous les sites web.
Vous pensez peut-être que vous n'êtes pas fait pour apprendre un langage informatique, mais ne vous inquiétez pas : HTML et CSS sont des langages simples, que nous allons découvrir pas à pas, au cours de nombreux exercices. Vous serez bientôt capable d'ajouter du texte à votre site, de construire un menu de navigation, d'insérer des images... et bien plus encore !
Alors, prêt à réaliser un site web de A à Z ?
Objectifs pédagogiques
À la fin de ce cours, vous serez capable de :
¤ utiliser du code HTML ;
¤ structurer une page web en HTML ;
¤ utiliser du code CSS ;
¤ mettre en forme une page web en CSS ;
¤ organiser les éléments d’une page web grâce au CSS ;
¤ modifier l'agencement d'une page HTML avec CSS ;
¤ intégrer des formules dans une page web ;
¤ adapter une page pour les petites résolutions en CSS.
Prérequis : aucun
Outil nécessaire :
Un éditeur de texte comme Sublime text ou Brackets