18034 sujets

Questions générales et questions de débutants

Faisable en Css ?

Pages :
Bonjour tous le monde,

Je me demande si c'est possible de créer une ligne avec un petit carré répéter x fois, nombres d'étapes pouvant être choisi, sur tout la largeur d'une page en lui demandant de faire une rotation, puis de revenir à sa position initiale en fin de course avec du Css ? . .. j'ai mis une image être compris. Smiley murf

upload/48809-ligneetape.jpg ici il y a 7 étapes entre les deux carrées.

Alsa à fait un article très bien sur les animations avec timing : ici

Est-ce que c'est comme ça que doit être construit le css de mes petits carré et leur appliquer une rotation dans un sens puis dans l'autre ? Est ce que je peux mettre un nombre de répétition ? peut-être en mettant un padding ?

Merci de toutes vos suggestions ! Smiley smile
Modérateur
Salut,

mmmmm... tu veux une amination ? Que tes carrés bougent ? A la re-re-re-re-lecture il me semble que tu veux juste découper une rotation de 90° en X fois ou X est le nombre de carré dans le html.

Du genre si il y a 3 carrés, le premier a rotate(0deg); le second 45 et le troisième 90...

j'ai tout faux ? Smiley biggol
Modifié par _laurent (24 Aug 2015 - 14:41)
Salut,

Comme Laurent, j'ai du mal à bien comprendre ta demande. Tu veux que les carrés apparaissent en même temps ? Que tes carrés soient en rotation ET en translation ?
Qui choisit le nombre d'étapes ? La position initiale est la position de la rotation et/ou la position sur l'axe x ?
_laurent, MatthieuR,

J'aimerai faire une ligne de petits carrés, avec une rotation découpée en étape de carré. Ce n'est pas une animation. Comme si je faisais répété mon image en repeat-x ..

Mon premier et mon dernier carré sont carré, le milieu est le carré à 45° (losange).. Entre celui du milieu, le début et la fin, des carrés qui font la transition visuelle.

_laurent <- T'as tout compris ! Smiley biggrin
Ok, compris et tu veux générer ton HTML de manière statique ou dynamique (genre une boucle en JS ou PHP...) ?
Modérateur
Du coup, en css pur ça va etre tendu... le plus gros problème que je vois c'est la récupération du nombre de carré... en css je sais pas si c'est possible... je serais plutôt partit sur un petit calcul en js... c'est assez rapide et beaucoup moins tordu que ce qu'on pourra pondre je pense Smiley sweatdrop
Snif pas de Css Smiley confus

En faite le nombre de carré est proportionnel à la largeur du navigateur. 30 étapes pour un grand écran par exemple, 3 pour du portable. . Smiley crazy

Statique ou dynamique, très bonne question ?! Smiley biggol Disons que je veux pouvoir si je trouve qu'il y a trop de carré réduire le nombre assez facilement.

Ce que je veux faire servira de ligne séparatrice.
Modifié par blond1n (24 Aug 2015 - 16:05)
En php tu pourrais avoir ça :
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title></title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="wrapper">
<?php
$steps = 10;
for ($i = 0; $i < $steps; $i++) : 
  $deg = 90 / ($steps - 1) * $i; ?>
  <div class="carre" style="transform:rotate(<?php echo $deg; ?>deg)"></div>
<?php endfor; ?>
</div>

</body>
</html>

Avec style.css qui ressemble à ça :
.wrapper{
  display: flex;
  justify-content: space-between;
  background-color: red;
}
.carre{
  float: left;
  height: 40px;
  width: 40px;
  border: solid 2px black;
}

Il faudrait le faire en JS.
Punaise j'aimerai bien pouvoir pondre un petit code comme celui là sans me triturer le crâne ou passer par un fourm ! Smiley confused

c'est possible de faire un choix selon la taille d'écran en js ? 30 etape pour un grand écran, 10 pour une tablette ?

Ou de dire que le max c'est 45 pour 1745px de navigateur et que cela reste proportionnel si je réduis la largeur, pc portable , tablette, .. .
Modifié par blond1n (24 Aug 2015 - 16:39)
blond1n a écrit :
Le display : flex ne risque pas de déconner pour les anciens navigateurs ?

Seulement si tu veux être compatible IE9 <=, sinon tu préfixes tes propriétés (http://caniuse.com/#search=flex). Nous avons des experts du flexbox sur le forum qui pourraient te dire ce qu'ils en pensent...
Si tu veux, tu peux ne pas utiliser flexbox et calculer tes espaces en % de la même manière que les angles de la rotation.
Modifié par MatthieuR (24 Aug 2015 - 16:52)
bluffant la vitesse de codage ! ! Smiley biggol

Est possible de faire 45 étapes pour un écran/navigateur de 1770px et par proportion, si le navigateur est moins large ou plus large le script fait le ratio du nombre de carré à mettre ?

Je préfère que les personnes qui possèdent ces vieux navigateurs I9 ou I8 puissent voir sans bug cette superbe ligne de petit carré Smiley smile
Modifié par blond1n (24 Aug 2015 - 17:04)
Bon bah maintenant tu vas bosser un peu Smiley langue , je pense que tu as tous les éléments pour
1- ne pas utiliser flexbox en calculant des blocs égaux répartis sur l'ensemble de la largeur (si tu as 10 carrés, tu auras 10 blocs de 10% de largeur et les carrés seront centrés dans chacun de ces blocs)
2- calculer le nombre de carrés que tu veux afficher en fonction de la largeur de ta fenêtre (il faudra juste penser à arrondir le résultat de ta divison pour que la variable steps soit toujours un entier : Math.ceil() ou Math.floor())

Tu nous montreras le résultat Smiley cligne

EDIT : pour la répartition sans flex tu peux tout à fait jouer sur un margin-right aussi (avec le dernier margin-right : 0 (.carre:last-child{...}))
Modifié par MatthieuR (24 Aug 2015 - 17:13)
Merci du coup de main ! Je vais m'y coller ! ça sens le mal de tête Smiley lol mais il faut bien que je bosse un peu Smiley biggrin

Je mets le code dès que j'ai réussi à faire quelque chose. . Smiley murf

Encore merci de tout ce temps passé. .. Smiley smile
Sur Flexbox, oui ça risque de déconner sur les anciens navigateurs (IE9 et précédents) mais la question est de savoir s'il est vraiment nécessaire aujourd'hui de supporter un affichage optimal pour ces navigateurs.
À mon souvenir, on est à moins de 4% d'utilisateurs IE9- ce qui est inférieur au nombre de personnes concernées par les politiques d'accessibilité d'internet pour lesquels on ne fait souvent rien.
MatthieuR a écrit :

Seulement si tu veux être compatible IE9 &lt;=, sinon tu préfixes tes propriétés (http://caniuse.com/#search=flex). Nous avons des experts du flexbox sur le forum qui pourraient te dire ce qu'ils en pensent...
Si tu veux, tu peux ne pas utiliser flexbox et calculer tes espaces en % de la même manière que les angles de la rotation.


Sinon tu peut te servir de inline-block, text-align:justify et inserer un element supplementaire qui force une seconde ligne via un pseudo ou un element HTML (comme ça peut aussi être compatible IE5 Smiley langue ) http://codepen.io/anon/pen/EjqOgj
Pages :
Sujet clos
Aller à