Étiquette : CSS

Publié le par — Laisser un commentaire

Créer du contenu Sticky

Parfois il est nécessaire de faire défiler du contenu au scroll de l’utilisateur.

Je vais vous montrer comment le faire sans qu’il déborde de son container.

Comment créer du contenu Sticky ?

Nous allons utiliser Bootstrap pour créer deux colonnes  à l’intérieur d’une div.

<div>
    <div class="col-lg-3 col-sm-12">
        <div>
            Contenu Sticky
        </div>
    </div>
    <div class="col-lg-9 col-sm-12">
         Contenu de l'article
    </div>
</div>

 

Nous allons ajouter des classes.

La class .div-wrapper ajoute un « display:flex« , ce qui met toutes les colonnes à la même hauteur ( Pratique pour du contenu dynamique comme des articles ).

La class .sticky ajoute une « position:sticky » et un « top: 30px;« 

En utilisant la position:sticky, il est possible de contrôler la position verticale et horizontale du contenu en utilisant « top », « bottom », « left » et « right ».

<div class="div-wrapper">
    <div class="col-lg-3 col-sm-12">
        <div class="sticky">
            Contenu Sticky
        </div>
    </div>
    <div class="col-lg-9 col-sm-12">
        Contenu de l'article
    </div>
</div>

 

Un peu de CSS

.div-wrapper {
    display:flex;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 30px;
}

 

Si vous n’avez pas de contenu dans la colonne de droite, n’hésitez pas à rajouter une hauteur minimum afin de tester votre contenu sticky.

<div class="div-wrapper">
    <div class="col-lg-3 col-sm-12">
        <div class="sticky">
            Contenu Sticky
        </div>
    </div>
    <div class="col-lg-9 col-sm-12" style="min-height:500px;">
        Contenu de l'article
    </div>
</div>

 

L’exemple en  codepen.

 

Un exemple sur Poujoulat.fr
Publié le par — Laisser un commentaire

Slider uniquement en CSS

E-loou slider css only
E-loou slider css only

Le slider est un élément html très souvent utilisé afin de mettre en valeur des actualités ou des annonces.

Si vous utilisez un CMS il existe un bon nombre de plugin vous permettant de mettre en place un slider, mais la plupart des plugins se servent de la technologie javascript afin d’animer le slider.

Pourquoi un slider en css ?

Lorsque l’on pense à l’optimisation de son site en terme de vitesse d’affichage, il est très souvent recommandé d’éviter au maximum les scripts javascript qui prennent du temps à se charger et à s’exécuter, selon le système d’exploitation, le navigateur, l’ordinateur ou le téléphone utilisés.

C’est pourquoi, un simple slider faisant appelle à du code CSS peut être utile, deplus il est très facile à mettre en œuvre.

Slider

Tout d’abord, on créée une DIV qui contiendra notre slider.

<div class="slider">
</div>

Côté CSS, on fixe la taille de la DIV, on la centre, on lui applique une couleur de fond et on cache tout ce qui pourrait s’afficher à l’extérieur.

.slider
{ width: 1000px;  /*longueur*/
  margin: 0 auto; /*centrage*/
  background: #ccc; /*fond de couleur*/
  overflow: hidden; /*cache*/
}

Ensuite, il suffit de créer une seconde DIV avec le contenu que nous allons animer en CSS.

<div class="slider">
  <div class="slider-content">
    <img src="https://e-loou.com/blog/wp-content/uploads/2021/12/logo_e-loou.svg" class="logo">
  </div>
</div>

Un peu de CSS pour cette DIV

.slider-content
{ position:relative; /*affichage en fonction de son conteneur*/
  left:1000px;  /*position d'affichage de départ*/
  animation: 4s slidezoom infinite; /*animation*/
}
.logo {width: 100px;} /*taille pour le SVG*/

La règle animation se décompose comme suit : durée, nom de l’animation, boucle.
vous pourriez l’écrire ainsi

animation-duration: 4s;
animation-name: slidezoom;
animation-iteration-count: infinite;

Dans cet exemple, nous utiliserons 2 types d’animations possibles en CSS : slide et zoom (scale)
il en existe pleins d’autres qui vous permettront d’enrichir l’aspect visuel de vos slider.

Aller plus loin

Animation Slide

Pour appliquer un effet de slider à la DIV, il suffit de lui appliquer une position de départ et une position de fin, grâce à la règle @keyframes

@keyframes slidezoom {
  0% {left: 1000px;} /*position début*/
  100% {left: -100px;} /*position fin*/
}

Le SVG faisant 100px de largeur, il faut enlever cette taille à la position de fin afin de voir l’image disparaitre. N’hésitez pas à changer les valeurs de positions.

Animation Zoom, règle scale()

Pour faire un zoom, sur l’image, dans cet example un zoom in, vous pouvez utiliser la règle scale(longueur,hauteur)

@keyframes slidezoom {
  0% {left: 1000px; transform: scale(1, 1);}
  50% {transform: scale(0.5, 0)}
  100% {left: -100px; transform: scale(1, 1.5)}
}

Code complet

<div class="slider">
  <div class="slider-content">
    <img src="https://e-loou.com/blog/wp-content/uploads/2021/12/logo_e-loou.svg">
  </div>
</div>
*{margin: 0;}

.slider
{width: 1000px; overflow: hidden; margin:0 auto; background:#ccc;}

.slider-content
{position:relative; left:1000px; animation: 4s slidezoom infinite;}

.logo {width: 100px;}

@keyframes slidezoom {
  0% {left: 1000px; transform: scale(1, 1);}
  50% {transform: scale(0.5, 0)}
  100% {left: -100px; transform: scale(1, 1.5)}
}

Résultat

Publié le par — Laisser un commentaire

Rendre une vidéo Youtube responsive

Lors de l’intégration d’une vidéo youtube, vous avez dû intégrer une <iframe>
Les iframe ont obligatoirement des largeur et hauteur définies.
Sans ajout de code CSS, vous ne pourrez donc pas avoir de vidéo responsive.

Voici le code de l’iframe que vous récuperez en cliquant sous la vidéo youtube, sur partager puis sur intégrer

<iframe title="YouTube video player" src="https://www.youtube.com/embed/xxxxxxxx" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Afin de rendre responsive cette vidéo, il faut encapsuler l’iframe dans une DIV et lui assigner une class CSS, nommée ci-dessous .video-container

<div class="video-container">
    <iframe title="YouTube video player" src="https://www.youtube.com/embed/xxxxxxxx" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

Ajoutez les styles css

pour rendre la vidéo youtube responsive, il vous suffit d’ajouter ces règles CSS à votre feuille de style en précisant le point de rupture pour les mobiles

@media (max-width:478px;) {
    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    }
    .video-container iframe,
    .video-container object,
    .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
}
16:9 aspect ratio : 9 / 16 * 100% = 56.25%;
4:3 aspect ratio : 3 / 4 * 100% = 75%;
1:1 aspect ratio : 1 / 1 * 100% = 100%.

Vous noterez l’utilisation de la règle « padding-bottom:56.25% », combiné à une hauteur à 0.
Imaginons un carré de 200x200px a qui ont enlève sa hauteur. Alors la hauteur de l’élément carré sera gérée par le padding-bottom.
Afin de transformer notre carré en rectangle ayant un aspect 16/9ème, nous aurons besoin d’un padding à 56.25%