En css { display: flex; (Placer les blocs côte à côte, ligne) flex-direction: column; (en colonnes) row; (par défaut, ligne)row-reverse; (ordre inverse)column-reverse; (ordre inverse) flex-wrap: wrap; (passe à la ligne, aussi pour les colonnes) no-wrap; (annule)wrap-reverse; (en inversant) Aligner sur l’axe principal :justify-content: flex-start; (au début) flex-end; (à la fin)center; (au centre)space-between;…
Catégorie : CSS
Bootstrap le retour
Pour démarrer une page bootstrap, il nous faut un squelette de base qui comprend les liens et les scriptes. Le lien vers le site Bootstrap ici Nous pouvons également placer un lien pour les icônes. Un lien pour les icônes ici Puis un lien vers notre page de styles CSS. Page de départ, avec la…
« GRID »- grille CSS
Pour mettre en place la grille css il nous faut définir le parent (généralement une enveloppe) en lui attribuant plusieurs choses. display: grid; (appel).grid-template-columns (défini la largeur des colonnes, fr = fraction)grid-gap (donne la largeur des goutières)Nous lui attribuons « grid-auto-flow: dense; » qui l’oblige à combler les vides au lieu que les blocs se suivent. ex:…
Bloc, proportion
Quelques exemples pour garder les blocs proportionnels, hauteur-largeur. Avec les nouvelles « dimension » VW pour la largeur et la hauteur. Ou en insérant un bloc invisible à l’aide d’un : : before et d’un display: flex; Cette méthode peut-être utile pour les iframe. Exemple de code:
Animation, suite!
Mettre en application les animations les transitions sur une galerie La partie code html et css qui nous intéresse: Travail perso: Le code
Animation 3D
La base d’un cube 3D: Mettre ce cube sur un plan. Un article pour faire un cube vraiment intéressant https://la-cascade.io/creer-un-cube-en-css/ N’hésitez pas à cliqué sur voir la démo Par la suite: Pour donner un effet de perspective il faut englober les cubes dans une autre div et utiliser la propriété » perspective: 2000px; » Avec quelque transitons…
Animation avec les »sprite »
La technique consiste à charger toute les images d’une animation et de n’en afficher qu’une seul. Ensuite, de déplacer le fond de manière à faire apparaitre la seconde image, puis la troisième, etc … pour donner ainsi l’illusion de mouvement. Ceci peut-être répéter à l’infinie. Ici un exemple de code, donnant l’illusion d’un personnage qui…
Animation et Javascript
Une première animation avec intégration de javascript. En commentaire les différente méthode d’intégration du onclick. Dans le html ou dans un script. Il faut bien faire attention à ce que chaque bouton et élément devant être actionné en même temps face partie d’un parent commun. Le script du fichier classlist.js
Evaluation
Une bannière à reproduire. D W 0 2 Les Web Designers de première classe Mon code: Le code du prof: Le: animation-fill-mode: both; sert ici au fait que les billes étant placé à gauche (dans l’exemple du prof), les billes ne seront pas vues a gauche au démarrage. Nous pouvons faire repartir les billes, au survol, en…
Animation
La règle @keyframes Lorsque vous spécifiez des styles CSS dans la @keyframes règle, l’animation passera progressivement du style actuel au nouveau style à certains moments. Pour qu’une animation fonctionne, vous devez la lier à un élément. L’exemple suivant lie l’animation « exemple » à l’élément <div>. L’animation durera 4 secondes et changera progressivement la couleur de fond de l’élément <div>…