Designere Få gratis SVG baggrundsmønstre fra Hero Patterns
Alle moderne webbrowsere støtte SVG ogdet er det mest fleksible billedformat du kan bruge. Men designe tilpassede SVG'er fra bunden er ingen nem opgave.
Derfor er et værktøj som Heltemønstre kan være så værdifuld for designere. Det er et gratis bibliotek af gentagelige SVG mønstre at du kan tilpasse med forskellige stilarter, farver og opacitet.
Heltemønstre har det godt over 40 + forskellige mønstre at vælge imellem og de er alle opført lige på hjemmesiden. Som du ruller ned, vil du se levende demoer for hver enkelt og du kan klikke på nogen af dem for at se, hvordan de ser ud.
Øverst på siden finder du en fast bar med indstillinger til ændre forgrunds- og baggrundsfarverne. Baggrundsfarven gælder for flad overflade og forgrundsfarven gælder for mønstre i SVG'erne.
Takket være naturlig blanding stil, Det er svært at komme op med en dårlig farvekombination (selvom det stadig er muligt). Mønstre spænder fra damspil til detaljerede gentagende ikoner som ankre.
Når du finder et mønster, kan du bare lide klik på den pågældende blok til et modalt vindue med flere detaljer. Herfra kan du justere forgrunds- / baggrundsfarver, sammen med forgrundsopacitet for ikoner.
Men den virkelige magi sker i kodestykket hvor du kan kopier CSS at integrere SVG udelukkende gennem kode. I CSS er der en base64 ()
metode til konvertere strengdata til SVG-data. Dette er ret almindeligt og det virker også med andre billeder som PNG'er.
Så hvis du ikke vil have SVG filen gemt lokalt kan du simpelthen Kopier / indsæt CSS-koden lige ind i dit stylesheet. Dette vil integrere den gentagende baggrund med rigtige farver lige ind på dit websted. Hvor sej!
Eller, hvis du hellere vil rediger SVG dig selv du kan download en kopi af det uformede SVG-billede. På den måde kan du Gør alle redigeringer manuelt i design software som Illustrator.
Hero Patterns er et af de få værktøjer, der giver designere tage fuld kontrol over SVGs lige fra browseren. Gentagende baggrunde bruges til at stole udelukkende på PNG'er, men webstandarder har avanceret langt nok SVG'er kan tage deres plads.
Til kom igang, bare besøg Hero Patterns hjemmeside og gennemse deres mønsterbibliotek. Nye mønstre få tilføjet ofte, så sørg for at tjekke tilbage så ofte.