Html іконки соціальних мереж. Милі інтерфейсні іконки, укладені в один спрайт. CSS структура для використання спрайтів

Пропонуємо до вашої уваги ТОП-30 найкращих наборів іконок соціальних мереждля вашого сайту, блогу, інтернет-магазину чи іншого веб-ресурсу.

Так як кожен сайт має свій стиль, спрямованість та цільову аудиторію, підібрати потрібні значки буває досить складно.

У цій добірці представлені найкращі набори іконок як для універсального використання, так і ті, які відмінно впишуться навіть у унікальний дизайн сайту.

Зазвичай іконки розміщуються у футері веб-сайту чи блогу.

Використовується до 5-6 значків.

Old Bottle Crowns Icon Set

Оригінальні стилізовані іконки у вигляді кришок від пляшок стануть чудовим доповненням до сайту кафе, бару, тематичного інтернет-магазину.

Якісне промальовування елементів та яскраве оформлення обов'язково приваблять відвідувачів веб-ресурсу ознайомитись і з вашими сторінками у соціальних мережах.

Набір складається з 20 значків, кожен з яких оформлений як окремий малюнок у форматі PNG.

Vintage Social Media Stamps

Вінтажні значки соціальних мереж чудово впишуться в тематику travel-сайту або блогу про світові пам'ятки. Часто такі іконки використовують професійні фотографи для додавання посилань на соціальні мережі у портфоліо.

Формати файлів – PNG, PSD. Роздільна здатність кожного значка - 256x256px.

Wooden Social

Сет складається із десяти значків для соціальних медіа.

Також, є малюнок для RSS-стрічки та підписки на розсилку електронною поштою.

Кожен із графічних документів архіву має власний файл ресурсів, з допомогою якого можна самостійно відредагувати малюнок чи перезберегти їх у інший формат.

Формат за замовчуванням – PNG.

SocialMate

Набір універсальний та підходить для використання на будь-якому сайті або у веб-проекті.

Для персонального редагування файлів до кожного елемента додається оригінальний PSD-файл.

Дозвіл картинок становить 128x128px, 64x64px та 32x32p.

Vector 3D Social Icons

3D іконки від Vector представляють повний набірелементів для футера вашого сайту, який розповсюджується абсолютно безкоштовно.

Яскравий дизайн, що запам'ятовується, приверне нових передплатників для ваших сторінок у соцмережах.

Формат файлів – PNG (плюс оригінальний документ PSD). Роздільна здатність - 256x256px.

Social Sketches

Social Sketches – це безкоштовний набір оригінальних іконок-стікерів для клікабельних посилань на соцмережі.

Унікальний вигляд зображень приверне увагу користувачів ресурсу.

Вміст набору:

• 16 піктограм;
• 6 різних дозволівдля кожного елемента (32px, 48px, а також 64px, 128px, 256px, та 512px);
• Стандартний формат PNG.

Socialize

Socialize – це набір з 12 круглих акуратних іконок для соцмереж. Зауважте, для кожного сайту пропонується одразу кілька зображень.

Таким чином, можна вибрати найбільш підходящий елемент під стиль вашого сайту чи блогу.

Зображення векторного типу збережено у форматі SVG.

Somacro

Somacro – це 45 якісних іконок для всіх популярних соціальних медіа, включаючи , Facebook , Twitter, Steam, а також платіжні системи Paypal, Webmoney.

Велика кількість іконок дозволять оформити футери великого інтернет магазину або персонального сайту в одному стилі.

Роздільна здатність файлів - 500×500 пікселів. Кожна картинка доступна з рамкою або без рамки, що становить 90 різних файлів.

Bulb Social Media Icons

Bulb Icons – це найпопулярніший набір іконок для ресурсів з науковою тематикою.

Цікавий дизайн кожної картинки чудово впишеться в блок про науку, цікавих фактах, техніці.

мал.9

Transparent Social Media Icons

Іконка відмінно поєднується з будь-яким сайтом, незалежно від його дизайну та тематики.

Підійде набір для любителів мінімалізму.

Єдине, малюнки можуть злитися з дуже світлим тлом.

Доступні розміри: 48, 56, 72, 96, 128, 256 та 512 px. Кількість зображень у архіві – 40.

Circle Flat Icons Retina-ready

Кожна картинка має яскраву колірну гаму та відображає стиль кожної із соціальних мереж.

У наборі є 65 унікальних зображень для сайтів, популярних програм, ігрових майданчиків інших інструментів.

Social Media Icon Stickers

Яскраві іконки для сайтів від Vectezy стануть чудовим інструментом для залучення користувачів на соціальні сторінкивашої компанії.

Зображення можна використовувати незалежно від загального оформлення веб-сторінок.

Вони виглядатимуть однаково добре як на темному, так і на світлому тлі.

Shaded Social Media Icons

Набір Shaded Social Media Icons містить 40 зображень із ефектом тіні.

Яскраве оформлення чудово підійде для використання на сайтах зі світлим оформленням.

Архів можна завантажити у двох варіаціях.

Перша має вільну ліцензію, друга – містить вихідники та продається за 3 долари.

Доступні дозволи - 48, 56, 72, 96, 128 та 256 px. Формат – PNG.

Simple Line Icons

Усі зображення доступні лише у білому кольорі, тому набір потрібно використовувати на футерах із темним фоном.

Доступні не тільки значки популярних сайтів, але й картинки для платіжних систем, Wi-Fi та багато інших.

Iconmonstr

Iconmonstr – це ресурс, на якому розробник регулярно публікує свої унікальні значки для сайтів.

Серед більш ніж 500 картинок ви знайдете чорно-білі іконки для будь-якого сайту чи інструменту.

Завантажити усі файли можна безкоштовно.

Також, на сторінці ресурсу можна вибрати бажану роздільну здатність та формат файлу.

Social Media Long Shadow Icon Set

Набір Social Media Long Shadow Icon Set містить 35 файлів для різних соціальних мереж. Кожна іконка має форму квадрата, виконана в колірній гамі ресурсу, що позначається, і чудово підійде для сайтів будь-якої спрямованості.

Архів містить лише файли у форматі PNG.

Material Design Social Icons

8 векторних іконок у форматі SVF дозволять вам не лише доповнити свій сайт привабливими клікабельними посиланнями, але й внести свої корективи у файл. Ви можете змінити роздільну здатність, додати тінь, змінити колір, налаштувати прозорість та багато іншого.

Зображення доступні для сайтів Instagram, YouTube Facebook, Pinterest, Linkedin, Skype, Google+.

Picons Social

Picons Social – це професійний набір іконок соцмереж із більш ніж 60 різними зображеннями.

Виконані всі картинки у чорно-білому форматі та мають приємний та «легкий» дизайн.

Відмінно підходять для універсального використання на сайтах із світлим оформленням.

В архіві доступні кілька форматів для кожного значка:

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

Circle & Round Social Media Icons

16 іконок для соціальних медіа стануть чудовим доповненням для вашого сайту.

Яскраве оформлення дозволить чудово виділити поле посилань на сторінки в інших ресурсах.

Розмір кожного зображення – 58 та 40 пікселів.

Також, є вихідні дані для редагування у Photoshop.

Flat Minimalistic Social Media Icons

Архів містить 85 мінімалістичних необ'ємних ікон для соцмереж.

Кожна з картинок має 4 різні стилі, що дозволяє вибрати найкраще оформлення, яке впишеться в дизайн веб-сторінки.

Іконки мають відразу два формати – PNG та SVG.

Доступні кольорові та чорно-білі версії.

Hex Social Media Icons

Цей набір іконок виконаний у вигляді шестикутників.

Розробник передав колірну гаму кожної соцмережі.

На сайті розробника ви зможете завантажити кожен значок окремо, попередньо вибравши його формат та роздільну здатність.

Усього доступно 32 унікальних оформлення.

Flat Social Media Icon Vector Pack

Є іконки для відеохостингів, RSS, платіжних систем, розділів сайту блогера.

Також, у наборі є іконки для позначення HTML5, CSS.

Формат файлів – Png. Дозвіл – 58 пікселів.

Advanced Flat Social Media Icons

Кожен значок має ефект тіні та виконаний у яскравій кольоровій гамі.

Доступні розміри - 72, 96, 128, 256 та 512 px.

Кожен елемент доступний в оформленні для світлих та темних тонів сайту.

iOS Style Social Media Icons

Завантажуйте архів із сайту розробника та отримуйте вихідні дані для персонального редагування вмісту.

Доступні формати - .EPS та .AI.

Grunge Flat Social Icons

Чудові іконки у стилі Гранж – це кращий вибірдля сайту танцювальної студії, спортивної зали, музичного порталу, звукозаписної компанії, а також інших організацій та ресурсів, стиль яких виконаний в урбаністичному напрямку.

Кожен файл доступний у форматі PSD.

Geometric Social Media Icons

Безкоштовні іконки для соціальних медіа, які виконані у геометричному стилі, стануть вдалим доповненням для магазину косметики, парфумерії, блогу.

Стандартна кольорова гама іконок виконана у світлих півтонах.

Також, ви можете вибрати яскравіші або темніші варіанти стилізації.

Усі вони доступні у одному архіві.

Rogie Social Media Icons

Набір іконок від відомого веб-ілюстратора підкреслить індивідуальність веб-ресурсу та приверне ще більше передплатників у ваші соціальні медіа.

Всі картинки виконані окремо в кольоровій та чорно-білій гаммах.

Доступні зображення для ігрових майданчиків, хмарних сховищта соцмереж.

Adobe Muse Icons

Векторні іконки від Adobe – це один із найкращих варіантів для оформлення футера у стилі мінімалізму.

У наборі є 60 картинок популярних сайтів, мобільних. операційних систем, хмарних сховищ, платіжних систем та інших популярних веб-ресурсів

120 Hand Drawn Social Media Icons

Завантаживши цей набір, ви отримаєте 120 унікальних мальованих ікон для соціальних медіа.

Кожне зображення має вдалий дизайн і чітке промальовування ліній.

Добре впишеться в оформлення сайту DIY-тематики або інших присвячених творчості ресурсів.

Доступні формати – PNG та SVG.

Гарну річ я відкопав. Інтерфейсні іконки укладені в один спрайт. Якщо хтось не знає, що таке спрайт - це одна картинка, в якій є кілька зображень, що відображаються на сайті окремо за допомогою css. Не знаю, чи я пояснив, але ви на прикладі цієї збірки можете дізнатися, що таке спрайт.

Переваги спрайтів

Давно я не викладав іконки, мабуть тому, що всі іконки, які були мені потрібні вже були на моєму сайті:)) але ось знадобилися іконки в одному спрайті і я знайшов ці і ділюся ними з Вами. До речі відмінна риса і найсуттєвіший плюс спрайту, це те, що якщо завантажилася картинка спрайт один раз, то всі елементи цього спрайту більше не підвантажуватимуться і відповідно зменшуватимуть швидкість html сторінки. Зазвичай спрайти використовують для кнопок, що змінюються при наведенні. Іноді буває таке, що кнопка у звичайному стані і кнопка при наведенні – це дві різні картинки і ви могли помітити на будь-яких сайтах, коли наводиш на кнопку, зображення з'являється не відразу – воно підвантажується. Зі спрайтом такої проблеми не буде. Ще один плюс спрайтів – економія місця. Скажімо у вас є якийсь плагін, типу слайдера, і до нього йдуть кілька десятків зображень (куточки рамок, самі рамки, стрілки, буліти, ікокні соціальних мереж і так далі). Так ось, коли всі вони укладені в одну картинку, це набагато зручніше і акуратніше виглядає, якби вони валялися в папці із зображеннями окремо.

Що зображено на цих іконках

За звичаєм розповім, які зображення є серед цих іконок, щоб ви могли знайти потрібну іконки з пошуку, який у мене знаходиться в головному меню нагорі сайту: замок, робот, алмаз або дорогоцінний камінь, монітор, подарунок, мікрофон, ракета, морозиво, людина , годинник, ножиці, іконки будь-яких соціальних мереж та сервісів, гайкові ключі, цибуля, гаманець, ipad, кавун, гаманець, джойстик ігровий, калькулятор, клоун, лампочка, цибуля, відро для сміття або кошик, лист, глобус, бургер, авто, хмара , фотоапарат та багато іншого. Усього близько 100 зображень.

Ці іконки підключаються дуже просто:

1. Підключаємо css файл sprite.css таким чином: створюємо папку css у корені вашого сайту, закидаємо туди цей файл css, а на сторінці, де відображатимуться іконки між тегами вставляємо наступний код:

3. У місці, де ви хочете поставити іконку, вставляємо код:

4. Ви можете користуватися моєю демо, там є всі представлені іконки допомогою google chrome браузера елемент визначити назву іконки і вставити замість "назва іконки". Допустимо, іконка із зображенням годинника має такий код:

Ну я думаю, що розібратися, як вставляти ці ікокні зі спрайту не складно, тим більше я вже пояснив:)) Приємного користування!

Вітаю вас на моєму блогу. Сьогодні я хотів би показати вам покроково, як можна зверстати на html і css кнопки соціальних мереж. Почнемо з повного нуля та наприкінці отримаємо потрібний результат. Уперед!

Розмітка та базові стилі

В адресах посилань я просто поставив ґрати. Звичайно, при використанні в реальності у кожного посилання має бути прописана робоча адреса, за якою здійсниться перехід.

Додамо поки що такі стилі:

Share (
width: 280px;
margin: 0 auto;
padding: 10px;
background: #D3CDEE;
}
.share i (
margin-right: 15px;
color: black;
text-transform: uppercase;
}

Ми трохи оформили сам контейнер для посилань (розміри, відступи, тло) та напис.

Оформляємо іконки

Social (
display: inline-block;
width: 40px;
height: 40px;
background: #bdc3c7;
vertical-align: middle;
margin-right: 10px;
}

Властивістю display: inline-block ми зробили так, що наші посилання перетворилися на блокові елементи, але в той же час зберегли здатність стояти в ряд. Далі вказуємо розміри і відступ справа, щоб блоки не прилягали разом один до одного.

Добре, а навіщо нам vertical-align: middle? Ця властивість вирівняє текст у контейнері так, що він буде рівно центром по вертикалі. Також задамо нашим осередкам якесь тло, щоб візуально бачити їх вже на цьому етапі. Вийшла заготівля. Саме час додати іконочки.

Фінальний етап

Нам залишилося розмістити у кожен із підготовлених блоків свою іконку, яка ідентифікувала б ту чи іншу соц. мережа. Для цього я пропоную скористатися найправильнішим методом – підключити картинку-спрайт та за допомогою позиціонування фону розставити все по своїх місцях.

Коротше, нам потрібне таке зображення. В мене воно приблизно 120 на 40.

У css-стилі додаємо наступні правила:

Social-vk(
background: url(icon.png);
}
.social-fb(
background: url(icon.png) -40px 0;
}
.social-tw(
background: url(icon.png) -78px 0;
}

Отримуємо на виході повністю оформлений блок із іконками.

Ви зрозуміли, як ми це здобули? Якщо ні, то поясню. Кожне посилання блок має розмір 40 на 40. Відповідно, коли ми задаємо для нього фонове зображення 120 на 40, блок просто не може вмістити його повністю, і в результаті вміщує стільки, скільки може.

За замовчуванням у даному випадкубудуть взяті перші 40 пікселів ширини та висоти фонове зображення, але з висотою і так все гаразд – зображення повністю влазить у блоки по висоті. Відповідно, залишається лише прописати позицію фону для іконок фейсбуку та твіттера.

Записавши в фоні так: background: url(icon.png) -40px 0 , ми явно вказуємо, що для блоку social-fb фонова картинка повинна відобразитися саме з зазначеного положення - сорока пікселів за шириною вліво і по висоті без зміщення, тому що воно не потрібне. Ось так усе просто, насправді.

Що ще можна зробити?

Можливо, ви ще якось додатково хочете оформити блок соціальних мереж. Є кілька ідей. По-перше, можна додати всім іконкам заокруглення кутів.

Social(
Border-radius: 5px;
}

По-друге, можна додати рамку.

Border: 3px solid purple;

За дизайном нам у цьому випадку підійде фіолетова, мені здається. Також ви можете закруглити кути біля самого контейнера з посиланнями.

Знову ж таки, варіантів оформлення багато. Ну і, звичайно, ви легко можете змінити кольори. У цій статті я пропоную вам такий варіант оформлення, але тепер ви можете легко зробити по-своєму: жовті, зелені, червоні і будь-які інші іконки.

Підсумок

Як бачите, навіть самостійно можна легко додати на сайт соціальні кнопки, а допоможуть нам у цьому html і css. Принаймні візуально ми наші іконки можемо оформити так, як потрібно з дизайну кожного конкретного сайту.

На цьому я сьогоднішню статтю-урок закінчую. Наступного разу створимо на css ще щось

Онлайн ресурси для створення CSS спрайтівнаприклад http://spritepad.wearekiss.com/ або http://www.spritecow.com/ . Втім, ви легко знайдете ті, що підходять вам. Тут я використовуватиму вже готові CSS спрайти. Ось вони:

Структура html

У загальний контейнер div розміщені контейнери div соціальних кнопокіз переходом.

CSS структура для використання спрайтів

body( background: url("fon.png"); color: #1aa5ca; ) .box ( margin: 250px; padding: 25px; background: #; text-indent: -9999px; display: inline-block; ) .click ( background: url("click.png"); width: 200px; height: 86px; display: block; ) .vk( background: url("vc.png"); width: 51px; height: 52px; margin: 10px background-position: 0 0px, transition: opacity 0.5s; -moz-transition: opacity 0.5s; opacity 0.5s; /* Opera */ opacity: 0.6; float: left;) .vk:hover ( background: url("vc.png"); width: 51px; height: 52px; opacity: 1; ) .ya( background: url("ya.png"); width: 50px; height: 50px; margin: 10px; background-position: 0 0px; transition: opacity 0.5s; 0.5s;/* Firefox 4 */ -webkit-transition: opacity 0.5s; /* Safari and Chrome */ -o-transition: opacity 0.5s; :hover ( background: url("ya.png"); width: 50px; height: 50px; background-position: 0 -50px; opacity: 1; ) .ma( background: url("ma.png"); width: 51px; height: 52px; margin: 10px; background-position: 0 0px; transition: opacity 0.5s; -moz-transition: opacity 0.5s; / * Firefox 4 */ -webkit-transition: opacity 0.5s; /* Safari and Chrome */ -o-transition: opacity 0.5s; /* Opera */ opacity: 0.6; float: left; : url("ma.png"); width: 51px; height: 52px; background-position: 0 -51px; opacity: 1; )

Вказуємо background-position: 0 0px;Зверніть увагу, я ставлю opacity 0.6, трохи прозорості. При наведенні opacity: 1; все це відбувається за (0,5s) transition: opacity 0.5s;При наведенні змінилася позиція зображення background-position: 0 -51px;

Використовуючи цю техніку можна значно оптимізувати зображення(менше звернень до сервера).

P.S. Якщо питання пишіть!

Здрастуйте, шановні друзі. Сьогоднішня стаття буде присвячена створенню блоку соціальних кнопок без сервісів та плагінів. А ще до цього блоку увійдуть кнопки, що дозволяють відвідувачам сайту роздрукувати сторінку, надіслати посилання статті на електронну пошту та зробити заклад на вашу статтю. Такі кнопки сьогодні можна зустріти на кожному сайті. Тільки ось вони реалізовані за допомогою сервісів або плагінів. А я ж покажу, як це зробити самостійно.

Сервіси, які я використав на сайтах клієнтів та на своєму блозі – і . Ці послуги дозволяють досить легко реалізувати поставлене завдання.

У чому перевага власних соціальних кнопок перед сервісами та плагінами

1. Безперечно, незаперечним фактором є швидкість завантаження сайту. Так, наприклад, сервіс PLUSO, який я використовую на блозі, при кращому розкладі додає до завантаження 633 мілісекунди.

На цьому блоці використовуються лише необхідні зображення соціальних кнопок, об'єднані в . Усі стилі зведено до мінімуму. Плюс простий каркас html.

1. Спосіб, який я пропоную, не містить жодного зовнішнього посилання. Ні, посилання є, але всі вони будуть, як внутрішні посилання. За бажання ви завжди можете їх. І тоді їх взагалі не буде видно.

1. Дуже проста установка. Достатньо вставити html код блоку у вихідний код сторінки сайту, завантажити спрайт, додати css стилі та встановлення закінчено. Вам потрібно буде підправити шлях до файлу із зображеннями кнопок.
2. Цей пункт, швидше, і не плюс і не мінус у бік власного блоку соціальних кнопок. Фішка в тому, що у свого блоку немає лічильника натискань на кнопки. І це можна порахувати за мінус. Але, з іншого боку, є можливість поставити на кожну кнопку і ви точно знатимете скільки разів натискали на кнопки та ділилися вашими статтями у соціальних мережах ваші відвідувачі.
3. Статистика, що збирається сервісами, на вашому сайті більше не буде передаватися третім особам.

Вставка блоку соціальних кнопок у вихідний код

Ми розглянемо класичний варіант, коли кнопки розташовані після статті.

Зробити це можна або відкривши файл, який відповідає за виведення статей (single.php ) і до вихідного коду додати блок соціальних кнопок. Або можна зробити через файл функції теми (functions.php ).

Я покажу обидва варіанти, а ви для себе виберіть потрібний.

Вставлення блоку у вихідний код single.php

Попередження: Перед початком дій зробіть резервну копію файлу single.php!

Відкриваємо адміністративну панель Вордпрес. "Зовнішній вигляд" — «Редактор» — "Один запис (single.php)".

У вихідному коді шукайте місце, де закінчується виведення статті, і починаються коментарі або посторінкова навігація. Саме це місце потрібно буде вставити html код блоку соціальних кнопок.

Уважно дивіться на скріншот, орієнтуйтесь на коди, які відповідають за виведення статтіта коментарів. І вставляйте наведений нижче код.

Звичайно, у ваших шаблонах будуть деякі відмінності, але впевнений, що ви розберетеся, складного в цьому нічого немає. До того ж у вас є резервна копія, боятися нічого.

А ось і сам html код блоку соціальних кнопок:

Пояснення за кодом:це один блок ДІВ із класом.share, в якому містяться посилання на соціальні мережі. Посилання відкривається в окремому спливаючому вікні, за це відповідає ця функція onClick=window.open . Підстановка посилання на статтю здійснюється ось цим кодом. Кожне посилання має свій клас, через який надається зображення кнопки.

На цьому вставка через вихідний кодзакінчено. І далі потрібно підключити css стилі.

Вставлення блоку у вихідний код single.php через функції теми

Попередження: перед початком робіт, зробіть резервну копіюфайлу functions.php!

Для того, щоб використовувати цей варіант, потрібно відкрити файл functions.php і в кінці додати цей код:

/* Вставка соцкнопок*/ add_action("comments_template","soc_button"); function soc_button() (?> І будьте уважні після вставки коду у вас не повинно бути пробілів та інших символів. Або лише закриття php коду?>. Інакше сайт перестане працювати.

Пояснення за кодом:місце, де буде виставлено кнопки соціальних мереж, визначається через API ключ comments_template . За цим ключем визначається місце перед коментарями. Сам код соцкнопок укладено у зворотні теги відкриття та закриття php. У коді я їх позначив червоним кольором. у цьому вся хитрість вставки htmlкоду в PHP, через функції теми.

На цьому і цей спосіб закінчено, переходимо до завантаження зображень на сайт.

Завантаження зображення кнопок на сервер

Наприклад, я підготував кілька спрайтів із зображеннями соціальних кнопок. Завантажити їх можете.

Спрайт, який я використовую як приклад, важить лише 3,97 кб і містить лише необхідні кнопки. А якщо це спрайт, то і запит до бази лише одні, а не для кожної кнопки окремо.

Завантажуєте зображення або готуєте свої та завантажуєте їх на свій сайт. Думаю із цим проблем виникнути не повинно. Далі посилання на цей спрайт потрібно для оформлення кнопок через стилі css.

Підключення стилів CSS

Цей крок можна звичайно, виконати найпершим, але я волію спочатку виконати всю складну технічну роботу, а вже після приступити до приємних дрібниць із css стилями.

Отже, відкриваємо файл style.css, який відповідає за дизайн вашого сайту. І вставляємо ось ці стилі:

Share a ( display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test ..png ") no-repeat scroll 0px 0px transparent;) .share a.vkontakte ( background: url("http://test..png ") no-repeat scroll -168px 0px transparent; ) .share a.google ( background: url("http://test..png ") no-repeat scroll -252px 0px transparent; ) .share a.livejournal ( background: url("http://test..png ") no-repeat scroll -336px 0px transparent; ) .share a.twitter ( background: url("http://test..png ") no-repeat scroll -42px 0px transparent; ) .share a.mail ( background: url("http ://test..png ") no-repeat scroll -294px 0px transparent; ) .share a.odnoklassniki ( background: url("http://test..png ") no-repeat scroll -126px 0px transparent; ) .share a.pinterest ( background: url("http://test..png ") no-repeat scroll -210px 0px transparent; ) .share a.liveinternet ( background: url("http://test..png ") no-repeat scroll -378px 0px transparent; ) .share a.evernote ( background: url("http://test..png ") no-repeat scroll -420px 0px transparent; ) .share a.bookmark ( background: url("http://test..) png ") no-repeat scroll -462px 0px transparent; ) .share a.email ( background: url("http://test..png ") no-repeat scroll -504px 0px transparent; ) .share a.print ( background: url("http://test..png ") no-repeat scroll -546px 0px transparent; ) .share a.digg ( background: url("http://test..png ") no-repeat scroll -588px 0px transparent; ) .share a.spring ( background: url("http://test..png ") no-repeat scroll -630px 0px transparent; )

Пояснення за кодом:клас.share визначає загальний вигляд блоку, розміри кожної кнопки, відступи та задає єдиний фон. А далі кожне посилання має свій клас і кожному такому посиланню, через властивість background присвоюється вигляд кнопки. Кнопки виконані як css спрайт і кожна кнопка має ширину і висоту 40px, а між ними відступ 2px, що дозволяє з точністю визначити зображення для кожної кнопки. Тобто перша кнопка вказана як 0, а друга як 42 і так далі. У коді ці значення позначені помаранчевим кольором. Посилання на спрайт теж виділено оранжевим кольором, його ви змінюєте на шлях до свого спрайту.

На цьому весь процес створення свого блоку соціальних кнопок закінчено. Можна сміливо переходити до перевірки.

А ще я маю відеоурок, в якому весь процес показаний наочно, полюс показано роботу самих кнопок. Дивіться та впроваджуйте на своїх сайтах та блогах.

Ось тепер усе. З поставленим завданням упорався. Усім бажаю удачі і до зустрічі у нових статтях та відеоуроках.