Bezmaksas CSS koda ģenerators Instagram stila filtriem

Cik foršs būtu pievienot attēlu filtrus uz jūsu vietni? Pirms gadiem tas būtu vajadzējis JavaScript, bet mūsdienās jūs varat izveidot pielāgotus attēlu filtrus ar labu veco HTML un CSS.

Un ar cssFilters webapp jums pat nav jāraksta kāds no CSS kodiem!

Šis bezmaksas rīks palīdz veidot pielāgotus attēlu filtrus, izmantojot CSS3 filtrus. Jūs varat atrast daudzus ceļvežus, kas sīki aptver CSS filtra īpašumu. Bet ar cssFilters jums nebūs jāuztraucas par to, kā tas viss darbojas, jūs vienkārši pielāgojat iestatījumus un kopējiet kodu.

Ekrāna augšdaļā jūs redzēsiet garu joslu, kas ir pilns ar pielāgotiem Instagram filtriem. Šie filtri ietver visas populārākās izvēles, piemēram, Hudson, Tosteris, Inkwell, Lofi un daudzi citi.

Vienkārši noklikšķiniet uz jebkura vēlamā filtra un pēc tam noklikšķiniet uz “CSS kods” cilnes augšējā labajā stūrī. No turienes jūs saņemsiet gan HTML, gan CSS kodu. Vienkārši nokopējiet / ielīmējiet savā tīmekļa vietnē un jums ir labi iet.

Bet jūs varat arī pielāgot šos filtrus ar iestatījumu slīdņiem. Saskaņā “ģenerators” cilnē jūs varat mainīt iestatījumus, piemēram, piesātinājumu un kontrastu, kā arī izplūdumu, pelēktoņu, sēpiju un pat pārklājuma stilu, piemēram, lineāru gradientu vai radiālu gradientu.

Katru reizi, kad pārvietojat slīdni, tas automātiski atjaunina kodu, lai jums nekas nav jāsaglabā.

Un jūs pat varat nomainīt noklusēto attēlu, augšupielādējot vienu no sava datora vai izvēloties vienu no Unsplash.

Šo webapp izveidoja Indrashish Ghosh, un tā vada daudzas noklusējuma klases, kas atrodamas CSSgram bibliotēkā.

Bet pielāgotie iestatījumi ir daudz plašāki par pamata iestatījumiem, un brīvā koda ģenerēšana padara to par noderīgu rīku gan kodētājiem, gan nekodētājiem. Mums jau ir daudz CSS3 ģeneratoru īpašībām, piemēram, fona gradientiem un teksta ēnām. Un tagad mums ir cssFilters kā pirmizrāde CSS3 attēlu filtra ģenerators.