HTML-CSS – Premier site en local sur wordpress

Flex Box

yannick — Sun, 01 Sep 2019 08:54:19 +0000

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; ( les éléments sont étirés sur tout l’axe, il y a de l’espace entre eux)
space-around; (les éléments sont étirés sur tout l’axe, mais ils laissent aussi de l’espace sur les extrémités)

Aligner sur l’axe secondaire :
align-items: stretch; ( les éléments sont étirés sur tout l’axe (valeur par défaut))

flex-start; (alignés au début)
flex-end; (alignés à la fin)
center; (alignés au centre)
baseline; (alignés sur la ligne de base (semblable à flex-start))

Il est possible de faire une exception pour un seul des éléments sur l’axe secondaire avec :

align-self: flex-end; (aligne le seul élément à la fin)

flex-start; (aligne le seul élément au début)

Répartir plusieurs lignes :
align-content: flex-start; (les éléments sont placés au début)

flex-end; (les éléments sont placés à la fin)
center; (les éléments sont placés au centre)
space-between; (les éléments sont séparés avec de l’espace entre eux)
space-around; (idem, mais il y a aussi de l’espace au début et à la fin)
stretch; ((par défaut) les éléments s’étirent pour occuper tout l’espace)

Changer l’ordre d’un élément :
order: 3; (place l’élément en 3eme position)

Faire grossir ou maigrir les éléments :
flex: 1; (l’élément occupe tout l’espace restant)
flex: 2; (l’élément peut grossir deux fois plus que le premier)

Donner la largeur de l’élément :
flex-basis: 100px;

calc(100% – 25% -10px);

Capacité à grossir :
flex-grow : 0; (ne grossit pas)

1; (autorise à se déformer)
2; (autorise à se déformer 2 fois plus)

Capacité à maigrir :
flex-shrink: 0; (ne maigrit pas)

1; (autorise à maigrir)
2; (autorise à maigrir 2 fois plus)

}

Bootstrap le retour

yannick — Wed, 28 Aug 2019 11:31:11 +0000

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 base des blocs :

Hello, world!

One of three columns

Le code :



  
    
    
    

    
    
    
    
    

    Hello, world!
  
  
    Hello, world!


    
        
          
            One of three columns
          
          
            One of three columns
          
          
            One of three columns
          
          
            One of three columns
          
        

        
            
              One of three columns
            
            
              One of three columns
            
            
              One of three columns
            
            
                One of three columns

Barre de navigation :

Noter que pour qu’elle soit fixe en haut de page, ajouter la class= »fixed-top » à


    
      Start Bootstrap
      
      
        
          
            About
          
          
            Services
          
          
            Contact
          
          
            
              Portfolio
            
            
              1 Column Portfolio
              2 Column Portfolio
              3 Column Portfolio
              4 Column Portfolio
              Single Portfolio Item
            
          
          
            
              Blog
            
            
              Blog Home 1
              Blog Home 2
              Blog Post
            
          
          
            
              Other Pages
            
            
              Full Width Page
              Sidebar Page
              FAQ
              404
              Pricing Table

Breadcrumb (fil d’Ariane) :


      
        Home
      
      Contact

Card (bloc avec entête, body et footer) :

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.

Learn More

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis ipsam eos, nam perspiciatis natus commodi similique totam consectetur praesentium molestiae atque exercitationem ut consequuntur, sed eveniet, magni nostrum sint fuga.

Learn More

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.

Learn More

 
      
        
          Card Title
          
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.
          
          
            Learn More
          
        
      
      
        
          Card Title
          
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis ipsam eos, nam perspiciatis natus commodi similique totam consectetur praesentium molestiae atque exercitationem ut consequuntur, sed eveniet, magni nostrum sint fuga.
          
          
            Learn More
          
        
      
      
        
          Card Title
          
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.
          
          
            Learn More

Map et adresse (iframe) :

Contact Details

3481 Melrose Place
Beverly Hills, CA 90210

P: (123) 456-7890

E: name@example.com

H: Monday – Friday: 9:00 AM to 5:00 PM

 
      
      
        
        
      
      
      
        Contact Details
        
          3481 Melrose Place
          
Beverly Hills, CA 90210
          

        
        
          P: (123) 456-7890
        
        
          E:
          name@example.com
          
        
        
          H: Monday - Friday: 9:00 AM to 5:00 PM

Un formulaire :


        
          
              
                
              
              
                
              
            
            
                Adresse mail
                
                Nous ne partagerons jamais votre email avec qui que ce soit.
              
          
            Formulez votre demande
            
          
          
              
              
                Cocher si vous êtes d'accord.

Raccourcis pour le HTML

yannick — Fri, 23 Aug 2019 15:19:15 +0000

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

Remplir de texte : Il faut écrire : lorem et tabulation pour un nombre de 50 mots, placer un chiffre collé a lorem : lorem50 et tabulation

Affichage de l’éditeur de texte sur plusieurs ligne : alt Z

Curseur multiple : alt clic clic…

Rechercher : ctrl F

Sélectionner et remplacer : Sélectionner un mot, un groupe de mots, ctrl H et indiquer dans le premier champs la selection et dans le deuxième ce par quoi nous voulons le remplacer. Cliquer sur remplace cela ce ferra un par un.

Déplacer une ligne, une balise : Placer le curseur sur la ligne, (on peut sélectionner plusieurs ligne) alt et flèche haute ou basse.

« GRID »- grille CSS

yannick — Sat, 09 Mar 2019 13:23:16 +0000

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:

#conteneur {
display:grid;
grid-template-columns: 120px 1fr 1fr 1fr;
grid-gap: 1rem;
grid-auto-flow: dense;
}

Ensuit l’enfant.
Ici le contenu 01 va se placer, à la deuxième rangée, à partir de la première colonne, et finir, à la troisième rangée et à la cinquième colonne.

#contenu01{
grid-area: 2/1/3/5;

Nous pouvons utiliser d’autres valeurs.
Ici il n’y aura que l’étendu sur deux rangées et deux colonnes de contrôlé.

#contenu02{
grid-area: auto/auto/span2/span2;
}

Une autre méthode consiste à établir des noms de zone pour chaque cellules de la grille et ensuite dire quel contenu sera affecté à cette zone.

#conteneur {
display:grid;
grid-template-columns: 120px 1fr 1fr 1fr;
grid-gap: 1rem;
grid-template-areas:
"navigation entête     entête     entête"
"navigation principal  principal  annexes-01"
"navigation annexes"02 annexes"02 annexes"01"
"pied       pied       pied       pied"
}

#contenu01 {
grid-area: entête;
}
#contenu02 {
grid-area: navigation;
}
#contenu03 {
grid-area: principal;
}
#contenu04 {
grid-area: annexes-01;
}
#contenu05 {
grid-area: annexes-02;
}
#contenu06 {
grid-area: pied;
}

Bloc, proportion

yannick — Fri, 22 Feb 2019 08:21:13 +0000

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

yannick — Thu, 07 Feb 2019 13:08:59 +0000

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 active( ex:polygone).
Enregistrer sous au format SVG, le profils SVG: Basic 1.1 et Propriétés CSS: Élément de style.
Copier / coller le code généré dans la page HTML (que la partie avec les balises svg).

(A noter une fenêtre propriétés CSS.)

Une fois le fichier HTML en place nous pouvons styler notre carte en CSS.

Image-picture

yannick — Fri, 25 Jan 2019 10:12:35 +0000

Pour chargé des images en multiple format . Le navigateur choisira dans l’ordre celui qu’il peut ouvrir.

Exemple du code:

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 de l’écran.

Animation, suite!

yannick — Thu, 24 Jan 2019 10:04:17 +0000

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

yannick — Mon, 21 Jan 2019 13:13:05 +0000

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 supplémentaires:

Ensuite nous faisons un exercice consistant à écrire DW02 en forme de cube et avec déplacement au survole.

Tous les blocs ne sont pas dans le code si dessous. Ecrire 750 lignes aurait été trop long.

Noté aussi que nous aurions pu étirer les cubes en ajoutant scale3d(4,.5,2) par exemple:

  
*#cube0 {
   transform:translate(500px,500px)rotateZ(45deg)scale3d(4,.5,2); 
        }

Quand il neige et que le prof s’occupe!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, voluptatibus repudiandae voluptatibus.

Explication simplifier:

Quand on clique sur un bouton celui-ci affiche la vue correspondante

Animation avec les »sprite »

yannick — Mon, 14 Jan 2019 08:20:04 +0000

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 marche:

L’image de départ pour cette animation:

Il est aisé de deviner que suivant la position du fond, avec cette planche de dessin, nous pourrons donner l’illusion de quatre déplacements différents pour ce personnage.

Par la suite…..

Deux animation, le texte, et le personnage plus la suite du texte, déclenchés par un clique sur le bouton.

Testez vous même!

N’hésitez pas à réactualiser la page pour voir le début de l’animation.

Le fichier js: