Pagrindinis » Grafika » Ši „Pure CSS“ piktogramų galerija yra tai, ko nori visi „Frontend“ kūrėjai

    Ši „Pure CSS“ piktogramų galerija yra tai, ko nori visi „Frontend“ kūrėjai

    Adobe dizaineris Wenting Zhang sukūrė įdomi žiniatinklio programa dėl generuoti grynąsias CSS piktogramas. Tai tiesiog pavadinta “CSS piktograma” ir tai gali būti viena iš vėlesnių piktogramų generatoriai Frontend kūrėjams.

    Šis projektas yra visiškai nemokama ir atidarytas „GitHub“ todėl jūs galite laisvai atsisiųsti ir netvarkyti bet kokio kodo.

    Šios piktogramos neturi jokių CSS priklausomybių arba reikia specialių naršyklės funkcijų. Iš pirmo žvilgsnio gali atrodyti, kad piktogramos yra pastatytos ant SVG, bet jie iš tikrųjų yra tik divs.

    Per CSS magiją galite kurti pasirinktinės eilutės piktogramos dėl bendri sąsajos elementai pvz., mėsainių meniu, trijų taškų piktograma arba spausdinimo piktograma (tarp daugelio kitų).

    Galite pasirinkti plonos linijos piktogramos arba tamsiai užpildytos piktogramos. Jie abu naudojasi panašių CSS savybių ir netgi galite pamatyti, kas jie yra, spustelėję bet kurią piktogramą sąraše. Pamatysite a stumdomas šoninė juosta su HTML ir CSS kodu kartu su padidinta piktograma.

    Jei žiūrėsite į viršutinį dešinįjį kodo laukų kampą, pamatysite a mažai kopijos piktogramos. Spustelėkite, kad automatiškai nukopijuos kodą į iškarpinę. O ir ši kopijos piktograma? Taip pat pastatytas grynas CSS kodas.

    Į pakeisti spalvą bet kokios piktogramos, tiesiog Surask spalva nuosavybė pagrindinėje piktogramų klasėje. Atnaujinama spalva nuosavybė taip pat pasikeis visa kita.

    Kadangi šios piktogramos yra gana paprasta, jie tikriausiai neveiks kiekvienoje svetainėje. Bet tai yra a vėsioje alternatyvoje vaizdams ar piktogramų šriftams ir tai visiškai nemokama.

    Patikrinkite CSS piktogramos pagrindinis puslapis į daugiau pavyzdžių ir kopijuoti / redaguoti šaltinį. Tu taip pat gali išbandyti kiekvieną piktogramą atskirai CodePen, jei norite žaislas aplink šaltinį naršyklėje.