Après mon premier article sur les astuces en CSS, puis le second, une autre astuce pour des menus responsives (incluse sur cette page), un autre post sur les choses à éviter ainsi que sur les préfixes devenues inutiles, quelques idées comme les couleurs relatives et quelques autres, voici le temps d’un autre article sur le sujet.

Cacher un élément avec une animation

Le but ici est d’avoir un élément HTML (un popup par exemple) et de le cacher après quelques instants en l’animant. Le principal problème étant que les propriétés « display: none » et « visibility: hidden » sont impossibles à animer, et il faut donc contourner tout ça. Mon astuce est inspirée de cette page.

On va se servir de l’opacité de l’élément. Le problème, c’est que si on n’utilise que ça, l’élément sera toujours là mais juste invisible : il occupera toujours de la place et masquera ce qui se trouve dessous (si c’est un formulaire ou un lien qui se trouve en dessous, ils seront inaccessible). On va donc réduire la hauteur de l’élément à zéro et masquer tout ce qui dépasse : l’élément ne mesurera plus rien.

L’élément à cacher est ici le « #popup ». Il se cachera après 3 secondes et l’animation durera 1 seconde.

Code CSS :

#popup {
    animation: disapear 1s 3s;
    animation-fill-mode: forwards;
    height: 100px;
    opacity: 1;
    overflow: hidden;
}

@keyframes disapear {  
    100% {
        height: 0;
        opacity: 0;
    }
}

Le fonctionnement des animations est simple : on dit qu’un élément HTML doit être animée avec une animation bien précise, et plus loin dans le code on va déclarer ladite animation : c’est le rôle du « @keyframes disapear », où on décrit l’avancement de l’animation. Ici, seul l’avancement à 100% est déclarée : l’état à 0% correspond au CSS déclaré « normalement », mais il est possible de déclarer des états intermédiaires pour chaque pourcentage.

La ligne « animation-fill-mode: forwards; » est très importante : sans elle, l’animation une fois terminée replacera l’élément dans son état initial. Ne pas mettre cette ligne permet de faire des animations dont les effets ne durent pas.

Les démos de codes sont ici :

• sans le « animation-fill-mode: forwards; »
• avec le « animation-fill-mode: forwards; »

Mettre une ligne de texte sur une seule ligne et masquer ce qui dépasse

Ici, on veut qu’une ligne de texte ne retourne pas à la ligne. On souhaite également masquer ce qui dépasse. Bien-sûr, on connaît la méthode classique avec seulement deux propriétés :

#element {
    white-space: nowrap;
    overflow: hidden;
}

Sauf que la coupure n’est pas belle. L’astuce ici est d’ajouter la propriété CSS3 « text-overflow », qui permet de choisir ce qui se passe à la coupure. Je choisis toujours « ellipsis », qui va ajouter des points de suspensions avant de couper la ligne.

Notez qu’il faut appliquer le « overflow: hidden » à un élément qui possède une taille définie (ici, je l’applique au bloc parent, dans lequel on met un bloc enfant).

On obtient alors :

#parent-block {
    overflow: hidden;
    text-overflow: ellipsis;
}

#block {
    white-space: nowrap;
}

• démonstration.
• Mise à jour, par Lokoyote : il faut que les éléments soient de type block/inline-block.

Par ailleurs, pour que ça marche également sur les éléments <pre> et <code> et dans Firefox, ajoutez ceci : pre, code { white-space: pre-wrap; }.
Aussi, faites attention car cet effet masque du texte. Si c’est un résumé suivi d’un lien « lire la suite » ce n’est pas grave. Mais si c’est une ligne de code à copier, ça devient embêtant.

Ceci peut devenir très intéressant avec les flexbox, où les éléments ont une taille variable, et si l'on veut par exemple que les éléments (de liste par exemple) restent sur une seule ligne.

(source & liens)