28106 sujets

CSS et mise en forme, CSS3

Pages :
Modérateur
bonjour/bonsoir

Voici une autre approche similaire avec text-shadow. L'idée est de récupérer la la largeur occupée par le texte + un petit décalage et de l’appliqué via une variable CSS. https://codepen.io/gc-nomade/pen/oNdVGag / https://codepen.io/gc-nomade/pen/OJZqGve

PLGPPUR a écrit :

Quelles sont les valeurs à donner ?

JavaScript est requis pour obtenir la largeur occupée pour ensuite la réinjectée.

ça peut marcher pour des textes relativement court.

cdt
Modifié par gcyrillus (16 Oct 2022 - 11:46)
Bonjour gcyrillus,
Merci beaucoup.
Je teste (j'ai peur pour le texte vertical) et reviens vers toi Smiley smile
Bon dimanche Smiley cligne
Je ne comprends pas du tout ton code Smiley confused , c'est trop pointu et pour le coup j'ai du mal à le "manipuler" Smiley hum
Pour la lecture horizontale, j'ai une scrollbar et une "marge" à droite. Pas de width: 100% (non visible sur le jsfiddle) :
https://jsfiddle.net/herde2/26r85jtu/
Et pour la lecture verticale, j'ai juste un problème de positionnement Smiley murf
https://jsfiddle.net/herde2/egcayo4L/1/
Peux-tu m'aider et tenter de m'expliquer ?
Mais c'est vraiment ce que je désire, TOP.
Merci gcyrillus Smiley smile
Modérateur
PLGPPUR a écrit :
Je ne comprends pas du tout ton code Smiley confused , c'est trop pointu et pour le coup j'ai du mal à le "manipuler" Smiley hum
Pour la lecture horizontale, j'ai une scrollbar et une "marge" à droite. Pas de width: 100% (non visible sur le jsfiddle) :
https://jsfiddle.net/herde2/26r85jtu/


Sans centrage, et pour un texte court, il te faut creer des ombrages supplementaire et enfin donner une largeur de 100% à ton conteneur (via js aprés avoir récuperer la largeur que le texte lui fait prendre max-content) + un conteneur parent pour caché l'overflow au besoin. https://jsfiddle.net/cg310zbu/


PLGPPUR a écrit :

Et pour la lecture verticale, j'ai juste un problème de positionnement Smiley murf
https://jsfiddle.net/herde2/egcayo4L/1/
Peux-tu m'aider et tenter de m'expliquer ?
Mais c'est vraiment ce que je désire, TOP.
Merci gcyrillus Smiley smile


Sans centrage en XY, il n'y a pas lieu de repositionné l’élément ou de compensé transform-origin autrement que à 0 0
https://jsfiddle.net/nw6ygezs/

Cdt
Modifié par gcyrillus (16 Oct 2022 - 16:06)
Meilleure solution
Merci ENORMEMENT.
J'ai beaucoup de problèmes d'intégration (texte qui vient sur le body etc...).
Je m'y mets...
Bonne soirée... TOP Smiley biggrin
P.
Bonsoir gcyrillus,
Ce n'est pas ROCK mais ROC, ce n'est pas ROCK mais ROCKY ou pire ROCK'N'ROLL.
Je peux me passer du 'N'Roll Smiley biggol
Comment régler les em sur :
  width: max-content;  text-shadow: 
    calc(var(--offsetText) * 1px + 0.5em) 0 ,
    calc(var(--offsetText) * -1px - 0.5em) 0 ,
    calc(var(--offsetText) * 2 *1px  + 1em) 0 ,
    calc(var(--offsetText) * 2 * -1px - 1em) 0 
    ;
  min-width: calc(var(--offsetText) * 1px + 0.5em);


Je vais continuer à chercher pour le texte vertical car il fonctionne très bien sur mon site... mais à l'horizontale Smiley murf
Je continue à chercher,
Bonne soirée Smiley smile
Bonjour gcyrillus,
Tout il est bon (lecture verticale et horizontale- Smiley smile
Par contre j'ai 2/3 problèmes suite à l'intégration de ces deux codepen... conflits de CSS et soucis HTML Smiley sweatdrop
Pourrais-tu m'éclairer ?
Merci et bonne journée Smiley biggrin
Modérateur
PLGPPUR a écrit :
Bonjour gcyrillus,
Tout il est bon (lecture verticale et horizontale- Smiley smile
Par contre j'ai 2/3 problèmes suite à l'intégration de ces deux codepen... conflits de CSS et soucis HTML Smiley sweatdrop
Pourrais-tu m'éclairer ?
Merci et bonne journée Smiley biggrin


Probablement, qu'as tu fait ? car aucune idées de que tu as en final

Cdt
GENIAL.
Plusieurs choses :
Le texte vertical passe au dessus d'autres div... et du body.
Je suis allé voir côté z-index et <div>, je n'ai rien vu Smiley ohwell Faut-il que je persévère dans cette voie ?

Comment centrer le texte vertical ?

Les textes sont chassés par les div.: les textes dépassent de 100% la hauteur de la div height: 100vh Smiley hum

Pour terminer, j'ai du créer un ID "soustitre" pour un <p> (pour qu'il ne prenne pas les attributs de ton <p> :

#soustitre p {
	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
	font-family: 'ralewayextralight', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-size: 3vw;
	line-height: 4vw;
	margin-top: -10vh;
	width: 80%!important;
	text-align: center !important;
	color: white; text-shadow: black 0.1em 0.1em 0.2em;
	animation: none;
	transform: rotate(90deg);


  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(90deg);

  /* Firefox */
  -moz-transform: rotate(90deg);

  /* IE */
  -ms-transform: rotate(90deg);

  /* Opera */
  -o-transform: rotate(90deg);
}
.rockblock p{

	margin-top: 50vh !important;
}


Une rotation parce que sinon il prend le degré du texte vertical.
Bon, c'est du bidouillage mais avec ton code, le texte de "soustitre" n'est pas centré... il est décalé sur la gauche Smiley bawling

Comment fais-tu dans ton codepen pour dissocier le vertical de l'horizontal ?

J'espère être clair Smiley murf

Merci beaucoup !
P.
J'ai tout "nettoyé" après une visite sur le site du W3C.
Plus de fautes, plus d'erreurs Smiley biggrin
Mais les problèmes demeurent Smiley ohwell
Bonne soirée à toi Smiley smile
P.
J'ai réglé le problème de centrage avec ces CSS :
blockquote h6 {
	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
	font-family: 'ralewayextralight', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-size: 3vw;
	line-height: 4vw;
	margin-top: -10vh;
	margin-left: 10%;
		margin-right: 10%;

	width: 80%!important;
	text-align: center !important;
	color: white; text-shadow: black 0.1em 0.1em 0.2em;
}

J'ai du créer un h6.
Pour le reste...
Bonne soirée ! Smiley smile
Modérateur
Bonsoir,

parfait si tu as tout résolus , j'allais te demander de donner plus d'info sur ton HTML et CSS pour voir ce que tu faisais, mais apparemment tu as réussi a maitrisé tout seul . Bravo.

cdt
Pitié NON !!!!!
a écrit :
Pusieurs choses :
Le texte vertical passe au dessus d'autres div... et du body.
Je suis allé voir côté z-index et <div>, je n'ai rien vu Smiley ohwell Faut-il que je persévère dans cette voie ?

Comment centrer le texte vertical ?

Les textes sont chassés par les div.: les textes dépassent de 100% la hauteur de la div height: 100vh Smiley hum

Comment fais-tu dans ton codepen pour dissocier le vertical de l'horizontal ?

Smiley bawling C'est pas fini... je fais le MAXIMUM !
Merci gcyrillus Smiley sweatdrop
P.
Modérateur
Bonjour,

Dans le codepen, pour le démo, je me sert du sélecteur :nth-child(odd) (prend les éléments en position impair) . Tu peut te servir d'une class si tu en as plusieurs ou un id si tu en as un seul.

Pour le reste, je ne peut pas t'aider car je ne vois pas ce que tu a fait , ton morceau de CSS pour blockquote h6 {/**/} ne démontre pas grand chose seul.: des !important, un width déjà défini et un text-shadow qui ne ressemble en rien à celui du codepen ou le CSS est épaulé de JavaScript pour appliqué des valeurs pour l'ombrage.

Pour t'aider, il faudrait voir ce que tu as fait.

Cdt
a écrit :
je me sert du sélecteur :nth-child(odd) (prend les éléments en position impair

? Smiley bawling
Pour le reste ; je vais tenter de faire un jsfiddle. Je cherche à faire à faire une animation à width 100% pour la verticale et height 100% pour l'horizontale. T'en sais plus.
Vais tenter de voir Smiley sweatdrop . Mais normal qu'il y aie des font-size gigantesques Smiley murf
Merci encore et bonne soirée
Je vais m'y attaquer. Merci Smiley smile
Mais le résultat de ce qu'on a fait n'est pas mal Smiley biggrin
Toujours des prob avec le texte vertical qui "commence" à bottom : -100vh (donc 100vh de body, suis-je clair ? et qui empiète sur les autres div. (et body). Je me suis pourtant amusé avec les z-index Smiley murf et les <div></div>. Le tout validé par le w3c. Mais honnêtement, l'effet désiré n'est pas loin Smiley biggrin . Je ne sais comment exprimer ma joie Smiley biggrin
C'est, comment dire ? c'est là ! pas loin...
Merci énormément Smiley cligne
P.
Il y a pas mal d'effets non voulus qui sont pas mal Smiley biggrin
Mais malheureusement, comme je l'ai écrit, la div parent chasse la div texte qui est à l'intérieur. La hauteur de la div à 100vh + le texte à l'intérieur = 200vh au final Smiley hum
Mais on est pas loin... et avec ce texte vertical qui est à z-index : 999999999999999 (à suivre Smiley cligne .
Merci pour tout !
Modérateur
Tant que tu ne partageras pas ce que tu as fait, tout çe que tu décris n'a que trés peu de signification, voir aucune, pour ceux qui te lisent (la boule de cristal est un mythe), pire, tu t'enfonces probablement en ratant l'origine des causes Smiley decu

Cdt