Générateur de filtres CSS

Le générateur de filtres CSS est un éditeur visuel pour la propriété de filtre CSS. Vous déplacez un curseur pour chaque fonction de filtre - flou, luminosité, contraste, saturé, niveaux de gris, sépia, inverti, rotation de teinte et opacité - et regardez l'effet s'appliquer à un aperçu en temps réel, puis copiez le CSS exact qu'il produit.

La propriété de filtre applique des effets graphiques comme le flou, le changement de couleur et l'ajustement du contraste directement dans le navigateur, sans éditeur d'image requis Plusieurs fonctions peuvent être enchaînées dans une seule déclaration et sont appliquées dans l'ordre, c'est ainsi que l'apparence de style photo telle que vintage, chaleureuse et dramatique est construite. Cet outil gère cette chaîne pour vous et génère uniquement les fonctions que vous avez modifiées, en gardant le CSS propre.

Tout se passe dans votre navigateur La page s'ouvre sur le préréglage Vintage ; choisissez un autre préréglage, affinez chaque fonction et copiez la déclaration Pas de compte, pas de téléchargements et elle continue de fonctionner hors ligne une fois la page chargée.

Voici le générateur de filtres CSS sur un look photo chaud Cliquez sur le filtre de lectures de préréglage chaud et de CSS généré : luminosité (105 %) saturé (140 %) sépia (25 %) ; avec l'aperçu se déplaçant vers l'ambre Faites glisser le flou vers 2 px et la ligne devient filtre : flou (2 px) luminosité (105 %) saturé (140 %) sépia (25 %) ; Cliquez sur Aucun, ou appuyez sur Réinitialiser, et il revient au filtre : aucun ; Parce que l'aperçu est un échantillon de couleur fixe plutôt que votre propre photo, vérifiez le CSS copié sur l'image réelle avant de l'expédier.

Les filtres s'appliquent dans l'ordre écrit, et l'ordre change le résultat : en niveaux de gris puis sépia n'est pas la même chose que sépia puis niveaux de gris, car le premier supprime la couleur que le second teinterait Le gotcha qui mérite d'être connu est structurel plutôt que visuel Tout élément avec un filtre autre que nul devient un bloc contenant pour ses descendants fixes et absolument positionnés, donc une baisse ou un modal à l'intérieur d'un parent filtré se positionnera contre ce parent au lieu de la fenêtre d'affichage Il crée également un nouveau contexte d'empilement, qui peut casser l'ordre des indices z qui a fonctionné auparavant Si un filtre casse une disposition d'une manière qui ne semble pas liée à l'apparence, c'apparence, c'une raison presque toujours pourquoi les filtres sont les plus chers éléments de copieurs sont les plus grands, les plus grands, les plus chers, les éléments sont les plus grands.