12-TRANSITIONS ANIMATIONS TRANSFORMATIONS

 

62 - TRANSITIONS

 

621-fonctionnement d'une transition

 

 

622-la propriété CSS "transition-property"-

 

 

623-plusieurs transitions avecc la souris

 

 

625-la propriete CSS - transition-timing-function

 

 

626-la propriete CSS - transition-delay

 

 

627- transition et reverse transition

 

 

EXERCICE avec des couleurs dégradees

 

63 - CREER DES ANIMATIONS EN CSS

 

631-la règle CSS "@keyframes"

 

 

 

632-la règle CSS "@keyframes"

 

 

animation au passage de la souris

 

animation au passage de la souris

 

633 - la propriete " animation-name"

 

 

634 - la propriete " animation-duration"

 

pourquoi l'animation finit en vert au lieu de rose ?

 

635 - la propriete " animation-timing-function"

 

passer la souris sur le cercle pour voir l'animation

la fonction "animation-timing-function ne fonctionne pas

 

636 - la propriete " animation-iteration-count"

 

passer la souris sur le cercle pour voir l'animation (2fois)

 

637 - la propriete " animation-direction"

 

 

 

638 - la propriete " animation-play-state"

 

 l'animation se met en pause au passage de la souris

 

639 - la propriete "animation"

 

 

LEÇON 63 - EXERCICE 631

 

Animation en deux dimensions : longueur et hauteur

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

LEÇON 63 - EXERCICE 632

Animation en trois dimensions : longueur, hauteur et profondeur

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

LEÇON 63 - EXERCICE 633

 

Un conteneur disparait progressivement
faisant apparaitre une image carree qui devient ronde

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

LECON 63 - EXERCICE 634

 

Animation : deplacement en " 8 "

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

64 - TRANSFORMATIONS

 

641-definir une transformation

 

 

642-modifier la taille d'un élément avec " scale "

 

 

643-déformer un élément avec "skewX() & skewY() "

 

 

644-effectuer une translation avec "transform:translate(X,Y)"

 

 

 

645-effectuer une rotation avec "transform:rotate"

 

 

646-tester la fonction matrix()

 

 

 

647-appliquer plusieurs transformation d'un coup

 

 

 

 

 

 

 

648- animer des transformations

 

 

 

 

 

648-EXERCICE- animer des transformations

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

649/1 - les transformations 3D avec "translate3d"

 

 

 

 

 

 

 

 

649/2 - les transformations 3D avec "rotate3d"

 

 

 

 

65 - CRÉER UN DIAPORAMA

 

 

651-diaporama avec effet de fondu

 

passer la souris sur l'image pour arrêter le défilement

 

652 - diaporama avec défilement des images - dimensions fixes

 

 

653 - diaporama avec défilement des images - dimensions adaptables

 

11 - LES FORMULAIRES

 

59 - CREATION D'UN FORMULAIRE SIMPLE

 

591-creation des champs de formulaire

 

 

  texte              mot de passe           mel

 

592-avec les etiquettes des champs de formulaire

 

Entrez votre pseudonyme :

Entrez votre mot de passe :

Entrez votre adresse mel :

593-ajouter le bouton "valider"

 

Entrez votre pseudonyme :

Entrez votre mot de passe :

Entrez votre adresse mel :

 

594-identification des données

 

Entrez votre pseudonyme :

Entrez votre mot de passe :

Entrez votre adresse mel :

 

pas de modification dans la présentation
l'attribut "name" sert  traiter les données envoyées 

 

60 - CREATION D'UN FORMULAIRE COMPLEXE

 

601-création du formulaire complet

 

Description de la plante :

famille :

nom latin :

nom courant :

avec fleur

sans fleur

origine Europe du nord Europe du sud Europe de l'est Chine Asie-autres Afrique du nord Afrique centrale Afrique du sud Amerique du nord Amerique du sud

 

Couleur - Description

Jaune bleu rouge vert

description de la plante :

validation

mot de passe :

 

l'attribut     placeholder     ne fonctionne pas   (dans l'élement : textarea )

 

61 - CREATION D'UN FORMULAIRE COMPLEXE SECURISE

 

611-attributs de securite du formulaire

 

Description de la plante :

famille :

nom latin :

nom courant :

avec fleur

sans fleur

origine Europe du nord Europe du sud Europe de l'est Chine Asie-autres Afrique du nord Afrique centrale Afrique du sud Amerique du nord Amerique du sud

 

Couleur - Description

Jaune bleu rouge vert

description de la plante :

validation

mot de passe :

 

LES ATTRIBUTS : max, min, required  NE FONCTIONNENT PAS

 

 

10-SÉLECTEURS CSS COMPLEXES

 

54 - LES SÉLECTEURS D'ATTRIBUTS

 

541-selectionner un element selon son attribut-

 

l information se trouve ICI

 

le bon résultat se trouve ci-dessous

 

image du résultat : impact sur tout le site

 

 

 

 

image du résultat: impact sur la page

 

lien vers la première page: CLIQUER ICI

lien vers la première page: CLIQUER ICI

image du résultat: impact sur la ligne

 

542-selectionner un element selon la sous valeur d'un attribut -

 

le CSS n'accepte pas le signe ~

 

543-selectionner un element qui possede un attribut qui COMMENCE par une certaine sous-valeur -

 

le CSS n'accepte pas le signe  " ^ "

 

546-rendre les selecteurs d attributs insensibles a la casse -

 

le CSS n'accepte pas les caracteres spéciaux

 

AVEC NOTEPAD

 

  le résultat est correct

 

55 - LES PSEUDO-CLASSES CSS

 

TRAITÉ AVEC NOTEPAD

 

56 - LES PSEUDO-ELEMENTS CSS

 

561-Inserer du contenu ::before ::after

 

 

562-selectionner la premiere lettre d un element

 

Les sanglots longs des violons ...

 

563-selectionner la premiere ligne d un element

 

Les sanglots longs des violons de l'automne
Blessent mon coeur d'une langueur monotone
Tout suffocant et blême quand sonne l'heure
Je me souviens des jours anciens et je pleure.

564-cibler une partie selectionnee par l utilisateur

Les sanglots longs Des violons De l’automne Blessent mon coeur D’une langueur Monotone. Tout suffocant Et blême, quand Sonne l’heure, Je me souviens Des jours anciens Et je pleure Et je m’en vais Au vent mauvais Qui m’emporte Deçà, delà, Pareil à la Feuille morte.

 

57 - CREATION D UN MENU HORIZONTAL -

 

 

la commande :" position:sticky " ne fonctionne pas

 

58 - CREATION D UN MENU DEROULANT -

 

• ACCUEIL
• RUBRIQUES
  • bonjour Marcel
  • fond de page
  • tableaux
• ARTICLES
• PAGES
  • Luigi Cornaro
  • cours HTML
  • le drain

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

9-COULEURS, DÉGRADÉS ET OMBRES

 

- 49 - GÉRER LA COULEUR DE FOND

 

491-gestion de la couleur de fond

 

couleur orange par le nom

couleur bleu hexadecimal

couleur verte par RGB

 

492-gestion de l'opacité de la couleur de fond

 

couleur rouge naturelle

couleur rouge opacité 0,50

493-surligner avec un " span "

 

la compréhension de ce texte est très importante

 

- 50 - AJOUTER DES IMAGES DE FOND

 

501 - image de fond a un element avec "background-image"

 

Exercice avec "NOTEPAD"

 

502 - couleur de fond & 1 image de fond

 

 

503 - repetition ou non d une image de fond

 

background-repeat                                        background:no-repeat

 

background-repeat:round no-repeat                  background-repeat:space no-repeat

 

background-repeat:repeat-x, repeat-y

 

504 - gerer la taille des images de fond

 

background-size:contain                           background-size:cover 

 background-size:25%50%                    background-repeat:repeat-x, repeat

 

505 - gerer le defilement d une image de fond

 

 background-attachment:fixed                                         background-attachment:local

 

506 - determiner la position du fond

 

sans background-origin        background-origin:padding-box    background-origin:border-box      background-origin:content-box

 

507 - positionner une image de fond

 

background-position:top 50px left:30px                    background-position:top right

- 51 - CREER DES DEGRADES LINEAIRES

 

511 - Creation de degrades lineaires

 

 

512 - Creation de degrades avec direction et color stops

 

sans color stop                                         bleu 40%    jaune 70%

 

513 - Creation de degrades semi-transparents

 

COULEURS :  pleines                                  semi-transparentes (S.T.)                       S.T. / pleine / S.T. 

 

514 - Creation de degrades semi-transparents avec image

 

               les couleurs dégradées sont AU-DESSUS de l'image

                Les couleurs dégradées sont EN-DESSOUS de l'image

 

515 - la repetition des degrades

 

degrade sans repetition

degrade avec repetition, sans transition

degrade avec repetition et transition

 

- 52 - CREER DES DEGRADES RADIAUX

 

521 - Degrades radiaux simples

 

degrades radiaux par defaut

 

degrades radiaux : cercle par défaut

 

degrades radiaux : ellipse par défaut

 

degrades radiaux avec des "color stops" (%)

 

degrades radiaux avec le point central au milieu du bord haut

 

degrades radiaux avec le point central à gauche (30%) haut (70%)

 

degrades radiaux avec "closest-side"

 

degrades radiaux avec "farthest-side"

 

degrades radiaux avec "closest-corner"

 

522 - Degrades radiaux complexes

 

closest-side / circle

taille du rayon, cercle, point central sur le bord

dimensions du dégradé,placement du point central

 

523 - Degrades radiaux multiples et semi transparents

 

 degrade radial sans opacite

 degrade radial avec opacite

 deux degrades radiaux

 

523/2 - EXERCICE - Degrades radiaux a 6 couleurs

 

jaune, rose, violet,vert pale, vert moyen, olive

 

524 La repetition des degrades radiaux

 

degrade radial sans repetition

degrade radial avec repetition

degrade radial avec repetition et transitions

 

53 - AJOUTER DES OMBRES AUTOUR DES ELEMENTS

 

531 creation d ombres simples

 

ombre extérieure (verte par defaut)

 

532 creation d ombres internes

 

   valeur positive : marge en haut a gauche
   valeur negative:marge en bas a droite

 

533 ombres en couleur et semi-transparentes

 

       par defaut                  ombre externe bleu-clair            ombre interne rouge              ombre interne rouge op 50%

 

534 ombres floues

 

 

535 ombres floues projetees

 

 

536 ombres multiples autour d'un element

 

 

 

451-insertion d'une image avec l'éditeur

 

 

452-modifier les dimensions de l image en "px"

 

 

453-modifier les dimensions de l image en " % "

 

454-positionner des images

 

 

455-explication de l image et legende

 

les deux poupées de Micky

 

46 - INSERER DE LA MUSIQUE

 AVEC L'ÉDIEUR

461-inserer un fichier audio

 

EKLABLOG n'accepte que les fichiers MP3

la leçon 46 se fera avec NOTEPAD++

 

 

47 - INSERER DE LA VIDÉO

 

EKLABLOG n'accepte que les liens VIDEO de YouTube

la leçon 47 se fera avec NOTEPAD++

 

48 - L'ÉLÉMENT "iframe"