Générateur de filtres CSS

Chaque générateur de filtres CSS vous permet d'empiler flou (), luminosité (), contraste () et le reste - mais presque aucun d'entre eux ne laisse l'ordre importe, car la plupart n'appliquent les filtres que dans une séquence fixe. Celle-ci est différente : la chaîne de filtres est une véritable liste réorganisable construite avec le glisser-déposer HTML5 natif, et la réorganisation de deux fonctions modifie véritablement les pixels rendus, exactement comme dans un CSS de production. Le flou puis la rotation de la teinte est différent de la rotation de la teinte puis le flou, et vous pouvez maintenant comprendre pourquoi avant de l'expédier.

Téléchargez votre propre photo et les neuf fonctions chaînables — flou, luminosité, contraste, saturation, rotation de teinte, sépia, niveaux de gris, inversion et ombre portée — s'y appliquent en direct comme une véritable déclaration CSS « ​​filtre » sur un élément « <img> », pas un échantillon simulé. Ajoutez une fonction à partir de la sélection, faites glisser sa ligne vers le haut ou le bas de la liste pour changer sa position dans la chaîne, ajustez son curseur, et l'aperçu et la ligne `filter: ...;` copiable sont mis à jour à chaque entrée. Supprimez une étape avec son propre bouton, juste là dans la ligne.

Une deuxième chaîne, plus petite, crée une valeur de « filtre de toile de fond » appliquée à un panneau de superposition positionné sur l'aperçu, afin que vous puissiez voir l'effet de verre dépoli — la technique derrière les barres de navigation translucides modernes et les arrière-plans modaux — sans toucher à la propre chaîne de filtres de l'image sous-jacente. Cela fonctionne avant même que vous téléchargiez une photo, sur l'arrière-plan coloré de l'espace réservé, afin que vous puissiez composer un design de panneau givré en quelques secondes.

Lorsque l'aperçu semble correct, copiez le CSS directement depuis la boîte de sortie ou exportez un vrai PNG : la même chaîne de filtre est transmise à la propriété `ctx.filter` d'un contexte Canvas 2D — qui utilise la syntaxe identique à la propriété `filter` du CSS — et le canevas est converti en un fichier téléchargeable avec `canvas.toBlob()`. L'image exportée correspond exactement à l'aperçu en direct, car elle est produite par la même chaîne de filtre passant par la même primitive de rendu. Tout se passe localement dans votre navigateur ; votre photo n'est jamais téléchargée nulle part.