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.

(...)

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");
        }       
    })

(...)

Patrick Balkany condamné à quatre ans de prison, avec incarcération immédiate

Il a quitté la salle d'audience escorté par les forces de l'ordre et dormira ce soir en détention. Patrick Balkany a été reconnu coupable de fraude fiscale, ce vendredi, par le tribunal correctionnel de Paris, et condamné à quatre ans de prison avec incarcération immédiate. Son épouse écope de trois ans de prison, sans mandat de dépôt. Tous les deux voient leurs peines assorties de 10 années d'inéligibilité.

Allez hop, au suivant !

Broncomic: perdre du temps à le gagner

Depuis quelques temps, j'avais envie de passer à un style plus cartoon... c'est fait.

Mais j'aimais bien l'idée de faire de petites BD courtes pour faire passer un message, aérer les articles, dire des conneries etc. Or, quand on est un warrior du dimanche, on se dit que faire à chaque fois les choses à partir de zéro, c'est tout de même un peu con, surtout quand on manque de temps vraiment libre pour s'y atteler.

En vrai codeur du dimanche que je suis, je me suis dit qu'une appli qui superposerait des «calques» permettrait de choisir rapidement des éléments séparés sélectionnés dans une banque de dessins de base afin de produire sans prise de tête une case vite-faite-sur-le-gaz.

Le mot-clé étant «rapide»

Me voici donc en train de faire un test ou deux pour trouver le moyen d'éviter la balise canvas que je trouve imbitable... Je tombe sur html-to-image qui fait le job. Le reste, c'est du css de base - mon rayon.

Après réalisation de cette appli sur la base de mon framework secret (chut) ça marche pas mal du tout. A défaut de vous la faire tester (je dis déjà assez de conneries comme ça sans que vous m'en fassiez dire davantage bande de tarés ) voici quelques captures d'écran :

La partie supérieure contient le visuel en cours, la partie du bas, les différents objets qu'on peut superposer répartis dans des onglets.

imageimageimageimageimage

Un bémol, j'ai pas réussi à faire un POST du blob pour sauvegarder sur le serveur afin d'obtenir une adresse de partage anonymisée (genre broncomic.warriordudimanche.net?comic=65df4gs6df5g4s6d).

J'en suis réduit à télécharger l'image pour l'uploader ensuite dans mon blog. C'est un peu con, mais comme j'avais fait un plugin permettant d'uploader des images directement en les déposant sur la page d'édition d'articles, c'est pas trop chiant en fait.

TCHUSS

Fil RSS des articles