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

Головна / Усунення несправностей

Онлайн ресурси для створення 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; background-position: 0 0px; transition: opacity 0.5s; -moz-transition: opacity 0.5s; /* Firefox 4 */ opacity 0.5s; /* Opera */ opacity: 0.6; float: left; ) .vk:hover ( background: url("vc.png"); 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; : 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. Якщо питання пишіть!

Жовтень 29, 2019 Запис було оновлено

Юрій Німець

Ефекти кнопок соціальних мереж для сайту

Як ви думаєте, чи можна поєднати кнопки соціальних мереж та зображення? Щоб і те, і інше виглядало дуже красиво і креативно. Так, можна це зробити дуже цікавим способом. І навіть не одним, а кількома. А якщо бути точнішим, то у статті Ви знайдете 12 способів зробити класні ефекти для кнопок соціальних мереж при наведенні на зображення. У деяких випадках необхідно не просто наведення, а ще й клік миші, що також додає інтерактиву. Незвичайний спосіб виділити свій сайт, використовуючи саме такі ефекти при наведенні зображення.

Усі 12 прикладів дивіться та завантажуйте за посиланням нижче:

завантажити

До речі, щодо ефектів при наведенні, на сайті на цю тему є ще кілька статей:

Сподобався ефект – використовуйте!

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

(наведіть на зображення)

Досить привабливий спосіб виділити найважливіші зображення як на сайті так і на односторінковому сайті, що продає. Але, як я вже писав, ефектів значно більше (12!).

Крок 1 - HTML

Для іконок, які Ви бачите на кнопках соціальних мереж, використовується FA (Font Awesome). Підключаються ці іконки одним рядком між блоками :

1 <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <div class = "image-effect-fall-back" > <div class = "share-layer" > <a href = "#" class = "share-button share-via-vk" > <i class = "fa fa-vk" > Вконтакте</ a > <a href = "#" class = "share-button share-via-facebook"> <i class = "fa fa-facebook" > Facebook</ a > <a href = "#" class = "share-button share-via-twitter"> <i class = "fa fa-twitter" > Twitter</ a > </ div > <div class = "image-layer" > <img src = "images/tree.jpg" width = "500" alt = "(!LANG:California surf" > !} </ div > </ div >

Уся необхідна структура є. Залишилося встановити лише стилі в CSS. Тому переходимо до 2-го і, одночасно, останнього кроку.

Крок 2 - CSS

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

Вам необхідно взяти ці стилі та помістити їх у Ваш файл стилів:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 .image-effect-fall-back ( width : 500px ; height : 300px ; position : relative ; margin : 0 auto ; -webkit-perspective : 800px ; perspective : 800px ; ) .image-effect-l-back ( position : absolute ; top : 0 ; left : 0 ; height : 300px ; -webkit-transition : 0.6s; transition : 0.6s; z-index : 1 ; ) .image-effect-fall-back :hover .image- layer( -webkit-transform : rotateX(70deg) ; transform : rotateX(70deg) ; overflow : visible ; ) .image-effect-fall-back .image-layer img ( height : 100% ; ) .image-effect-fall -back .image-layer :before (content : "" ; position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; -shadow : 0 0 100px 50px rgba(0 , 0 , 0 , 0.5 ) ; opacity : 0 ; -webkit-transition : all 0.5s; ) translateY(110px ) scale(0.75 ); transform : rotateX(114deg) translateZ(-26px ) translateY(110px ) scale(0.75 ) ; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; ) .image-effect-fall-back :hover .image-layer :before ( opacity : 0.3 ; ) .image-effect-fall-back .share-layer( position : absolute ; bottom : 100px ; left : 0 ; width : 100% ; height : 100px ; opacity : 0 ; z-index : 10 ; -webkit-transition : 0.6s; transition : 0.6s ; -effect-fall-back :hover .share-layer ( opacity : 1 ; -webkit-transform : rotateX(0deg) translateY(-70px ) ; transform : rotateX(0deg) translateY(-70px ) ; ) /*стилі для всіх кнопок*/.share-button( display : inline-block; text-decoration : none ; color : #ffffff ; padding : 12px ; width : 90px ; border-radius : 2px ; margin : 25px 10px ; ) /*колір кнопок соціальних мереж*/.share-via-vk (background-color : #4C75A3 ; ) .share-via-facebook ( background-color : #3b5998 ; ) .share-via-twitter ( background-color : #00aced ; )

Відразу попереджаю: у деяких прикладах використовується jQuery, тому що там для повного ефекту необхідно клікнути на зображення. Вам лише потрібно взяти весь JS код, який використовується на сторінці з прикладом, що сподобався.

Увага!Після того, як Ви вставите CSS код у файл стилів, кнопки можуть відображатися не зовсім так, як на прикладі. Це може бути пов'язано з тим, що у Вашому файлі стилів задано інші стилі для елементів та класів, які використовуються в демо.

Висновок

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

Продовжуємо соціалізувати наші сайти. Читачам часто зручно отримувати оновлення блогів прямо в їх улюблену соціальну мережу. Давайте дамо їм таку можливість. Для цього потрібно зареєструватися в цих соц.мережах. Можна створити профіль адміністрації або автора сайту, а можна публічну сторінкукомпанії чи проекту. Надалі потрібно буде регулярно публікувати в стрічках новин профілів новини та оновлення сайту, щоб ваші передплатники могли з ними ознайомитися. Це, до речі, зручно робити за допомогою встановлених нами раніше. Посилання на соціальні профілі оформимо за допомогою прийому CSS sprite або спрайтів на CSS.

Що таке CSS спрайти та спрайти загалом?

Спрайти- Набір маленьких картинок, які об'єднані в одну. Це робиться для того, щоб не завантажувати 10-20 маленьких легковажних картинок із сервера на комп'ютер користувача, а віддати їх одним потоком, поєднавши в один файл. Спрайти в веб-дизайн прийшли з ігрової індустрії, там вони використовувалися для створення анімованої 2D графіки, наприклад, монстрів, що стріляють, і т.п.

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

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

На цій картинці я спробував схематично показати принцип роботи css спрайтів. Якщо блок більше фонової картинки, то вона за умовчанням поміщається в лівий верхній кут, якщо в css стилях задано no-repeat. Але ми можемо змінювати положення фонової картинки щодо лівого верхнього кутаблоку. Особливо це корисно, якщо блок, наприклад, за розміром дорівнює окремій іконці. У нас сім ікон розміром 32х32 кожна. Вони розташовані по горизонталі, відповідно по вертикалі нам положення тла змінювати не потрібно. Задаємо положення фонового малюнка -32 px отримуємо в блоці іконку, -64 px - іконку Фейсбук і т.д.

Як зробити кнопки-посилання на профілі у соціальних мережах?

Після реєстрації у відповідних спільнотах і я отримав посилання на профілі, адресу моєї RSS стрічки та посилання на форму підписки для отримання оновлень поштою. Потім я їх об'єднав у наступний код і вставив його в текстовий віджет на панелі адміністрування WordPress:

В анкорі посилань у цьому коді використовується тег : . Саме він є тим самим блоком, в якому відображається потрібна іконка. Зсув фонового зображення задається у файлі стилів style.cssчерез властивість background-position:

/* Кнопки підписки на оновлення*/ .spmenu ( padding: 0px; margin: 0px; color: #4682B4; text-align: left; font-size: 100%; ) .spmenu a,. pointer; color: #1E90FF; text-decoration: none; font-size: 100%; . ) no-repeat;) .spmenu span.sprite_gplus (background-position: 0px 0px;). .spmenu span.sprite_rss (background-position: -96px 0px;) .spmenu span.sprite_email (background-position: -128px 0px;)

Таким чином, для кожного елемента всередині класу « spmenu» задається фонове зображення icons.png, Що являє собою набір іконок. Зауважте, що є рядковим вбудованим елементів за специфікацією HTML, тому, щоб задати йому строгі розміри (ширину та висоту), ми повинні змінити спосіб його відображення на блоковий в CSS властивостях(рядок: display: inline-block;). Розміри блоку 32х32 відповідають формату наших іконок.

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

Де взяти іконки для спрайту?

  1. Намалювати самому.
  2. Пошукати у пошуковику серед картинок.
  3. У Мережі є спеціальні добірки ікон, які часто лунають безкоштовно.
  4. Багато соц.мережі та сервіси виставляють на сайтах офіційні логотипи та іконки, які можна використовувати у своїх додатках.
  5. Щоб зробити файл спрайтів іконок соц.мереж автоматично, можна скористатися сервісом . Вибираємо іконки в потрібному порядку, зберігаємо архів зі скриптом, розпаковуємо та бачимо картинку icons.png- Готовий файл спрайтів.

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

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

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

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

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

  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 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 і так далі. У коді ці значення позначені помаранчевим кольором. Посилання на спрайт теж виділено помаранчевим кольором, його ви змінюєте на шлях до свого спрайту.

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

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


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

Вибір редакції