Kde môžem získať ikony pre sprite?

1. Nakreslite seba.
2. Hľadajte vo vyhľadávači medzi obrázkami.
3. Na webe sú špeciálne zbierky ikon, ktoré sa často dávajú zadarmo.
4. Mnohé sociálne siete a služby zobrazujú na svojich webových stránkach oficiálne logá a ikony, ktoré možno použiť v ich aplikáciách.
5. Ak chcete automaticky vytvoriť súbor sprite s ikonami sociálnych médií, môžete použiť službu. Vyberte ikony v správnom poradí, uložte archív so skriptom, rozbaľte a pozrite si obrázok icons.png- hotový sprite súbor.

Škriatkovia sa okrem zobrazovania ikoniek hodia pri vytváraní animovaného menu, pri prejdení nad jeho položkou sa buď stlmí, alebo rozsvieti. Potom sa do súboru sprite uložia dve sady tlačidiel a pri udalosti „mouseover“ dynamicky zmenia polohu obrázka na pozadí pomocou JS.

Ponuka tlačidiel-odkazov na kanály na príjem aktualizácií, ktorá bola sľúbená na začiatku poznámky, bola hotová a týmto sa článok končí. Prihláste sa na odber aktualizácií, to najzaujímavejšie práve začína.

29. októbra 2019 Záznam bol aktualizovaný

Jurij Nemets

Efekty tlačidiel sociálne siete pre stránku

Myslíte si, že je možné kombinovať tlačidlá sociálnych médií a obrázky? Aby obaja vyzerali veľmi krásne a kreatívne. Áno, môžete to urobiť veľmi zaujímavým spôsobom. A nie len jeden, ale hneď niekoľko. Presnejšie povedané, v tomto článku nájdete 12 spôsobov, ako vytvoriť skvelé efekty pre tlačidlá sociálnych médií pri umiestnení kurzora myši nad obrázok. V niektorých prípadoch je potrebné nielen vznášať sa, ale aj klikať myšou, čo tiež pridáva interaktivitu. Nezvyčajným spôsobom, ako vyniknúť, je použitie týchto efektov vznášania.

Pozrite si a stiahnite si všetkých 12 príkladov z nižšie uvedeného odkazu:

Stiahnuť ▼

Mimochodom, o efektoch vznášania je na stránke niekoľko ďalších článkov na túto tému:

Efekt sa vám páčil - použite ho!

Mne sa napríklad páčil prvý efekt. Umiestnite kurzor myši na obrázok nižšie, aby ste videli efekt.

(umiestnite kurzor myši na obrázok)

Celkom atraktívny spôsob, ako zvýrazniť najdôležitejšie obrázky na stránke aj na predajnej stránke na jednej stránke. Ale, ako som už písal, efektov je oveľa viac (12!).

Krok 1 – HTML

Ikony, ktoré vidíte na tlačidlách sociálnych médií, používajú FA (Font Awesome). Tieto ikony sú spojené v jednom riadku medzi blokmi :

Po stiahnutí všetkých zdrojov si musíte vybrať efekt, ktorý sa vám páči. Môj efekt je v súbore index.html. Tento súbor obsahuje aj všetky potrebné štýly na vytvorenie efektu vznášania.

Je tam všetka potrebná štruktúra. Zostáva nastaviť iba štýly v CSS. Preto pristúpime k 2. a zároveň poslednému kroku.

Krok 2 – CSS

Štýly sú v každom HTML súbor medzi blokmi . To znamená, že v každom súbore s rôznymi efektmi sú v tomto bloku v hornej časti dokumentu zodpovedajúce štýly.

Musíte vziať tieto štýly a vložiť ich do šablóny so štýlmi:

Hneď vás upozorním: v niektorých príkladoch je použitý jQuery, pretože tam pre úplný efekt treba kliknúť na obrázok. Stačí si vziať všetok kód JS, ktorý sa používa na stránke, s príkladom, ktorý sa vám páči.

Pozor! Po prilepení kódu CSS do šablóny so štýlmi sa tlačidlá nemusia zobrazovať presne tak, ako je uvedené v príklade. Môže to byť spôsobené tým, že váš súbor štýlov má rôzne štýly pre prvky a triedy, ktoré sa používajú v ukážke.

Záver

Kreativita je spravidla vždy vítaná. Myslím, že tu si každý bude môcť vybrať jeden efekt z 12 pre seba a v budúcnosti ho použiť vo svojich vlastných projektoch.

• zmena veľkosti neovplyvňuje kvalitu,
• dokonale zobrazené na všetkých zariadeniach vrátane zariadení s displejom Retina,
• použitie takmer akéhokoľvek štýlu použiteľného na text, ako je pozadie, farba, tiene atď.,
• jednoduchosť implementácie;

1. PÍSMO SOCIÁLNEJ IKONY RONDO

2. Fontello - generátor ikonových fontov

3. Mono sociálne ikony písma

4. Pixeden – balík sociálnych ikon

Predstavujeme vám TOP 30 najlepších sád ikon sociálnych médií pre váš web, blog, internetový obchod alebo iný webový zdroj.

Keďže každá stránka má svoj vlastný štýl, zameranie a cieľové publikum, nájdenie správnych ikon môže byť dosť ťažké.

Táto kolekcia obsahuje tie najlepšie sady ikon pre obe univerzálne použitie a také, ktoré dokonale zapadajú aj do toho najjedinečnejšieho dizajnu webových stránok.

Ikony sú zvyčajne umiestnené v päte webovej stránky alebo blogu.

Odporúča sa použiť až 5-6 ikon.

Sada ikon koruny starej fľaše

Originálne štylizované ikony v podobe uzáverov fliaš budú skvelým doplnkom do kaviarne, baru, či tematického internetového obchodu.

Kvalitná kresba prvkov a svetlý dizajn určite prilákajú návštevníkov webového zdroja, aby sa zoznámili s vašimi stránkami na sociálnych sieťach.

Sada pozostáva z 20 ikon, z ktorých každá je navrhnutá ako samostatný obrázok vo formáte PNG.

Vintage známky sociálnych médií

Vintage ikony sociálnych médií dokonale zapadnú do témy cestovateľskej stránky alebo blogu o svetových atrakciách. Tieto ikony často používajú profesionálni fotografi na pridávanie odkazov na sociálne siete do svojich portfólií.

Formáty súborov - PNG, PSD. Rozlíšenie každej ikony je 256 x 256 pixelov.

Drevené sociálne

Sada pozostáva z desiatich ikon pre sociálne siete.

Tiež je tu obrázok pre RSS kanál a odber e-mailov.

Každý z grafických dokumentov archívu má svoj vlastný zdrojový súbor, pomocou ktorého si môžete obrázok sami upraviť alebo uložiť do iného formátu.

Predvolený formát je PNG.

SocialMate

Sada je univerzálna a vhodná na použitie na akomkoľvek webe alebo webovom projekte.

Pre osobnú úpravu súborov je každý prvok pripojený pôvodný súbor PSD.

Rozlíšenie obrázka je 128x128px, 64x64px a 32x32p.

Vektorové 3D sociálne ikony

3D ikony od Vector sú kompletnou sadou prvkov pre pätu vašej stránky, ktorá je distribuovaná úplne zadarmo.

Svetlý a nezabudnuteľný dizajn pritiahne nových predplatiteľov na vaše stránky na sociálnych sieťach.

Formát súboru je PNG (plus pôvodný dokument PSD). Rozlíšenie - 256 x 256 pixelov.

Sociálne náčrty

Social Sketches je bezplatná sada originálnych ikon nálepiek pre odkazy na sociálne médiá, na ktoré možno kliknúť.

Jedinečný vzhľad obrázkov pritiahne pozornosť používateľov zdrojov.

Nastaviť obsah:

• 16 ikon;
• 6 rôzne povolenia pre každý prvok (32px, 48px, ako aj 64px, 128px, 256px a 512px);
• Štandardný formát PNG.

socializovať sa

Socialize je súbor 12 úhľadných okrúhlych ikon sociálnych médií. Upozorňujeme, že pre každú lokalitu je ponúkaných niekoľko obrázkov naraz.

Môžete si tak vybrať najvhodnejší prvok pre štýl vašej stránky alebo blogu.

Obrázky vektorového typu sú uložené vo formáte SVG.

Somacro

Somacro je 45 ikon kvality pre všetky populárne sociálne médiá vrátane , Facebook , Twitter, Steam a platba Paypal systémy, webmoney.

Veľké množstvo ikon vám umožní navrhnúť päty veľkého internetového obchodu alebo osobnej stránky v rovnakom štýle.

Rozlíšenie súboru je 500 × 500 pixelov. Každý obrázok je k dispozícii zarámovaný alebo nezarámovaný, spolu 90 rôznych súborov.

Žiarovka Ikony sociálnych médií

Ikony žiaroviek sú obľúbeným balíkom ikon pre zdroje s vedeckou tematikou.

Zaujímavý dizajn každého obrázka dokonale zapadne do bloku o vede, zaujímavosti, technológie.

Obr.9

Transparentné ikony sociálnych médií

Ikona sa hodí na akúkoľvek stránku bez ohľadu na jej dizajn a tému.

Vhodný set pre milovníkov minimalizmu.

Jediná vec je, že obrázky sa môžu zlúčiť s príliš svetlým pozadím.

Dostupné veľkosti: 48, 56, 72, 96, 128, 256 a 512 px. Počet obrázkov v archíve je 40.

Kruhové ploché ikony pripravené na sietnicu

Každý obrázok má žiarivú farebnú schému a odráža štýl každej zo sociálnych sietí.

Sada obsahuje 65 jedinečných obrázkov pre webové stránky, obľúbené programy, ihriská a ďalšie pomôcky.

Nálepky s ikonami sociálnych médií

Svetlé ikony pre webové stránky od Vectezy budú vynikajúcim nástrojom na prilákanie používateľov sociálne stránky tvoja spoločnosť.

Obrázky je možné použiť bez ohľadu na všeobecný dizajn webových stránok.

Budú vyzerať rovnako dobre na tmavom aj svetlom pozadí.

Tieňované ikony sociálnych médií

Sada Shaded Social Media Icons obsahuje 40 obrázkov s efektom tieňa.

Svetlý dizajn je ideálny na použitie na miestach s ľahkým dizajnom.

Archív je možné stiahnuť v dvoch variantoch.

Prvý má bezplatnú licenciu, druhý obsahuje zdrojový kód a predáva sa za 3 doláre.

Dostupné rozlíšenia sú 48, 56, 72, 96, 128 a 256 px. Formát - PNG.

Ikony jednoduchých čiar

Všetky obrázky sú k dispozícii iba v bielej farbe, preto by sa mala sada používať na pätách s tmavým pozadím.

K dispozícii sú nielen ikony obľúbených stránok, ale aj obrázky pre platobné systémy, Wi-Fi a mnohé ďalšie.

Iconmonstr

Iconmonstr je celý zdroj, kde vývojár pravidelne zverejňuje svoje jedinečné ikony stránok.

Medzi viac ako 500 obrázkami nájdete čiernobiele ikony pre akúkoľvek webovú stránku alebo nástroj.

Všetky súbory je možné stiahnuť zadarmo.

Na stránke zdrojov si tiež môžete vybrať preferované rozlíšenie a formát súboru.

Sada ikon sociálnych médií s dlhým tieňom

Sada ikon sociálnych médií Long Shadow obsahuje 35 súborov pre rôzne sociálne siete. Každá ikona má tvar štvorca, je vyrobená vo farbách určeného zdroja a je ideálna pre stránky akejkoľvek orientácie.

Archív obsahuje iba súbory PNG.

Sociálne ikony materiálového dizajnu

8 vektorových ikon vo formáte SVF vám umožní nielen pridať atraktívne klikateľné odkazy na vašu stránku, ale aj vykonať vlastné úpravy súboru. Môžete zmeniť rozlíšenie, pridať tieň, zmeniť farbu, upraviť priehľadnosť a ďalšie.

Obrázky sú dostupné pre Instagram, YouTube Facebook, Pinterest, Linkedin, Skype, Google+.

Picons Social

Picons Social je profesionálny balík ikon sociálnych médií s viac ako 60 rôznymi obrázkami.

Všetky obrázky sú vyhotovené v čiernobielom formáte a majú príjemný a „ľahký“ dizajn.

Skvelé pre univerzálne použitie na miestach s ľahkým dizajnom.

V archíve je naraz dostupných niekoľko formátov pre každú ikonu:

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

Kruhové a okrúhle ikony sociálnych médií

16 ikon sociálnych médií bude skvelým doplnkom vašej webovej stránky.

Svetlý dizajn krásne zvýrazní pole odkazov na stránky v iných zdrojoch.

Veľkosť každého obrázka je 58px a 40px.

Tiež existujú zdroje na úpravu vo Photoshope.

Ploché minimalistické ikony sociálnych médií

Archív obsahuje 85 minimalistických nehlasitých ikon pre sociálne siete.

Každý obrázok má 4 rôzne štýly, ktorá vám umožní vybrať si ten najlepší dizajn, ktorý bude pasovať do dizajnu webovej stránky.

Ikony majú dva formáty naraz – PNG a SVG.

Dostupné farebné a čiernobiele verzie.

Hexadecimálne ikony sociálnych médií

Táto sada ikon je vyrobená vo forme šesťuholníkov.

Vývojár odovzdal farebnú schému každej sociálnej siete.

Na stránke vývojára si môžete stiahnuť každú ikonu samostatne, po výbere jej formátu a rozlíšenia.

Celkovo je k dispozícii 32 jedinečných dizajnov.

Vektorový balík plochých ikon sociálnych médií

Existujú ikony pre videohosting, RSS, platobné systémy, sekcie stránok bloggerov.

Sada obsahuje aj ikony pre HTML5, CSS.

Formát súboru je Png. Rozlíšenie - 58 pixelov.

Pokročilé ploché ikony sociálnych médií

Každá ikona má tieňový efekt a je vyrobená v jasných farbách.

Dostupné veľkosti sú 72, 96, 128, 256 a 512 px.

Každý prvok je dostupný v dizajne pre svetlé a tmavé farby stránky.

Ikony sociálnych médií v štýle iOS

Stiahnite si archív zo stránky vývojára a získajte zdrojový kód na úpravu osobného obsahu.

Dostupné formáty sú .EPS a .AI.

Grunge ploché sociálne ikony

Nádherné ikony v štýle grunge sú najlepšia voľba pre stránky tanečného štúdia, telocvične, hudobného portálu, nahrávacej spoločnosti, ako aj iných organizácií a zdrojov, ktorých štýl je vyrobený v mestskom smere.

Každý súbor je dostupný vo formáte PSD.

Geometrické ikony sociálnych médií

Bezplatné ikony pre sociálne médiá, ktoré sú vyrobené v geometrickom štýle, budú dobrým doplnkom pre kozmetický obchod, parfumériu, blog.

Štandardná farebná schéma ikon je vyrobená vo svetlých poltónoch.

Môžete si tiež vybrať svetlejšie alebo tmavšie možnosti štýlu.

Všetky sú dostupné v jednom archíve.

Ikony sociálnych médií Rogie

Sada ikon od známeho webového ilustrátora zdôrazní individualitu webového zdroja a pritiahne ešte viac predplatiteľov na vaše sociálne médiá.

Všetky obrázky sú vyhotovené samostatne vo farbe a čiernobiele.

Dostupné obrázky ihrísk, cloud-ové úložisko a sociálne siete.

Ikony Adobe Muse

Vektorové ikony od Adobe sú jednou z najlepších možností pre minimalistický dizajn päty.

Sada obsahuje 60 obrázkov obľúbených stránok, mobil operačné systémy, cloudové úložiská, platobné systémy a ďalšie obľúbené webové zdroje.

120 ručne kreslených ikon sociálnych médií

Stiahnutím tejto sady získate 120 jedinečných ručne kreslených ikon sociálnych médií.

Každý obrázok má vydarený dizajn a jasnú kresbu čiar.

Dobre zapadne do dizajnu webovej stránky s tematikou DIY alebo akéhokoľvek iného zdroja venovaného kreativite.

Dostupné formáty sú PNG a SVG.