Deze Galerij van Pure CSS-pictogrammen is wat alle ontwikkelaars van Frontend willen

Adobe-ontwerper Wenting Zhang heeft een interessante web-app voor genereren van pure CSS-pictogrammen. Het wordt eenvoudigweg genoemd “CSS-pictogram” en het is misschien een van de coolste pictogramgeneratoren voor frontend-ontwikkelaars.

Dit project is helemaal gratis en open source op GitHub dus je bent vrij om te downloaden en knoeien met een van de codes.

Deze pictogrammen geen CSS-afhankelijkheden hebben of heb je speciale browserfuncties nodig. Op het eerste gezicht lijkt het misschien alsof de pictogrammen zijn gebouwd op SVG's maar het zijn eigenlijk gewoon divs.

Door de magie van CSS kun je bouwen aangepaste lijn iconen voor gemeenschappelijke interface-elementen zoals het hamburgermenu, het pictogram met de drie stippen of het afdrukpictogram (naast vele andere).

Je kunt kiezen tussen dunne lijn pictogrammen of donkere gevulde pictogrammen. Ze gebruiken beide vergelijkbare CSS-eigenschappen en je kunt zelfs zien wat ze zijn door op een pictogram in de lijst te klikken. Je zult een zien zijbalk verschuiven met de HTML- en CSS-code samen met het vergrote pictogram.

Als u naar de rechterbovenhoek van de codevelden kijkt, ziet u a kleine kopie pictogram. Klik dat aan automatisch de code kopiëren naar je klembord. Oh, en dat kopieersymbool? Ook gebouwd met de pure CSS-code van Wenting.

Naar verander de kleur van elk pictogram, alleen vind de kleur eigendom in de hoofdpictogramklasse. Updaten van die kleur eigendom zal ook al het andere veranderen.

Omdat deze pictogrammen zijn best makkelijk, ze zullen waarschijnlijk niet voor elke website werken. Maar dit is een cool alternatief voor afbeeldingen of pictogramlettertypen en zijn helemaal gratis.

Bekijk de CSS-pictogram introductiepagina naar zie meer voorbeelden en naar kopieer / bewerk de bron. Je kan ook test elk pictogram afzonderlijk in CodePen als je wilt speel rond met de bron in je browser.