Générateur de code CSS gratuit pour les filtres de style Instagram

Comment serait-il cool d'ajouter des filtres d'image sur votre site? Il y a des années, cela aurait nécessité l'utilisation de JavaScript, mais vous pouvez désormais créer des filtres d'image personnalisés avec du bon vieux HTML et CSS..

Et avec la webapp cssFilters, vous n’avez même pas besoin d’écrire du code CSS!

Cet outil gratuit vous aide à créer des filtres d’image personnalisés à l’aide des filtres CSS3. Vous pouvez trouver de nombreux guides qui couvrent la propriété de filtre CSS en détail. Mais avec cssFilters, vous n’aurez plus à vous soucier de la manière dont cela fonctionne. Vous devez simplement personnaliser vos paramètres et copier le code..

En haut de l'écran, vous remarquerez une longue barre de filtres Instagram personnalisés. Ces filtres incluent tous les choix populaires comme Hudson, Toaster, Inkwell, Lofi et bien d’autres..

Il vous suffit de cliquer sur le filtre de votre choix, puis sur le bouton “Code CSS” onglet dans le coin supérieur droit. De là, vous obtiendrez le code HTML et CSS. Il suffit de copier / coller sur votre site Web et vous êtes prêt à partir.

Mais vous pouvez également personnaliser ces filtres avec les curseurs de paramètres. Sous le “Générateur” Dans l'onglet, vous pouvez modifier les paramètres tels que saturation et contraste, ainsi que le flou, les niveaux de gris, le sépia et même le style de superposition, comme un dégradé linéaire ou radial..

Chaque fois que vous déplacez un curseur, il met automatiquement à jour le code afin que vous n'ayez rien à enregistrer..

Et vous pouvez même échanger l'image par défaut en en téléchargeant une à partir de votre ordinateur ou en en choisissant une dans Unsplash..

Cette application Web a été créée par Indrashish Ghosh et exécute bon nombre des classes par défaut de la bibliothèque CSSgram..

Mais les paramètres personnalisés vont bien au-delà des préréglages de base, et la génération de code libre en fait un outil pratique pour les codeurs et les non-codeurs. Nous avons déjà de nombreux générateurs CSS3 pour des propriétés telles que les dégradés d’arrière-plan et les ombres de texte. Et maintenant, nous avons cssFilters comme premier générateur de filtres d’image CSS3..