28111 sujets

CSS et mise en forme, CSS3

Pages :
Modérateur
Bonjour,

C'est pas clair: pas de h1 , h2 sans enfants, des scripts de partout ... ombrages en miroir ou pas et des valeurs ne correspondant pas aux longueurs de textes. Finalement ce que je t'avais proposé n'était pas si indigeste que ça au vu Smiley cligne
Qu'est ce qui coince, grid, le défilement, le texte en miroir ?

Cdt
Modérateur
el_debutanti a écrit :
Bonjour gcyrillus,
Si seulement je savais Smiley confused
Pour te donner une idée :

Bon week-end,
ED


bonjour,

okay, erreur similaire à la précédente Smiley smile

* le conteneur à faire glisser est absent ( si tu préfère un span au lieu d'un custom element c'est pareil)

* le text et les 100vh - Xem ne sont pas raccord non plus ici sur de petits écran

Pour le text miroir , comme on a vu que text-shadow etait inopérant dans chrome, il peut-être doublé par le filter:drop-shadow()
Le texte fait environ 15/16em de longueur , en ajoutant un padding , on peut se servir de ces valeurs pour le déplacement et les miroirs de façon a ce qu'au démarrage et en fin de l'animation, textes et ombrages se superposent en cohérence.

* J'ai mis des couleurs différentes et une bordure pour que tu visualise le déplacent de la boite et des ses ombrages en miroir ainsi qu'une valeur correspondant a la longueur du texte + un petit espace (le padding).

https://codepen.io/gc-nomade/pen/GRQLrzz

Cette longueur de texte ou largeur/hauteur de boite vaudra la peine d'être récupérer en JavaScript et de réinjecter cette valeur dans le CSS via une variable CSS var(). (cela peut faire l'objet d'une autre question )

Cdt
Modifié par gcyrillus (18 Jun 2022 - 14:45)
Meilleure solution
reBonjour,
Merci beaucoup pour toutes ces précisions/renseignements.
Je suis allé voir pour les filter:drop-shadow, c'est trop costaud pour moi Smiley murf
T'es génial !!!!!!
Encore merci et bon week-end !
par contre, on ne peut répéter l'animation qu'avec les ombrages en miroir ?
Cela me pose problème, je ne gère pas du tout la chose Smiley ohwell
Modifié par el_debutanti (18 Jun 2022 - 18:18)
Modérateur
el_debutanti a écrit :
par contre, on ne peut répéter l'animation qu'avec les ombrages en miroir ?
Cela me pose problème, je ne gère pas du tout la chose Smiley ohwell


Non, tu peut opter pour plusieurs autres moyens, en vrac
* JavaScript en clonant la boite ou juste son texte et en la positionnant
* HTML écrire le même texte plusieurs fois (bof)
* HTML/CSS se servir d'un attribut data qui contient le même texte en le réinjectant dans les pseudos ::before et ou ::after
* et d'autres auxquels je ne pensent pas forcement sur le moment.

Cdt