Options de présentation CodiMD
===
---
# Les fonds de page
----
<!-- .slide: data-background="aquamarine" -->
## Couleurs
```
<!-- .slide: data-background="aquamarine" -->
```
----
<!-- .slide: data-background="linear-gradient(#e66465, #9198e5)" -->
## Dégradés linéaires
```
<!-- .slide: data-background="linear-gradient(#e66465, #9198e5)" -->
```
----
<!-- .slide: data-background="radial-gradient(#ffffff, #000000)" -->
## Dégradés radiaux
```
<!-- .slide: data-background="radial-gradient(#ffffff, #000000)" -->
```
----
# Images
<!-- .slide: data-background="https://live.staticflickr.com/65535/52111639141_90a8e04e08_b.jpg"-->
```
<!-- .slide: data-background="https://live.staticflickr.com/65535/52111639141_90a8e04e08_b.jpg"-->
```
----
# Images
<!-- .slide: data-background="https://i.imgur.com/PV6sKHY.png"-->
```
<!-- .slide: data-background="https://live.staticflickr.com/65535/52111639141_90a8e04e08_b.jpg"-->
```
----
# Dimension des images
<!-- .slide: data-background="https://live.staticflickr.com/65535/52111639141_90a8e04e08_b.jpg"; data-background-size="25%"; data-background-position="bottom" -->
Par défaut c'est « cover »
- data-background-size : [33% / contain / ...](https://developer.mozilla.org/fr/docs/Web/CSS/background-size)
- data-background-position : [bottom/top/center/left/right](https://developer.mozilla.org/fr/docs/Web/CSS/background-position)
- data-background-repeat : [repeat/roud/...](https://developer.mozilla.org/fr/docs/Web/CSS/background-repeat)
----
# L'opacité
<!-- .slide: data-background="https://live.staticflickr.com/65535/52111639141_90a8e04e08_b.jpg"; data-background-opacity="0.5"-->
```
<!-- .slide: data-background="https://live.staticflickr.com/65535/52111639141_90a8e04e08_b.jpg"; data-background-opacity="0.5"-->
```
de 0 à 1
----
# Images animées
<!-- .slide: data-background="https://torrefacteur.co/wp-content/uploads/2013/11/image-4.gif"-->
```
<!-- .slide: data-background="https://torrefacteur.co/wp-content/uploads/2013/11/image-4.gif"-->
```
----
<!-- .slide: data-background-video="https://www.waielbi.net/IMG/mp4/640x360.mp4"-->
# Une vidéo
```
<!-- .slide: data-background-video="https://www.waielbi.net/IMG/mp4/640x360.mp4"--> https://pixabay.com/videos/id-126442/
```
----
<!-- .slide: data-background-video="https://www.waielbi.net/IMG/mp4/exemple.mp4"; data-background-opacity="0.3"-->
# Vidéo et opacité
```
<!-- .slide: data-background-video="https://www.waielbi.net/IMG/mp4/exemple.mp4"; data-background-opacity="0.2"-->
```
opacité 0.3
----
<!-- .slide: data-background-video="https://www.waielbi.net/IMG/mp4/exemple.mp4"; data-background-video-muted="true"; data-background-video-loop="true" -->
# Vidéo muette en boucle
```
<!-- .slide: data-background-video="https://www.waielbi.net/IMG/mp4/exemple.mp4"; data-background-video-muted="true"; data-background-video-loop="true" -->
```
---
# Le texte
----
## Ordre (index)
- Item 1 <!-- .element: class="fragment" data-fragment-index="1" -->
- Item 2 <!-- .element: class="fragment" data-fragment-index="2" -->
- Item 3 <!-- .element: class="fragment" data-fragment-index="1" -->
```
- Item 1 <!-- .element: class="fragment" data-fragment-index="1" -->
- Item 2 <!-- .element: class="fragment" data-fragment-index="2" -->
- Item 3 <!-- .element: class="fragment" data-fragment-index="1" -->
```
----
## Des effets
<p class="fragment fade-in">Fade in - <a href="https://revealjs.com/fragments/">voir tous les effets sur cette page</a></p>
<p class="fragment highlight-green fade-out">Highlight green + Fade out</p>
<p class="fragment semi-fade-out strike shrink">Semi Fade out + stike + shrink</p>
<p class="fragment highlight-red grow">Highlight red + grow</p>
<p class="fragment fade-in-then-out">Fade in, then out</p>
<p class="fragment fade-up">Slide up while fading in</p>
---
# Trucs
Touche F pour plein écran
Touche 0 ou Echap pour voir toutes les diapos
###### tags: `tutoriel` `codimd`