Δωρεάν γεννήτρια κώδικα CSS για φίλτρα τύπου Instagram

Πόσο θα ήταν καλό να προσθέσετε φίλτρα εικόνας στον ιστότοπό σας; Πριν από χρόνια, αυτό θα απαιτούσε JavaScript, αλλά σήμερα μπορείτε να δημιουργήσετε προσαρμοσμένα φίλτρα εικόνας με καλή παλιά HTML και CSS.

Και με το webapp cssFilters δεν χρειάζεται καν να γράψετε κάποιο από τον κώδικα CSS!

Αυτό το δωρεάν εργαλείο σας βοηθά να δημιουργήσετε φίλτρα προσαρμοσμένης εικόνας χρησιμοποιώντας φίλτρα CSS3. Μπορείτε να βρείτε πολλούς οδηγούς που καλύπτουν λεπτομερώς την ιδιότητα φίλτρου CSS. Αλλά με το cssFilters δεν θα χρειαστεί να ανησυχείτε για το πώς όλα λειτουργούν, απλά προσαρμόστε τις ρυθμίσεις σας και αντιγράψτε τον κώδικα.

Στο επάνω μέρος της οθόνης θα παρατηρήσετε μια μεγάλη μπάρα γεμάτη προσαρμοσμένα φίλτρα Instagram. Αυτά τα φίλτρα περιλαμβάνουν όλες τις δημοφιλείς επιλογές όπως Hudson, Toaster, Inkwell, Lofi και πολλούς άλλους.

Κάνετε απλώς κλικ σε οποιοδήποτε φίλτρο θέλετε και στη συνέχεια κάντε κλικ στο “Κωδικό CSS” καρτέλα στην επάνω δεξιά γωνία. Από εκεί θα έχετε και τον κώδικα HTML και CSS. Απλά αντιγράψτε / επικολλήστε τον ιστότοπό σας και είστε καλά να πάτε.

Αλλά μπορείτε επίσης να προσαρμόσετε αυτά τα φίλτρα με τα ρυθμιστικά ρυθμίσεων. Σύμφωνα με το “γεννήτρια” καρτέλα μπορείτε να αλλάξετε τις ρυθμίσεις όπως ο κορεσμός και η αντίθεση μαζί με τη θολούρα, την κλίμακα του γκρι, τη σέπια και ακόμη και το στυλ επικάλυψης όπως μια γραμμική κλίση ή ακτινική κλίση.

Κάθε φορά που μετακινείτε ένα ρυθμιστικό, αυτόματα ενημερώνει τον κώδικα, ώστε να μην χρειάζεται να αποθηκεύσετε τίποτα.

Και μπορείτε επίσης να ανταλλάξετε την προεπιλεγμένη εικόνα ανεβάζοντας την από τον υπολογιστή σας ή επιλέγοντάς την από το Unsplash.

Αυτό το webapp έγινε από Indrashish Ghosh και τρέχει πολλά από τα default classes που βρέθηκαν στη βιβλιοθήκη CSSgram.

Αλλά οι προσαρμοσμένες ρυθμίσεις ξεπερνούν τις βασικές προεπιλογές και η γενιά ελεύθερου κώδικα κάνει αυτό ένα εύχρηστο εργαλείο για κωδικοποιητές και μη κωδικοποιητές. Έχουμε ήδη πολλές γεννήτριες CSS3 για ιδιότητες όπως κλίσεις φόντου και σκιά κειμένου. Και τώρα έχουμε cssFilters ως πρεμιέρα CSS3 γεννήτρια φίλτρων εικόνας.