Tämä puhdas CSS-kuvakkeiden galleria on mitä kaikki Frontend-kehittäjät haluavat

Adobe-suunnittelija Whanging Zhang loi mielenkiintoinen web-sovellus varten tuottaa CSS-kuvakkeita. Se on yksinkertaisesti nimetty “CSS-kuvake” ja se voi olla yksi hienoimmista kuvake generaattorit frontend-kehittäjille.

Tämä projekti on täysin ilmainen ja avoinna GitHubista joten voit vapaasti ladata ja sekoittaa minkä tahansa koodin.

Nämä kuvakkeet sinulla ei ole CSS-riippuvuuksia tai tarvitset erityisiä selainominaisuuksia. Ensi silmäyksellä se voi tuntua, että kuvakkeet on rakennettu SVG: hen, mutta he ovat oikeastaan ​​vain divs.

CSS: n taian avulla voit rakentaa rivikuvakkeet varten yhteiset liitäntäelementit esimerkiksi hampurilaisvalikko, kolmipistekuvake tai tulostuskuvake (monien muiden joukossa).

Voit valita ohut viivakuvakkeet tai tummat täytetyt kuvakkeet. Molemmat käyttävät niitä vastaavia CSS-ominaisuuksia ja voit jopa nähdä, mitä ne ovat, napsauttamalla mitä tahansa kuvaketta luettelossa. Näet a liukuva sivupalkki HTML- ja CSS-koodilla sekä kuvakkeen suurennettuna.

Jos tarkastelet koodikenttien oikeaa yläkulmaa, näet pieni kopion kuvake. Napsauta tätä kopioi koodi automaattisesti leikepöydälle. Voi, ja kopio-kuvake? Myös Wentingin puhdasta CSS-koodia.

jotta muuttaa väriä kaikki kuvakkeet, vain Etsi väri- omaisuus pääkuvakeryhmässä. Päivitetään tämä väri- omaisuus myös kaikki muut.

Koska nämä kuvakkeet ovat melko yksinkertainen, ne eivät todennäköisesti toimi jokaisella verkkosivustolla. Mutta tämä on a viileä vaihtoehto kuville tai kuvakkeille ja se on täysin ilmainen.

Tutustu CSS-kuvakkeen kotisivu että katso lisää esimerkkejä ja kopioi / muokkaa lähdettä. Voit myös testaa jokainen kuvake erikseen CodePenissä, jos haluat lelun ympärillä selaimessasi.