Swiper, w3.css et blueprint

3 feuilles de style pour 1 diaporama quasi responsif... et 2 autres css en bonus

Eh oui, ce diaporama n'est pas vraiment responsif... mais on y travaille !
Son utilisation est optimale en affichage plein écran.

Petites informations annexes concernant la diapositive ou le diaporama dans son ensemble.

Titre de section
(niveau h2)

Texte d'introduction de la section du diaporama présentée à partir du titre de second niveau.

Petites informations annexes concernant la diapositive ou le diaporama dans son ensemble.

Intitulé h3 de l'idée développée

Texte de développement de l'idée principale présentée sur cette diapositive.

Le texte de développement peut être constitué de plusieurs paragraphes et notamment de paragraphes intégrés dans des cadres comme celui-ci.

Texte du commentaire d'un point particulier du développement présenté sur la diapositive. La classe "flex-start" permet de positionner ce commentaire en tête de colonne latérale.

Petites informations annexes concernant la diapositive ou le diaporama dans son ensemble. Ce texte est positionné en pied de colonne latérale avec la classe "flex-end".

Intitulé h3 de l'idée développée

J'interviens pour souligner que l'idée principale, énoncée ici par mes soins, forme le cœur de cette diapositive. Ce mode présentation (à la manière d'une case de BD) dynamise le diaporama !

avatar

L'image utilisée est au format SVG. Elle est positionnée dans l'axe médian de la colonne centrale, en appui sur le bas de la diapositive.

La classe "w3-card" a été appliquée à la bulle pour créer une légère ombre portée. La pointe de la bulle a été laissée sans ombre portée.

Petites informations annexes concernant la diapositive ou le diaporama dans son ensemble. Ce texte est positionné en pied de colonne latérale avec la classe "flex-end".

Intitulé h3 de l'idée développée

Le texte de développement peut être accompagné d'une image, présentée elle aussi en léger relief.

Légende de l'image

L'image de zoning utilisée provient du site placeholder.com. Elle a été paramétrée pour s'afficher dans le couleur du thème utilisé.

Un second commentaire accompagne le premier. Dans cet exemple, le second commentaire est positionné au centre de l'espace disponible, en utilisant la classe "align-self-center".

Petites informations annexes concernant la diapositive ou le diaporama dans son ensemble.

Titre de section
(niveau h2)

Texte d'introduction de la section du diaporama présentée à partir du titre de second niveau.

Petites informations annexes concernant la diapositive ou le diaporama dans son ensemble.

Intitulé h3 de l'idée développée

J'interviens à mon tour pour attirer votre attention. Mon portrait est lui aussi une image au format SVG (Scalable Vector Graphic). Vous constaterez que les formes de mon portrait sont toutes très simples...

avatar

Les images SVG sont réalisables avec Illustrator ou à l'aide de logiciels en ligne comme SVG-Edit, Method Draw ou Sketchpad (trois outils entièrement gratuits).

Petites informations annexes concernant la diapositive ou le diaporama dans son ensemble.

Intitulé h3 de l'idée développée

Le texte de développement peut être accompagné d'un diaporama simplifié, intégré à l'aide de la balise "iframe".

Le diaporama intégré est développé sur la base du même gabarit que cette présentation visuelle.

Le modèle de diapositive utilisé dans le diaporama simplifié est celui de la dernière diapo de cette présentation...

Petites informations annexes concernant la diapositive ou le diaporama dans son ensemble.

Remerciements

et informations diverses