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.

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

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:

Animation et Javascript

yannick — Thu, 10 Jan 2019 14:22:10 +0000

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

yannick — Thu, 10 Jan 2019 07:27:10 +0000

Une bannière à reproduire.

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 ajoutant au code:

@keyframes billes-retour {
            from {
                opacity:1;
                transform: translate(0,0) rotate(0);
            }
            to {
                opacity:0;
                transform: translate(960px,0) rotate(2750deg);
            }
        }
        .banniere:hover{
            animation: banniere-retour 2s ease 0s;
            animation-fill-mode: both;
        }
        @keyframes banniere-retour {
            from {
                background-color: #ddd;
            }
            to {
                background-color: rgb(0, 0, 0);
            }
        }
        .banniere:hover .slogan-site{
            animation: variation-opacite 2s 5s;
            animation-fill-mode:both; 
        }
        @keyframes variation-opacite {
            from {
                opacity:0;
            }
            to {
                opacity:1;
            }
        }

Animation

yannick — Wed, 09 Jan 2019 15:34:48 +0000

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

. L’animation durera 4 secondes et changera progressivement la couleur de fond de l’élément

de « rouge » à « jaune »:

/* The animation code */ 
@keyframes example { 
from {
background-color: red;
} 
to {
background-color: yellow;
} 
} 
/* The element to apply the animation to */ 
div { 
width: 100px; 
height: 100px; 
background-color: red; 
animation-name: example; 
animation-duration: 4s; 
}
}

La animation-iteration-count propriété spécifie le nombre de fois qu'une animation doit être exécutée.
L'exemple suivant exécute l'animation 3 fois avant son arrêt:
 
div {  
 width: 100px;   
height: 100px;   
position: relative;   
background-color: red;   
animation-name: example;   
animation-duration: 4s;   
animation-iteration-count: 3; 
}
L'exemple suivant utilise la valeur "infinite" pour que l'animation continue à jamais:

div {   
width: 100px;   
height: 100px;   
position: relative;   
background-color: red;   
animation-name: example;   
animation-duration: 4s;   
animation-iteration-count: 
infinite; 
}
La animation-direction propriété spécifie si une animation doit être lue en avant, en arrière ou en alternance.
La propriété animation-direction peut avoir les valeurs suivantes:

normal– L’animation est lue normalement (en avant). C’est par défaut
reverse – L’animation est lue en sens inverse (en arrière)
alternate – L’animation est jouée en avant puis en arrière
alternate-reverse – L’animation est lue en premier, puis en avant

La animation-timing-function propriété spécifie la courbe de vitesse de l’animation.

La propriété animation-timing-function peut avoir les valeurs suivantes:

ease – Spécifie une animation avec un début lent, puis rapide, puis se termine lentement (par défaut)
linear – Spécifie une animation avec la même vitesse du début à la fin
ease-in – Spécifie une animation avec un démarrage lent
ease-out – Spécifie une animation avec une fin lente
ease-in-out – Spécifie une animation avec un début et une fin lents
cubic-bezier(n,n,n,n) – Vous permet de définir vos propres valeurs dans une fonction cubic-bezier

L’exemple suivant montre les différentes courbes de vitesse pouvant être utilisées:

#div1 {animation-timing-function: linear;} 
#div2 {animation-timing-function: ease;} 
#div3 {animation-timing-function: ease-in;} 
#div4 {animation-timing-function: ease-out;} 
#div5 {animation-timing-function: ease-in-out;}

Les animations CSS n’affectent pas un élément avant la lecture de la première image clé ou après la lecture de la dernière image clé. La propriété animation-fill-mode peut remplacer ce comportement.

La animation-fill-mode propriété spécifie un style pour l’élément cible lorsque l’animation n’est pas en lecture (avant le début, après la fin ou les deux).

La propriété animation-fill-mode peut avoir les valeurs suivantes:

none– Valeur par défaut. L’animation n’appliquera aucun style à l’élément avant ou après son exécution.
forwards – L’élément conservera les valeurs de style définies par la dernière image clé (dépend de l’animation-direction et de l’animation-itération-nombre).
backwards – L’élément obtiendra les valeurs de style définies par la première image clé (dépend de la direction de l’animation) et les conservera pendant la période de délai d’animation.
both – L’animation suivra les règles pour les deux sens, en étendant les propriétés de l’animation dans les deux sens

L’exemple suivant permet à l’élément

de conserver les valeurs de style de la dernière image clé à la fin de l’animation:

div {   
width: 100px;   
height: 100px;   
background: red;   
position: relative;   
animation-name: example;   
animation-duration: 3s;   
animation-fill-mode: forwards; }

Animation Sténographie

L’exemple ci-dessous utilise six propriétés d’animation:

div {   
animation-name: example;   
animation-duration: 5s;   
animation-timing-function: linear;   
animation-delay: 2s;   
animation-iteration-count: infinite;   
animation-direction: alternate; 
}

Le même effet d’animation que ci-dessus peut être obtenu en utilisant la animation propriété abrégée :

div {   
animation: example 5s linear 2s infinite alternate; 
}

La animation-play-state propriété spécifie si l’animation est en cours d’exécution ou en pause.Les valeurs:

paused (Spécifie que l’animation est en pause)
running (Spécifie que l’animation est en cours d’exécution)
initial (Définit cette propriété à sa valeur par défaut)
inherit (Hérite cette propriété de son élément parent)

Mettre en pause une animation:

div {   
animation-play-state: paused;
}

Exemple:

div:hover {   
animation-play-state: paused; 
}

Illustration de ce cour:

Animations css 01

animation-name: animation01; animation-duration:3s; animation-delay:1s; animation-timing-function: linear;

animation-name: animation01; animation-duration:3s; animation-delay:1s; animation-timing-function: linear; animation-iteration-count:infinite;

animation-name: animation01; animation-duration:3s; animation-delay:1s; animation-timing-function: linear; animation-iteration-count:infinite; animation-direction: alternate-reverse;

animation-name: animation01; animation-duration: 3s; animation-delay: 1s; animation-timing-function: linear; animation-fill-mode:both;

#exemple05 .sprite { animation-name: animation01; animation-duration: 1s; animation-iteration-count: infinite; animation-play-state: paused; } #exemple05:hover .sprite { animation-play-state: running; }