Kde mohu získat ikony pro sprite?

1. Nakreslete si to sami.
2. Hledejte ve vyhledávači mezi obrázky.
3. Na internetu existují speciální sbírky ikon, které se často rozdávají zdarma.
4. Mnoho sociálních sítí a služeb zobrazuje na svých webových stránkách oficiální loga a ikony, které lze použít v jejich aplikacích.
5. Chcete-li automaticky vytvořit soubor sprite pro ikony sociálních sítí, můžete použít službu. Vyberte ikony v požadovaném pořadí, uložte archiv se skriptem, rozbalte jej a podívejte se na obrázek icons.png- hotový sprite soubor.

Kromě zobrazování ikon jsou skřítci užiteční při vývoji animovaného menu, kdy při najetí na jeho položku buď ztmavne, nebo se rozsvítí. Poté se do souboru sprite uloží dvě sady tlačítek a na základě události „myš přes“ se dynamicky změní pozice obrázku na pozadí pomocí JS.

Nabídka tlačítek s odkazy na kanály pro příjem aktualizací, která byla slíbena na začátku poznámky, byla hotová a tímto článek končím. Přihlaste se k odběru aktualizací, zábava právě začíná.

29. října 2019 Příspěvek byl aktualizován

Jurij Nemets

Tlačítkové efekty sociální sítě pro web

Myslíte si, že je možné kombinovat tlačítka sociálních sítí a obrázky? Takže oba vypadají velmi krásně a kreativně. Ano, to se dá udělat velmi dobře zajímavým způsobem. A dokonce ne jeden, ale hned několik. Přesněji řečeno, v tomto článku najdete 12 způsobů, jak vytvořit skvělé efekty pro tlačítka sociálních sítí při najetí myší na obrázek. V některých případech je nutné nejen ukazovat, ale také kliknout myší, což také přidává interaktivitu. Neobvyklý způsob, jak zvýraznit svůj web pomocí právě takových efektů, když umístíte kurzor nad obrázek.

Podívejte se a stáhněte si všech 12 příkladů z níže uvedeného odkazu:

Stažení

Mimochodem, pokud jde o efekty vznášení, na webu je na toto téma několik dalších článků:

Pokud se vám efekt líbí, použijte ho!

Líbil se mi například první efekt. Chcete-li vidět efekt, umístěte ukazatel myši na obrázek níže.

(ukažte na obrázek)

Docela atraktivní způsob, jak zvýraznit nejdůležitější obrázky jak na webu, tak na jednostránkovém prodejním webu. Ale jak jsem již psal, efektů je podstatně více (12!).

Krok 1 – HTML

Ikony, které vidíte na tlačítkách sociálních médií, používají FA (Font Awesome). Tyto ikony jsou spojeny v jedné linii mezi bloky :

Po stažení všech zdrojů je třeba vybrat efekt, který se vám líbí. Můj efekt je v souboru index.html. Tento soubor také obsahuje všechny potřebné styly pro vytvoření efektu hoveru.

Je tam veškerá potřebná struktura. Zbývá jen nastavit styly v CSS. Proto přecházíme na 2. a zároveň poslední krok.

Krok 2 – CSS

Styly jsou v každém HTML soubor mezi bloky . To znamená, že v každém souboru s různými efekty jsou odpovídající styly umístěny v tomto bloku v horní části dokumentu.

Musíte vzít tyto styly a vložit je do souboru stylů:

Hned vás varuji: některé příklady používají jQuery, protože tam je pro plný efekt potřeba kliknout na obrázek. Stačí si vzít veškerý kód JS, který se na stránce používá, s příkladem, který se vám líbí.

Pozornost! Po vložení kódu CSS do šablony stylů se tlačítka nemusí zobrazit úplně stejně jako v příkladu. To může být způsobeno tím, že váš soubor stylů obsahuje různé styly pro prvky a třídy, které jsou použity v ukázce.

Závěr

Kreativita je zpravidla vždy vítána. Myslím, že si zde každý bude moci vybrat jeden efekt z 12 a v budoucnu ho použít ve svých vlastních projektech.

• změna velikosti nemá vliv na kvalitu,
• perfektní zobrazení na všech zařízeních, včetně těch s Retina displeji,
• použití téměř všech stylů použitelných na text, jako je pozadí, barva, stíny atd.,
• snadnost implementace;

1. PÍSMO SOCIÁLNÍ IKONY RONDO

2. Fontello - generátor ikonových písem

3. Písmo Mono Social Icons

4. Pixeden – balíček sociálních ikon

Představujeme vám TOP 30 nejlepších sad ikon sociálních sítí pro váš web, blog, internetový obchod nebo jiný webový zdroj.

Protože každý web má svůj vlastní styl, zaměření a cílová skupina, může být výběr vhodných ikon poměrně obtížný.

Tento výběr představuje nejlepší sady ikon pro oba univerzální použití a takové, které dokonale zapadnou i do toho nejunikátnějšího designu webových stránek.

Ikony jsou obvykle umístěny v zápatí webové stránky nebo blogu.

Doporučujeme až 5–6 ikon.

Stará láhev korunky sada ikon

Originální stylizované ikony v podobě uzávěrů lahví budou skvělým doplňkem na webové stránky kavárny, baru nebo tematického internetového obchodu.

Vysoce kvalitní kresba prvků a jasný design určitě přilákají návštěvníky webových zdrojů, aby se seznámili s vašimi stránkami na sociálních sítích.

Sada se skládá z 20 ikon, z nichž každá je navržena jako samostatný obrázek ve formátu PNG.

Vintage razítka sociálních médií

Vintage ikony sociálních médií dokonale zapadnou do tématu cestovatelského webu nebo blogu o světových zajímavostech. Tyto ikony často používají profesionální fotografové k přidávání odkazů na sociální sítě do svých portfolií.

Formáty souborů – PNG, PSD. Rozlišení každé ikony je 256x256px.

Dřevěné sociální

Sada se skládá z deseti ikon sociálních sítí.

K dispozici je také obrázek pro RSS zdroj a odběr e-mailu.

Každý z grafických dokumentů v archivu má svůj vlastní zdrojový soubor, pomocí kterého můžete výkres nezávisle upravovat nebo jej uložit v jiném formátu.

Výchozí formát je PNG.

SocialMate

Sada je univerzální a vhodná pro použití na jakémkoli webu nebo webovém projektu.

Pro osobní úpravy souborů je každý prvek doplněn o původní soubor PSD.

Rozlišení obrázků je 128x128px, 64x64px a 32x32p.

Vektorové 3D sociální ikony

3D ikony od Vectoru představují kompletní sadu prvků pro patičku vašeho webu, která je distribuována zcela zdarma.

Jasný a nezapomenutelný design přiláká nové odběratele na vaše stránky na sociálních sítích.

Formát souboru je PNG (plus originální dokument PSD). Rozlišení - 256 x 256 pixelů.

Sociální skici

Social Sketches je bezplatná sada originálních ikon nálepek pro klikací odkazy na sociálních sítích.

Jedinečný typ obrázků přitáhne pozornost uživatelů zdrojů.

Obsah sady:

• 16 ikon;
• 6 různá rozlišení pro každý prvek (32px, 48px a 64px, 128px, 256px a 512px);
• Standardní formát PNG.

Socializovat

Socialize je sada 12 úhledných kulatých ikon pro sociální sítě. Vezměte prosím na vědomí, že každý web nabízí několik obrázků najednou.

Můžete si tak vybrat nejvhodnější prvek, který bude odpovídat stylu vašeho webu nebo blogu.

Obrázky vektorového typu se ukládají ve formátu SVG.

Somacro

Somacro je 45 vysoce kvalitních ikon pro všechna populární sociální média, včetně, Facebook , Cvrlikání, Steam, stejně jako platba Paypal systémy, Webmoney.

Velké množství ikon vám umožní navrhnout ve stejném stylu zápatí velkého internetového obchodu nebo osobního webu.

Rozlišení souboru je 500 × 500 pixelů. Každý obrázek je k dispozici s rámečkem nebo bez něj, což má za následek celkem 90 různých souborů.

Žárovka ikony sociálních médií

Ikony žárovek jsou oblíbenou sadou ikon pro zdroje s vědeckou tématikou.

Zajímavý design každého obrázku dokonale zapadne do bloku o vědě, zajímavosti, technika.

Obr.9

Transparentní ikony sociálních médií

Ikona se hodí ke každé webové stránce bez ohledu na její design a téma.

Vhodný set pro milovníky minimalismu.

Jediná věc je, že obrázky mohou splývat s příliš světlým pozadím.

Dostupné velikosti: 48, 56, 72, 96, 128, 256 a 512 px. Počet obrázků v archivu je 40.

Kruhové ploché ikony Retina připraveno

Každý obrázek má jasné barevné schéma a odráží styl každé ze sociálních sítí.

Sada obsahuje 65 unikátních obrázků pro webové stránky, oblíbené programy, hřiště a další pomůcky.

Samolepky ikon sociálních médií

Jasné ikony pro webové stránky od Vectezy budou vynikajícím nástrojem pro přilákání uživatelů sociální stránky tvoje společnost.

Obrázky lze používat nezávisle na obecném designu webových stránek.

Budou vypadat stejně dobře na tmavém i světlém pozadí.

Stínované ikony sociálních médií

Balíček Shaded Social Media Icons obsahuje 40 obrázků se stínovým efektem.

Světlý design je ideální pro použití na místech se světlým designem.

Archiv lze stáhnout ve dvou variantách.

První má bezplatnou licenci, druhý obsahuje zdrojový kód a prodává se za 3 dolary.

Dostupná rozlišení jsou 48, 56, 72, 96, 128 a 256 px. Formát - PNG.

Jednoduché linie ikony

Všechny obrázky jsou k dispozici pouze v bílé barvě, proto by se sada měla používat na zápatí s tmavým pozadím.

K dispozici jsou nejen ikony oblíbených stránek, ale také obrázky pro platební systémy, Wi-Fi a mnoho dalších.

Iconmonstr

Iconmonstr je celý zdroj, kde vývojář pravidelně publikuje své unikátní ikony pro webové stránky.

Mezi více než 500 obrázky najdete černobílé ikony pro jakýkoli web nebo nástroj.

Všechny soubory lze stáhnout zdarma.

Na stránce zdrojů si také můžete vybrat preferované rozlišení a formát souboru.

Sada ikon sociálních médií dlouhý stín

Sociální Media Long Shadow Icon Set obsahuje 35 souborů pro různé sociální sítě. Každá ikona má čtvercový tvar, je vyrobena v barvách určeného zdroje a je ideální pro weby jakéhokoli typu.

Archiv obsahuje pouze soubory ve formátu PNG.

Material Design sociální ikony

8 vektorových ikon ve formátu SVF vám umožní nejen přidat atraktivní klikací odkazy na váš web, ale také provést vlastní úpravy souboru. Můžete změnit rozlišení, přidat stín, změnit barvu, upravit průhlednost a mnoho dalšího.

Obrázky jsou dostupné pro Instagram, YouTube Facebook, Pinterest, Linkedin, Skype, Google+.

Sociální ikony

Picons Social je profesionální sada ikon sociálních médií s více než 60 různými obrázky.

Všechny obrázky jsou vyrobeny v černobílém formátu a mají příjemný a „odlehčený“ design.

Vynikající pro univerzální použití na místech s lehkým designem.

Archiv má pro každou ikonu k dispozici několik formátů:

• .PSD;
• .EPS;
• .PDF;
• .PNG;
• .EMF.

Kruh a kulaté ikony sociálních médií

16 ikon sociálních sítí bude skvělým doplňkem vašeho webu.

Světlý design vám umožní krásně zvýraznit pole odkazů na stránky v jiných zdrojích.

Velikost každého obrázku je 58 a 40 pixelů.

Také existují zdroje pro úpravy ve Photoshopu.

Ploché minimalistické ikony sociálních médií

Archiv obsahuje 85 minimalistických, nehlasitých ikon pro sociální sítě.

Každý z obrázků má 4 různé styly, která vám umožní vybrat ten nejlepší design, který se hodí do designu webové stránky.

Ikony jsou ve dvou formátech: PNG a SVG.

K dispozici barevné a černobílé provedení.

Hexadecimální ikony sociálních médií

Tato sada ikon je vyrobena ve formě šestiúhelníků.

Vývojář přenesl barevné schéma na každou sociální síť.

Na webu vývojáře si můžete stáhnout každou ikonu zvlášť, po výběru jejího formátu a rozlišení.

K dispozici je celkem 32 jedinečných designů.

Plochá sociální média ikona vektor Pack

Existují ikony pro hostování videa, RSS, platební systémy a sekce webu bloggera.

Sada také obsahuje ikony pro HTML5 a CSS.

Formát souboru - Png. Rozlišení - 58 pixelů.

Pokročilé ploché ikony sociálních médií

Každá ikona má stínový efekt a je vyrobena v jasných barvách.

Dostupné velikosti jsou 72, 96, 128, 256 a 512 px.

Každý prvek je k dispozici v designu pro světlé a tmavé tóny webu.

Ikony sociálních médií ve stylu iOS

Stáhněte si archiv z webu vývojáře a získejte zdrojový kód pro osobní úpravy obsahu.

Dostupné formáty jsou .EPS a .AI.

Grunge ploché sociální ikony

Nádherné ikony ve stylu Grunge jsou Nejlepší volba pro webové stránky tanečního studia, tělocvičny, hudebního portálu, nahrávací společnosti a dalších organizací a zdrojů, jejichž styl je vytvořen v městském směru.

Každý soubor je k dispozici ve formátu PSD.

Geometrické ikony sociálních médií

Bezplatné ikony pro sociální média, které jsou vyrobeny v geometrickém stylu, budou dobrým doplňkem do kosmetického obchodu, parfumerie nebo blogu.

Standardní barevné schéma ikon je provedeno ve světlých polotónech.

Můžete si také vybrat jasnější nebo tmavší styling.

Všechny jsou k dispozici v jednom archivu.

Rogie ikony sociálních médií

Sada ikon od známého webového ilustrátora zvýrazní individualitu webového zdroje a přiláká ještě více odběratelů na vaše sociální média.

Všechny obrázky jsou vyrobeny samostatně v barevném a černobílém provedení.

Dostupné obrázky hřiště, cloudové úložiště a sociální sítě.

Ikony Adobe Muse

Vektorové ikony od Adobe jsou jednou z nejlepších možností pro návrh minimalistického zápatí.

Sada obsahuje 60 obrázků oblíbených webů, mobilní operační systémy, cloudová úložiště, platební systémy a další oblíbené webové zdroje.

120 ručně kreslených ikon sociálních médií

Stažením této sady získáte 120 unikátních ručně kreslených ikon sociálních sítí.

Každý obrázek má zdařilý design a jasnou kresbu čar.

Bude dobře zapadat do designu webových stránek s tematikou DIY nebo jakéhokoli jiného zdroje věnovaného kreativitě.

Dostupné formáty jsou PNG a SVG.