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 : HTML-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…
Raccourcis pour le HTML
Quelques raccourcis pour gagner du temps/ Page de base : ! et tabulation Commentaire : ctrl / Pour mac : (cmd shift /) Entourer d’une balise : ctrl shift P wrap with abbreviation rentrer le nom de la balise et valider. pour plusieurs paragraphe p* Réorganiser la page : ctrl shift P et choisir beautify…
« 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:
Intégrer du SVG
Pour intégrer du SVG dans une page HTML nous nous servons d’illustrator. Dans notre carte (oui nous faisons une carte cliquable) il faut nommer les groupes pour chaque objets (ici département) si nous voulons styler ces objets, après dans le code. Dans fenêtre – Option d’objet, donner une url aux objets et définir la zone…
Image-picture
Pour chargé des images en multiple format . Le navigateur choisira dans l’ordre celui qu’il peut ouvrir. Exemple du code: <picture> <source srcset= »images/172724622_ecaa7b22d1_b_resultat.webp » type= »image/webp »> <source srcset= »images/172724622_ecaa7b22d1_b_resultat.jpg » type= »image/jpeg »> <img src= »images/172724622_ecaa7b22d1_b_resultat.jpg »></picture> Et en responsive? Une technique permet à la même image, que l’on insert plusieurs fois et de différente taille, d’être choisie en fonction de la taille…
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…