Ombrages, images et vidéos

Les ombrages

Vous pouvez facilement appliquer cet effet d’ombre en ajoutant un class = "z-profondeur-2" à une balise HTML. Alternativement, vous pouvez étendre l’une de ces ombres avec Sass en utilisant @ extend .z-depth-2 . Un z-profondeur-0 peut être utilisé pour supprimer les ombres des éléments qui ont des profondeurs z par défaut.


    <div class="col s12 m2">
      <p class="z-depth-1">z-depth-1</p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-2">z-depth-2</p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-3">z-depth-3</p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-4">z-depth-4</p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-5">z-depth-5</p>
    </div>
        

Les images

Les images peuvent être stylisées de différentes manières.

Images adaptatives

Pour redimensionner les images en fonction de la largeur de la page, vous pouvez ajouter la classe responsive-img à votre balise d’image. Il aura maintenant un max-largeur: 100% et hauteur: auto .


    <img class="responsive-img" src="cool_pic.jpg">
        

Images rondes

Ceci est une image carrée. Ajoutez la classe « circle » afin de la faire apparaitre ronde.

Pour que les images paraissent circulaires, il suffit d’ajouter class = "circle" .


      <div class="col s12 m8 offset-m2 l6 offset-l3">
        <div class="card-panel grey lighten-5 z-depth-1">
          <div class="row valign-wrapper">
            <div class="col s2">
              <img src="images/yuna.jpg" alt="" class="circle responsive-img"> 
            </div>
            <div class="col s10">
              <span class="black-text">
                Ceci est une image carrée.
                Ajoutez la classe "circle" pour qu'elle apparaisse circulaire.
              </span>
            </div>
          </div>
        </div>
      </div>
            

Vidéos

Nous fournissons un conteneur pour l’affichage des vidéos qui les redimensionnent de manière adaptative.

Responsive Embeds

Pour rendre vos embeds responsive, enveloppez-les simplement avec un conteneur « div » qui a la classe video-container .


      <div class="video-container">
        <iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
      </div>
        

Responsive Videos

Pour que vos vidéos HTML5 réagissent, ajoutez la classe responsive-video à la balise vidéo.


  <video class="responsive-video" controls>
    <source src="movie.mp4" type="video/mp4">
  </video>