Astuce css: avoir une DIV qui occupe 100% du viewport

Grâce à CSS3, c'est super simple, il suffit d'utiliser l'unité vh: 100vh = la hauteur du viewport (la zone visible de l'écran)

Du coup, on peut même avoir une barre de menu et d'icônes puis en-dessous une div qui occupe tout le reste du viewport en recourant à calc():

#mon_wrapper{
     height: calc(100vh - 64px); /* 64px = la hauteur du menu+ celle de la barre d'icônes */
}

C'est juste... Beau.

Lire la suite de Astuce css: avoir une DIV qui occupe 100% du viewport

J'adore les selecteurs css

Sur une page HTML, j'avais besoin de filtrer en temps réel un grand nombre de photos... ben c'est vraiment simple.

Tu mets un input texte avec un onkeyup qui récupère sa valeur et tu utilises le sélecteur

"img[src*='"+filter+"']" 
pour récupérer toutes les images qui correspondent (celles qui contiennent le filtre).

c'est tout.

En gros et avec mon VanillaJS:

on("keyup","#filter",function(){
        filter=this.value;
        if (filter){
            hide("#images img");
            show("#images img[src*='"+filter+"']")
        }else{
            show("#images img");
        }       
    })

Lire la suite de J'adore les selecteurs css

La propriété CSS - objectif-fit - NextuM

Je ne connaissais pas cette propriété qui permet à une image d'occuper tout ou partie de l'espace parent (un peu comme son pendant background-size)

Dans les exemples suivants, l'image a un width et un height de 100% à chaque fois.

object-fit: cover;

Couvre toute la surface quitte à perde des parties de l'image.



object-fit: contain;

Couvre toute la surface quitte à laisser des zones vides dans le parent.


object-fit: fill;

Remplit toute la surface quitte déformer l'image.

Comme d'habitude c'est pas poue IE mais OSEF.

Change Color of SVG on Hover | CSS-Tricks

Changer la couleur d'un SVG, astuces.

  • le svg inline ou le SVG symbol + la propriété css fill: facile mais lourd puisque l'image est rechargée avec la page à chaque fois au lieu d'être mise en cache.
  • deux background SVG différents (un de chaque couleur): oui, merci mon con, on y aurait pensé tout seul... c'est pas tellement une astuce et ça multiplie par deux le nombre d'icônes. SU-PER.
  • un background SVG (ou SVG object) + un filter : pas bête... le plus dur étant de trouver la couleur que l'on souhaite à base de filters.
  • utiliser un masque de la couleur de fond du site (et donc l'icône en transparent dedans) puis définir la couleur de fond de l'image: oui, mais ça déplace le problème sur la couleur de fond.
  • Un SVG background sous forme de data:image/svg+xml dans le fichier CSS: retour à la méthode 1 mais en écartant le souci de chargement, puisque le fichier css sera mis en cache. Bon, il risque de peser sa tonne au premier chargement, mais bon...

C'est con que les fontes d'icônes soient un problème pour l'accessibilité, parce que ça reste quand même la solution la plus propre et optimisée, je trouve.

Fil RSS des articles de ce mot clé
Feed content empty !