Arts numériques

Liens externes et internes à la page

Stéphane Noel — 2020-11-29T17:09:14Z

Le web est basé sur le lien hypertexte. Il s'agit, à partir d'une page, de pouvoir par un simple clic visiter une autre page, qu'elle soit sur le même serveur (un site est techniquement un ensemble de page disposée sur le même serveur, accessibles via des liens entre ces pages) ou externe.

Le lien hypertexte vers un page du même domaine

Le cas le plus simple du lien est le lien vers une page liée au même domaine. Dans ce cas, le lien ne spécifique que le lien, le navigateur complète automatique le nom de domaine, qui est celui sur lequel il se trouve déjà . La page peut être éventuellement dans un sous dossier, ou être traitée par une rewrite rule du serveur (mais on ne parlera pas de ça ici).
Tout lien qui ne commence pas par un protocole comme http://, https://, ftp:// sont des liens vers une page du même domaine.

Un lien simple Un page dans un sous-dossier

Le lien hypertexte vers un autre site

un lien est techniquement une balise : un morceau de texte, ou une image, ou même un bloc de code deviennent cliquables parce qu'un tag enserre ce contenu. Un attribut href permet au navigateur de savoir vers quel page il doit envoyer le visiteur en cas de clic.
Ce lien est reconnaissable par le fait qu'il commence par le protocole, la plupart du temps http:// ou https://
Ce lien peut être simple, en donnant juste le nom général du site, soit pointer vers une page de ce site, et même transporter une information avec lui (on parle d'entête en "get", mais on en parlera pas ici).

Un lien via du texte Un lien en https Un lien vers une sous-partie de site un lien avec une information transportée en get

Un lien vers une sous-partie de la page actuelle

Cas plus rarement employé, un lien peut être interne à la page en cours. On utilise alors un lien commençant par #. On parle alors de la destination du lien comme une ancre.

Un lien interne vers l'ancre "chapitre1"

Ce qui signifie que dans cette page, un id du même nom a été donné à l'élément vers lequel on veut pointer.

 Lien vers "intro" Lien vers "partie_1"  L'intro
 Du texte et des tags Partie 1
 Autre texte et tags

Le clic sur un lien interne produit un saut immédiat vers l'endroit de la page où se trouve l'ancre, en le plaçant en haut de la fenêtre.

On peut pointer un lien vers une page externe comportant une ancre, également :

Aller à l'ancre chap2 de la page d'entre de monsite.org

Il faut, évidemment, que cette ancre existe dans la page de ce site...

Display : flex

Stéphane Noel — 2020-10-26T23:18:29Z

L'attribut "display" permet de modifier la maniÃ¨re dont un Ã©lÃ©ment va se comporter lors de l'affichage. Depuis CSS3, plusieurs nouvelles options trÃ¨s intÃ©ressantes sont proposÃ©es, dont display : flex.

Les valeurs les plus courantes de display sont display:inline, qui transforme un Ã©lÃ©ment en un Ã©lÃ©ment inline, ou display:block. display:none permet quand Ã lui de cacher un Ã©lÃ©ment dans la page, pour le rendre visible en cas de clic ou de survol.

Mais display:flex (ou encore display:grid, qui fera l'objet d'un autre article) permet un comportement plus complexe, principalement l'organisation horizontale des contenus et la gestion de leur rÃ©partition horizontale et verticale.

Une dÃ©claration qui affecte les enfants

Il faut comprendre que display:flex va affecter non pas l'Ã©lÃ©ment qui reÃ§oit cette dÃ©claration, mais ses enfants. Voici le comportement par dÃ©faut de flex :

.conteneur { display: flex; }

Attention, tous les enfants directement prÃ©sents dans .conteneur seront affectÃ©s, quels que soit le type de tag (inline ou block, article, p, div, etc.). Il est donc nÃ©cessaire de bien structurer le code html dans ce but.

... Et plein d'options !

Une fois que le conteneur a reÃ§u le comportement de base du flex, il est possible d'utiliser un grand nombre d'options complÃ©mentaires, toutes dÃ©taillÃ©es de maniÃ¨re claire sur le site CSS tricks (par exemple).
Ces dÃ©clarations css complÃ©mentaires sont de deux types : celles qui s'appliquent sur le conteneur, et celles qui s'applique sur ses enfants.

Un exemple : flex-wrap:wrap

flex-wrap est un attribut important, qui permet aux Ã©lÃ©ments enfants de s'afficher sur plusieurs lignes si le conteneur est trop petit pour tout afficher sur une seule.
Ce code html permet de tester flex :

 Bloc
 Bloc
 Bloc
 Bloc
 Bloc
 Bloc

Voici un premier essai avec des enfants avec une largeur de 25% :

.parent { display:flex; } .parent article{ width:25%; }

Bloc

MalgrÃ© la taille en 25%, les 6 Ã©lÃ©ments se rÃ©partissent la largeur de leur parent en flex. Par dÃ©faut, les enfants d'un Ã©lÃ©ment en display:flex ne passent pas Ã la ligne lorsque leur taille exÃ¨de leur parent.

Avec flex-wrap : wrap

.parent { display:flex; flex-wrap: wrap; } .parent article{ width:25%; }

Bloc

Cette fois, les Ã©lÃ©ments reÃ§oivent l'autorisation avec flex-wrap:wrap de passer Ã la ligne.

Des options nombreuses

Flex comporte de nombreuses options supplÃ©mentaires. Certaines sont destinÃ©e Ã l'Ã©lÃ©ment parent, comme flex-wrap, mais d'autres peuvent Ãªtre appliquÃ©s aux enfants.

Par exemple,
– order permet de changer l'ordre des Ã©lÃ©ments.

.element2 { order:-1; }

Bloc 1

Bloc 2

Bloc 3

Bloc 4

Bloc 5

Bloc 6

– grow permet Ã certains enfants de grandir plus que d'autres

.element4 { flex-grow: 4; }

Bloc 1

Bloc 2

Bloc 3

Bloc 4

Bloc 5

Bloc 6

Voir l'excellent article sur CSS trick pour une description assez complÃ¨te des possibilitÃ©s

Utilisation de class en html et css

Stéphane Noel — 2020-10-25T13:41:24Z

Les classes

Une classe est assez proche de l'id, on l'associe Ã un Ã©lÃ©ment de la page comme ceci :

Notez bien !

Ensuite on peut les atteindre en css comme ceci :

.important { color:red; }

Le point devant le terme signifie que l'on cherche Ã atteindre une classe dont le nom est "important".
L'avantage de la classe c'est que plusieurs Ã©lÃ©ments peuvent se voir associer la mÃªme classe :

Notez bien !
 On peut m'associer plusieurs fois.

La diffÃ©rence entre les deux est dans le maniÃ¨re de les coder (# et .) et dans la limitation des id Ã Ãªtre associÃ©s une seule fois.
On verra plus tard que les id sont prioritaires sur les classes dans la hiÃ©rarchie des dÃ©clarations css.

GÃ©nÃ©ralement, associer un ID Ã un Ã©lÃ©ment signifie "bloc important" dans une structure html. On les emploie souvent pour dÃ©signer, le bloc de titre, la navigation, le corps de la page et le footer, par exemple.

Associer plusieurs classes Ã un Ã©lÃ©ment

Un des avantages des classes est que l'on peut en associer plusieurs au mÃªme Ã©lÃ©ment. C'est d'ailleurs depuis quelques annÃ©es une des tendances lourdes du dÃ©veloppement web.

 Un contenu

Les deux classes sont simplement sÃ©parÃ©es par un espace, et peuvent seront codÃ©es indÃ©pendamment :

.cartouche { padding:20px; border:1px solid #666; border-radius:10px; } .alerte { background-color:red; color:white; }

Les deux comportements s'aditionnent, ou en fonction de la hiÃ©rarchie, se supplantent.

Des classes et un id sur le mÃªme Ã©lÃ©ment
Evidemment, il est tout Ã fait possible d'associer des classes et un id au mÃªme Ã©lÃ©ment.

 Un header

Avec par exemple :

#truc { font-size:28px; } .machin { color:orange; }

LÃ aussi, les comportement s'additionnent ou se supplantent suivant la hiÃ©rarchie. On notera qu'en cas de conflit, c'est l'id qui a la plus grande prioritÃ© :

Une section
 #chose { color:green; } .bidule { color:orange; }

Ici la couleur des textes est dÃ©finie par la classe et l'id, et comme l'id est prioritaire, le texte sera affichÃ© en vert.

Ajouter Fancybox dans une page web

Stéphane Noel — 2020-03-24T15:34:55Z

Fancybox est une librairie javascript (+ css) qui permet d'afficher des images en grand format dans une page. Ce n'est pas le seul qui existe, loin de lÃ , mais c'est le plus utilisÃ©. Il est donc Ã©prouvÃ© et facile Ã utiliser.

ProcÃ©der par Ã©tapes

Le site de Fancybox contient dÃ©jÃ toute la documentation sur son utilisation, mais reprenons la procÃ©dure de maniÃ¨re adaptÃ©e au code dÃ©jÃ Ã©crit dans les articles prÃ©cÃ©dents :

1) TÃ©lÃ©charger et placer les fichiers
Fancybox est une librairie basÃ©e sur jQuery. Ã‡a tombe bien, nous avons dÃ©jÃ tÃ©lÃ©chargÃ© et placÃ© jQuery dans le tutoriel prÃ©cÃ©dent.
AprÃ¨s avoir tÃ©lÃ©chargÃ© la librairie depuis le site de Fancybox, on identifie les fichiers nÃ©cessaires. Ils sont au nombre de deux et sont situÃ©s dans le dossier dist :
– jquery.fancybox.min.css
– jquery.fancybox.min.js

Il suffit de placer ces deux fichiers dans le dossier du site, puis de les charger dans le head de la page :

    Un site en une page

2) PrÃ©parer l'image et sa vignette

Le principe de Fancybox est que l'on affiche une vignette de l'image. Un clic sur cette vignette produit l'affichage en plus grand de cette mÃªme image.
L'image en grand format ne doit pas Ãªtre trop grande. Une taille d'environ 1200 pixels de large est tout Ã fait suffisante. Il est inutile et mÃªme dÃ©conseillÃ© de placer des image de 1600 pixels ou plus : elles seront rÃ©duites Ã l'affichage alors que le navigateur devra en tÃ©lÃ©charger chaque pixel. Du gaspillage de bande passante, pas trÃ¨s Ã©colo donc.
La taille de la vignette dÃ©pend du nombre de vignettes affichÃ©es. Dans notre cas, 500 pixels de large sera suffisant, et probablement un peu trop, mais on va garder Ã§a.

Produisez ces images et dÃ©posez-les dans le dossier "images" qui est fait pour Ã§a.
On obtient ceci :

Trouvez un systÃ¨me de nom logique, la plupart du temps on ajoute "-small" au nom des vignettes pour que les deux images soient listÃ©es cÃ´te Ã cÃ´te et aient un nom similaire.
Rappel : ne mettez jamais de caractÃ¨re spÃ©ciaux (@&Ã© etc.) ni d'espace dans un nom de fichier sur le web ! C'est une source d'erreur.

3) Placer les images dans la page

Il nous reste maintenant Ã placer le code html dans notre page.
La mÃ©thode est simple : on crÃ©e un tag "a" qui enserre la vignette. La destination du lien (l'attribut "href") est le lien vers l'image. On ajoute un attribut au lien data-fancybox="truc" qui permet Ã Fancybox de savoir qu'il dit agir sur cet Ã©lÃ©ment. Lorsqu'on clique, Fancybox rÃ©cupÃ¨re le lien dans l'attribut href et l'ouvre par dessus la page dans des Ã©lÃ©ments html qu'il crÃ©e Ã la volÃ©e.

Voici le code Ã©crit dans l'article de la galerie ;

  La galerie

Le fait que les deux liens aie le mÃªme attribut data-fancybox (truc, dans le code ci-dessus) les lie entre elles : fancybox dispose les flÃ¨ches qui permettent de passer directement de l'affichage de l'une Ã l'autre.

Ã‡a donne donc Ã§a :

Afficher des contenus dans un Ã©lÃ©ment avec jquery

Stéphane Noel — 2020-03-24T13:56:20Z

Sur base du code du premier tutoriel, qui plaÃ§ait le code de base html et cs, nous pouvons maintenant intÃ©grer des fonctions en javascript, et plus prÃ©cisÃ©ment jquery.

1) Avant tout, tÃ©lÃ©charger et placer jQuery

Avant de coder, on ira chercher la derniÃ¨re version de jQuery. La version compressÃ©e pour la production est celle qui nous intÃ©resse. TÃ©lÃ©chargez-lÃ et placez le fichier dans le dossier du site.

Dans la foulÃ©e, on crÃ©e un fichier script.js dans lequel on placera notre code.
On obtient la structure suivante :

Dans le code html, on charge les deux fichiers javascript dans le head de la page, comme ceci

    Un site en une page

2) Formuler clairement ce qu'on veut coder

Une des bases de l'Ã©criture du code, c'est d'Ãªtre capable d'Ã©noncer de la maniÃ¨re la plus prÃ©cise possible ce qu'on veut coder.
Dans notre cas, c'est assez simple :

Pour pouvoir tester ce code, nous devons crÃ©er des contenus minimaux Ã afficher.

Pour cela, on va placer un peu de html dans la partie #contenus :

    Contenu numÃ©ro 1
 
  Contenu numÃ©ro 2
 
  La galerie

Tous les liens de la navigation se comportent de la mÃªme maniÃ¨re : ils provoquent l'affichage d'un contenu spÃ©cifique. On peut donc employer une mÃªme commande pour tous les liens qui dit "affiche cet article dans la partie #contenus" mais il faut crÃ©er un lien logique entre un lien et son contenu. Pour Ã§a on va employer l'attribut "data-contenu" (voir la documentation sur Mozilla) comme ceci :

 Titre principal
   Information 1
 Information 2
 Galerie

Remarquez que le contenu de l'attribut "data-contenu" correspond aux attribut "id" des articles crÃ©Ã©s plus haut. C'est ce qui permet de faire la correspondance entre les deux Ã©lÃ©ments pour le code javascript.
Nous somme maintenant prÃªt Ã coder.

Le code javascript

La version minimale de notre code va faire ceci :
– au chargement de la page, cacher #contenus
– quand on clique sur un des liens, cacher tous les articles de #contenus, et n'afficher que celui liÃ© au clic
– puis afficher #contenus

Comme cette fenÃªtre apparait par dessus une image, on va donner la possibilitÃ© de la fermer par un clic.
On a dÃ©jÃ ajoutÃ© un Ã©lÃ©ment de type "button" directement dans le tag #contenus, on va ajouter dans javascript le code correspondant

Ã‡a donne Ã§a

$(document).ready(function(){ // quand la page est chargÃ©e entiÃ¨rement, juste avant de l'afficher $("#contenus").hide(); // cacher #contenus $("nav a").click(function(){ // quand on clique sur les liens de la navigation // rÃ©cupÃ©rer le contenu de data-contenu pour le lien cliquÃ© var lequel=$(this).attr("data-contenu"); $("#contenus article").hide(); // cacher les articles $(lequel).show(); // montrer celi qui correspond au clic $("#contenus").fadeIn(500); // afficher #contenus }); // le bouton close $("#close").click(function(){ $("#contenus").fadeOut("500"); }); });

Et c'est fait.

Web et sÃ©mantique

Stéphane Noel — 2019-12-10T12:30:16Z

La sÃ©mantique est une notion importante dans le domaine du code. Et ceci pour des raisons diffÃ©rentes, qu'il faut un peu prÃ©ciser.

La sÃ©mantique

"La sÃ©mantique est une branche de la linguistique qui Ã©tudie les signifiÃ©s, ce dont on parle, ce que l'on veut Ã©noncer. Sa branche symÃ©trique, la syntaxe, concerne pour sa part le signifiant, sa forme, sa langue, sa graphie, sa grammaire, etc. ; c'est la forme de l'Ã©noncÃ©."

(wikipedia)

La sÃ©mantique concerne donc les langages en gÃ©nÃ©ral, et leur relation avec le sens qu'ils vÃ©hiculent.
En sÃ©mantique, on peut par exemple associer le mot "Lune" et "Douleur" dans le champ sÃ©mantique de la poÃ©sie alors qu'il n'y a entre ces deux mots aucun lien Ã©tymologique ou syntaxique. Au quotidien, nous sommes capables d'identifier des champs sÃ©mantiques lors de lecture ou discussion et donc comprendre leur signification. Cela nous permet d'adapter notre langage et nos Ã©crits pour leur contexte de rÃ©ception.
Dans la phrase "Notre ami Charles nous a quittÃ© bien trop prÃ©cipitamment" nous pouvons facilement identifier que la signification est que Charles est mort, et que le contexte est celui du respect et de la peine. D'autres verbes appartiennent au mÃªme champ sÃ©mantique comme s'Ã©teindre, dÃ©cÃ©der, mourir, disparaitre, crever, passer l'arme Ã gauche, claquer, etc. mais leur champ sÃ©mantique les associe Ã d'autres contextes. Savoir choisir ses mots, c'est identifier le champ sÃ©mantique ambiant et les utiliser en accord ou en rupture avec celui-ci.

Il existe des dictionnaires et des bases de donnÃ©es sÃ©mantiques qui relient des mots Ã des autres par association sÃ©mantique, et c'est un domaine d'Ã©tude important dans le domaine de l'intelligence artificielle, puisque des tas d'informations sont nichÃ©es dans la sÃ©mantique. Parfois l'ironie, la moquerie ou la flatterie sont cachÃ©s dans les choix sÃ©mantiques.
Ceci Ã©tant posÃ©, qu'est-ce que la sÃ©mantique a Ã voir avec le web ? Et bien, on parlera de sÃ©mantique Ã 2 niveaux au moins.

Le html est un code sÃ©mantique

Le code html est un systÃ¨me de balises (comme la balise

par exemple) qui entourent le contenu des pages, en leur donnant une valeur sÃ©mantique. La balise `Truc` permet au navigateur de reconnaitre le mot "Truc" comme Ã©tant un titre, et lui donner visuellement une taille plus importante, en accord avec cette fonction sÃ©mantique. Coder une page web est donc principalement structurer sÃ©mantiquement un contenu complexe composÃ© de titres, de textes, de listes, de citations, etc. avec les balises correspondantes. Une fois ce travail fait, on assure un meilleur affichage de la page, mais aussi un meilleur rÃ©fÃ©rencement, puisque les moteur d'indexation et de recherche se base sur ces structures sÃ©mantiques pour identifier les diffÃ©rents contenus de la page.

Le web est sÃ©mantique

Dans la foulÃ©e de cette notion de page sÃ©mantique, beaucoup de personnes impliquÃ©es dans l'avenir d'internet, Tim Bernes-Lee en tÃªte, voudraient renforcer la sÃ©mantique non pas seulement d'une page ou d'un site, mais d'internet tout entier. Ils ont crÃ©Ã© le concept de web sÃ©mantique avec l'idÃ©e que si tout le monde utilise une mÃªme maniÃ¨re d'indexer les contenus, le rÃ©fÃ©rencement serait tellement facile que le web deviendrait alors une gigantesque base de donnÃ©e. On peut penser que c'est dÃ©jÃ le cas, mais en fait non : les pages web sont codÃ©es par des personnes diffÃ©rentes, qui utilisent des structures de page diffÃ©rentes, et un mÃªme type d'information peut Ãªtre codÃ© de maniÃ¨re trÃ¨s diffÃ©rent selon les choix des codeurs. Par exemple le site web d'un musÃ©e pourrait contenir une page dÃ©crivant le dÃ©jeuner sur l'herbe de Manet de la maniÃ¨re suivante :

 Le dÃ©jeuner sur l'Herbe
 Edouard Manet
 1863

L'information est prÃ©sente, le titre est dans une balise h1, mais l'auteur est identifiÃ© par un nom de classe et la date est juste dans une balise de paragraphe. Pour un robot, pas facile de savoir quelle information correspond Ã quoi...

La question est politique, car si un contenu est ignorÃ© juste parce qu'il est mal structurÃ©, l'information risque d'Ãªtre uniquement dans les mains de ceux qui "codent bien", au dÃ©triment des amateurs qui font des erreurs. Or l'idÃ©e des premiers dÃ©veloppeurs du net Ã©tait l'accÃ¨s dÃ©mocratique Ã la crÃ©ation de contenus.

Faire apparaitre un bloc latÃ©ral avec un clic en jquery

Stéphane Noel — 2019-12-04T22:51:49Z

En utilisant html, css et javascript, on peut produire l'apparition de bloc d'information en clic.

Il s'agit dans ce cas assez courant de dÃ©clencher l'apparition de blocs d'informations grÃ¢ce Ã un clic sur un Ã©lÃ©ment quelconque (image, texte, etc.).

Cet exemple assume que jquery est installÃ©.

Code html

  Un bloc
 Un autre
 Un troisiÃ¨me
 
   Contenu du bloc 1
 
  Contenu du bloc 2
 
  Contenu du bloc 3

Le code CSS

Aucun code superflu ici. Les blocs d'information sont mis en position fixed et position hors de la fenÃªtre (avec right : -410px). Lorsque la classe '.show" est ajoutÃ©e Ã l'Ã©lÃ©ment, il glisse grÃ¢ce Ã la transition jusqu'Ã "right:0", ce qui le fait apparaitre.

 #blocs article { width:400px; background-color:#fff; padding:20px; box-sizing: border-box; box-shadow:0 0 10px #ccc; position:fixed; right:-410px; bottom:10px; transition:right 0.5s linear; } #blocs article.show { right:0; }

Le code javascript

Ce code a pour unique but d'ajouter ou retirer la classe "show" aux blocs de contenus, le reste est opÃ©rÃ© par la CSS.
Le code javascript sÃ©lectionne les liens de la liste. Lors du clic, il rÃ©cupÃ¨re l'id du bloc correspondant au lien. Il vÃ©rifie que ce bloc correspondant n'est pas dÃ©jÃ visible. Si c'est le cas, il le cache simplement, sinon il retire la classe show de tous les Ã©lÃ©ments Ã©ventuellement visibles, puis ajoute alors la classe "show" Ã cet Ã©lÃ©ment, ce qui le fait apparaitre.

Info-bulles en survol, pur html-css

Stéphane Noel — 2019-12-04T18:54:22Z

Une info-bulle, ou popover en anglais, est une information qui s'affiche en survol ou en clic d'un Ã©lÃ©ment. ce systÃ¨me permet de ne pas surcharger une interface mais de permettre l'accÃ¨s Ã une information si le visiteur en fait la demande par un simple survol de l'Ã©lÃ©ment. Les infos-bulles peuvent Ãªtre complexes, utilisant du javascript et des requÃªtes AJAX, mais on fera ici la dÃ©monstration d'une mÃ©thode simple.

Structure HTML

 Survolez-moi!  Une info cachÃ©e 

 Survolez-moi aussi!  Une info cachÃ©e

CSS

Le code css stylise le bouton, et le cache. En survol de l'Ã©lÃ©ment, la partie invisible est affichÃ© avec display:block.

.bouton { position:absolute; cursor:pointer;
}
.bouton.b1 { left:700px; top:150px;
}
.bouton .hidden { background-color:red; color:#fff; border-radius:4px; padding:10px; text-align: center; position:absolute; right:-220px; top:20px; width:200px; display:none;
} .bouton:hover .hidden { display:block;
}

Avec un effet d'apparition

En utilisant une ou plusieurs animations, il est possible de produire un effet.

.bouton .hidden { position: absolute; top: -42px; left: -95px; text-align: center; background-color: rgba(0,0,0,0.85); border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.4); color: #fff; font-size: 12px; padding: 7px 10px; width: 200px; z-index: 4; display: none;
} .bouton:hover .hidden { display: block; animation: fade-in .3s linear 1, move-up .3s linear 1;
} @keyframes fade-in { from { opacity: 0; } to { opacity: 1; }
}
@keyframes move-up { from { top: -60px; } to { top: -42px; }
}

De plus jolis blocs

il est Ã©videmment possible de composer avec css de plus jolis blocs. On trouve de nombreux codes sur le web, notamment le site cssarrowplease.

les animations CSS3

Stéphane Noel — 2019-09-18T10:56:53Z

Les animations permettent de crÃ©er des effets divers indÃ©pendamment des actions du visiteur d'une page (mÃªme s'il est possible de les associer Ã un survol par exemple).

La base d'une animation sont les keyframes, un concept venu de l'animation traditionnelle, signifiant points-clÃ©s. Les points clÃ©s sont des moments identifiables dans la transformation d'un Ã©lÃ©ment, comme indiquÃ© dans le schÃ©ma ci-dessous.

@keyframes mon_animation { 0% {background-color: red; padding:20px} 50% {background-color: yellow; padding:60px;} 100% {background-color: red; padding:20px} }

@keyframes mon_animation { from {background-color: red; } to {background-color: yellow; } }

On spÃ©cifie des changements Ã certains pourcentage de l'animation, ou passer d'une position Ã une autre avec from et to. Dans le cas oÃ¹ on veut faire une animation en rÃ©pÃ©tition constante, on utilisera les pourcentage et faisant se terminer l'animation Ã 100% dans la mÃªme situation que celle Ã 0%.

Un exemple rapide

Un Ã©lÃ©ment

CrÃ©er une animation, c'est d'abord dÃ©clarer diffÃ©rents keyframe, c'est Ã dire les Ã©tapes clÃ© de l'animation. Un dÃ©part et une fin, et un certain nombre d'Ã©tapes intermÃ©diaires Ã©ventuelles.

Cette dÃ©claration n'a pas la forme traditionnelle d'une sÃ©lecteur CSS, mais s'en rapproche. Elle commence par un @ pour bien s'en distinguer, suivi du mot keyframes et un nom Ã crÃ©er pour l'occasion, sans espace ni caractÃ¨re spÃ©ciaux.

@keyframes un_nom { from {font-size: 12px; } to {font-size: 24px; } }

A l'intÃ©rieur de la dÃ©claration, on va soit utiliser les sous-dÃ©clarations from et to. Si elles ne sont pas dÃ©clarÃ©es, le navigateur va supposer que cet Ã©tat est l'Ã©tat dÃ©jÃ dÃ©clarÃ©s ailleurs dans la css.
On peut aussi utiliser des pourcentage pour remplacer from et to, pour exactement le mÃªme rÃ©sultat.

@keyframes un_nom { 0% {font-size: 12px; } 100% {font-size: 24px; } }

On peut Ã partir de lÃ dÃ©duire le reste des dÃ©clarations compatibles avec @keyframes : on peut dÃ©clarer plusieurs Ã©tapes, et pour chacune de ces Ã©tapes, plusieurs dÃ©clarations CSS :

@keyframes un_nom { from { /* ou 0% */ font-size: 12px; color:rgba(255,0,0,0}; } 25% { font-size: 36px; /* pas besoin de dÃ©finir la couleur si elle ne fait rien de spÃ©cial ici */ } to { /* ou 100% */ font-size: 24px; color:rgba(255,0,0,1}; } }

Voir la documentation sur @keyframes sur le site de Firefox.

Pour utiliser cette animation, il faut l'associer Ã un Ã©lÃ©ment quel qu'il soit (pourvu que les dÃ©claration css soient compatible avec celui-ci).
On va en profiter pour donner une durÃ©e d'animation Ã l'animation, qui n'est pas contenue dans le @keyframes. Est-ce que l'animation est rapide ou lente ? Il est donc possible d'utiliser la mÃªme animation pour deux Ã©lÃ©ments diffÃ©rents avec des vitesses diffÃ©rentes.

h2 { animation-name: un_nom; animation-duration: 1s; animation-iteration-count: infinite; } .broum { animation-name: un_nom; animation-duration: 8s; animation-iteration-count: 2; animation-fill-mode: forwards; }

Par dÃ©faut, une animation est exÃ©cutÃ©e une seule fois. Si on veut la rÃ©pÃ©ter en boucle, ou la rÃ©pÃ©ter une nombre de fois dÃ©fini, on utilise la fonction animation-iteration-count qui est faite pour Ã§a, avec comme valeur infinite pour une boucle continue, ou un chiffre pour dÃ©finir le nombre de rÃ©pÃ©titions.

Si on dÃ©fini un nombre de rÃ©pÃ©tition avec un chiffre, l'animation va s'arrÃªter Ã la position dÃ©finie par ailleurs dans la css, ce qui peut produire une saute aprÃ¨s l'animation. Il est donc prÃ©fÃ©rable de dÃ©finir oÃ¹ s'arrÃªte l'animation : Ã la fin ou au dÃ©but de l'animation. La dÃ©claration animation-fill-mode : forwards dÃ©clare que l'Ã©lÃ©ment s'arrÃªtera sur son Ã©tat en fin d'animation, lÃ ou animation-fill-mode : backwards reviendra au dÃ©but et

Voir la documentation gÃ©nÃ©rale sur les animations
ici
Voir la documentation sur les diffÃ©rentes dÃ©clarations liÃ©es aux animations ici

Les transitions css

Stéphane Noel — 2019-09-18T09:58:32Z

CSS2 permettait de changer certains comportement visuels des Ã©lÃ©ments de la page, en survol par exemple. Un lien qui change de couleur, une typo qui s'agrandit, un bord qui s'Ã©paissit, etc. Cependant, le passage d'un Ã©tat Ã l'autre est immÃ©diat et donc assez brutal visuellement, surtout s'il est important.
CSS3 permet de produire des animations sur ces changements, pour les rendre plus fluide.

Changer le comportement en survol de la souris
L'exemple le plus courant est le changement de comportement d'un Ã©lÃ©ment en survol.

Un Ã©lÃ©ment

Le rÃ©sultat est un bloc dont le font devient rouge en survol, et qui s'Ã©largit. Comme mentionnÃ© prÃ©cÃ©demment, le tout se fait sans transition, brutalement, et en mÃªme temps.
Il est possible depuis CSS3 de rendre le passage d'un Ã©tat Ã un autre plus fluide grÃ¢ce aux transitions :

Un Ã©lÃ©ment

Nous avons ajoutÃ© trois lignes.
transition-property permet de choisir les attributs qui seront affectÃ©s par la transition. Dans l'exemple ci-dessus, ce sont la largeur et la couleur de fond. Si d'autres attributs changent de valeur, ils passeront de l'une Ã l'autre sans transition.
Si on veut que tous les attributs fassent l'objet d'une transition, on Ã©crira :
transition-property:all;

transition-duration, sans surprise, dÃ©signe la vitesse de transition. Elle peut Ãªtre dÃ©finie en secondes ou millisecondes, par exemple 0.5s ou 500ms pour une demi-seconde, car une seconde vaut 1000 millisecondes (ms).

transition-timing-function permet de paramÃ©trer la mÃ©thode de transition. Linear, dans notre exemple, fait passer d'un Ã©tat Ã l'autre de maniÃ¨re rÃ©guliÃ¨re, mais on peut faire une transition qui dÃ©marre lentement et accÃ©lÃ¨re, etc.
Il existe de nombreuses valeurs possible pour le timing-function, comme linear, ease, ease-in, ease-out, ease-in-out, et mÃªme la possiblilitÃ© de dÃ©finir le mouvement avec un vecteur, par exemple cubic-bezier(0.42, 0, 0.58, 1) ;

Attention, il faut au minimum utiliser la dÃ©claration transition-property et transition-duration pour que quelque chose se passe. Les autres dÃ©claration sont optionnelles.

Arts numériques

Liens externes et internes à la page

Le lien hypertexte vers un page du même domaine

Le lien hypertexte vers un autre site

Un lien vers une sous-partie de la page actuelle

Display : flex

Une dÃ©claration qui affecte les enfants

... Et plein d'options !

Un exemple : flex-wrap:wrap

Avec flex-wrap : wrap

Des options nombreuses

Utilisation de class en html et css

Les classes

Notez bien !

Associer plusieurs classes Ã un Ã©lÃ©ment

Ajouter Fancybox dans une page web

ProcÃ©der par Ã©tapes

2) PrÃ©parer l'image et sa vignette

3) Placer les images dans la page

La galerie

Afficher des contenus dans un Ã©lÃ©ment avec jquery

1) Avant tout, tÃ©lÃ©charger et placer jQuery

2) Formuler clairement ce qu'on veut coder

Contenu numÃ©ro 1

Contenu numÃ©ro 2

La galerie

Le code javascript

Web et sÃ©mantique

La sÃ©mantique

Le html est un code sÃ©mantique

Truc

Le web est sÃ©mantique

Le dÃ©jeuner sur l'Herbe

Faire apparaitre un bloc latÃ©ral avec un clic en jquery

Contenu du bloc 1

Contenu du bloc 2

Contenu du bloc 3

Le code CSS

Le code javascript

Info-bulles en survol, pur html-css

Structure HTML

CSS

Avec un effet d'apparition

De plus jolis blocs

les animations CSS3

Un exemple rapide

CrÃ©er une animation

Plusieurs Ã©tapes et plusieurs dÃ©clarations

DurÃ©e et rÃ©pÃ©tition

Les transitions css

DÃ©clarations minimales