CSS спрайтове на примера за инсталиране на бутони за връзки в блога „абонамент за актуализации. Хубави интерфейсни икони, обвити в един спрайт. Свързването на тези икони е много лесно

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

html структура

Контейнерите div се поставят в общ контейнер div социални бутонис преход.

CSS структура за използване на спрайтове

Посочете фонова позиция: 00px;.Забележете, че зададох непрозрачност на 0,6, малко прозрачност. Непрозрачност при задържане на курсора на мишката: 1;, всичко се случва за (0,5 s) преход: непрозрачност 0,5 s;.Позицията на изображението се промени при задържане фонова позиция: 0-51px;.

Използвайки тази техника, човек може оптимизиране на изображения(по-малко обаждания към сървъра).

P.S. Ако имате въпроси пишете!

Ние продължаваме да социализираме нашите сайтове. Често е удобно за читателите да получават актуализации на блогове директно в любимата си социална мрежа. Нека им дадем тази възможност. За да направите това, трябва да се регистрирате в същите тези социални мрежи. Можете да създадете профил на администрацията или автора на сайта, или можете да създадете публична страница за фирма или проект. В бъдеще ще трябва редовно да публикувате новини и актуализации на сайта в емисиите с новини на вашите профили, така че вашите абонати да могат да се запознаят с тях. Това, между другото, е удобно да се направи с помощта на тези, които инсталирахме по-рано. Връзките към социалните профили ще бъдат издадени с помощта на техниката на CSS спрайт или CSS спрайтове.

Какво представляват CSS спрайтовете и спрайтовете като цяло?

Спрайтове- набор от малки снимки, които са комбинирани в една. Това се прави, за да не се изтеглят 10-20 малки леки снимки от сървъра на компютъра на потребителя, а да се изпращат в един поток, комбинирайки ги в един файл. Спрайтовете в уеб дизайна идват от индустрията на игрите, където се използват за създаване на анимирани 2D графики, като стрелба по чудовища и т.н.

В дизайна на уебсайтове се използва и техника, при която различни икони се комбинират в един файл, например по следния начин:

Както можете да видите в този пример, не само икони на социални медии, но и други елементи на дизайна, като стрелки, бутони „харесвам“ и т.н., бяха събрани в един файл. Но комбинирането на абсолютно всички графики, които се използват на сайта, в един спрайт не е напълно правилно. По-добре е да разделите елементите на групи и да зареждате само тези, които са необходими на определен тип страница.

В тази снимка се опитах да покажа схематично принципа на css спрайтовете. В случай, че блокът е по-голям от фоновото изображение, той се поставя в горния ляв ъгъл по подразбиране, ако в css стиловете е зададено без повторение. Но можем да променим позицията на фоновото изображение спрямо горния ляв ъгъл на блока. Това е особено полезно, ако блокът, например, е равен по размер на отделна икона. Имаме седем икони 32x32 всяка. Те са подредени хоризонтално, така че не е необходимо да променяме позицията на фона вертикално. Задайте позицията на фоновото изображение на -32 px, получаваме иконата в блока, -64 px - иконата на Facebook и т.н.

Как да направите бутони-линкове към профили в социалните мрежи?

След като се регистрирах в съответните общности и в получих връзки към профили, адреса на моя RSS канал и връзка към формата за абонамент за получаване на актуализации по пощата. След това ги комбинирах в следния код и го поставих в текстов уиджет в административния панел на WordPress:

Котвата на връзката в този код използва етикета : . Именно той е самият блок, в който се показва желаната икона. Изместването на фоновото изображение се задава във файла със стилове style.cssчрез собственост фонова позиция:

/* Актуализиране на бутони за абонамент*/ .spmenu ( padding: 0px; margin: 0px; color: #4682B4; text-align: left; font-size: 100%; ) .spmenu a, .spmenu a:hover ( cursor: pointer ; цвят: #1E90FF; украса на текста: няма; размер на шрифта: 100%; ) .spmenu span ( дисплей: вграден блок; ширина: 32px; височина: 32px; фон: url("images/icons.png" ) no-repeat; ) .spmenu span.sprite_gplus (background-position: 0px 0px;) .spmenu span.sprite_twitter (background-position: -32px 0px;) .spmenu span.sprite_fbook (background-position: -64px 0px;) . spmenu span.sprite_rss(background-position: -96px 0px;) .spmenu span.sprite_email(background-position: -128px 0px;)

Така че за всеки елемент вътре в класа" spmenu» е зададено фоново изображение икони.png, което е набор от икони. Забележи това е вграден вграден елемент според HTML спецификацията, така че за да му дадем строги размери (ширина и височина), трябва да променим начина, по който се показва, за да блокира CSS свойства(ред: дисплей: inline-block). Размерите на блоковете 32x32 просто съответстват на формата на нашите икони.

Често вместо използвайте етикети , , и т.н., мисля, че този подход е грешен. Защо да променяте стиловете на стандартните тагове, ако има универсален . Етикет обикновено създава допълнителна заявка към сървъра и ние просто използваме спрайтове, опитвайки се да намалим броя на тези заявки.

Къде мога да взема иконите за спрайта?

Нарисувайте себе си.

Търсете в търсачката сред снимките.

В мрежата има специални колекции от икони, които често се раздават безплатно.

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

За да създадете автоматично спрайт файл с икони на социални медии, можете да използвате услугата. Изберете иконите в правилния ред, запазете архива със скрипта, разопаковайте и вижте снимката икони.png- готов спрайт файл.

Спрайтовете, в допълнение към показването на икони, са полезни при разработването на анимирано меню, когато задържите курсора на мишката над неговия елемент, той или затъмнява, или светва. След това два комплекта бутони се съхраняват във файла на спрайта и при събитието „mouseover“ те динамично променят позицията на фоновото изображение с помощта на JS.

Менюто с бутони-връзки към каналите за получаване на актуализации, което беше обещано в началото на бележката, е направено и това завършва статията. Абонирайте се за актуализации, най-интересното тепърва започва.

29 октомври 2019 г Записът е актуализиран

Юрий Немец

Ефекти на бутоните социални мрежиза сайт

Мислите ли, че е възможно да комбинирате бутони и изображения на социални медии? За да изглеждат и двете много красиви и креативни. Да, можете да го направите много интересен начин. И не само един, а няколко. За да бъдем по-точни, в тази статия ще намерите 12 начина да направите страхотни ефекти за бутоните на социалните медии, когато задържите курсора на мишката върху изображение. В някои случаи е необходимо не само да задържите, но и да щракнете с мишката, което също добавя интерактивност. Необичаен начин да направите сайта си изпъкващ е като използвате точно такива ефекти при задържане на изображението.

Вижте и изтеглете всички 12 примера от връзката по-долу:

Изтегли

Между другото, относно ефектите на задържане, има още няколко статии на сайта по тази тема:

Хареса ефекта - използвайте го!

Например първият ефект ми хареса. Задръжте курсора на мишката върху изображението по-долу, за да видите ефекта.

(задръжте курсора на мишката над изображението)

Доста атрактивен начин за подчертаване на най-важните изображения както в сайта, така и в сайта за продажба на една страница. Но, както вече писах, има много повече ефекти (12!).

Стъпка 1 - HTML

Иконите, които виждате на бутоните на социалните медии, използват FA (Font Awesome). Тези икони са свързани в един ред между блоковете :

1 <връзка 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-fallback"> <div class="споделяне на слой"> <a href = "#" class = "share-button share-via-vk" > <i class = "fa fa vk" > Във връзка с</a> <href = "#" клас = "бутон за споделяне споделяне чрез facebook"> <i class = "fa facebook" > Facebook</a> <href = "#" клас = "бутон за споделяне споделяне чрез 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 (ширина: 500px; височина: 300px; позиция: относителна; margin: 0 auto; -webkit-perspective: 800px; перспектива: 800px;) .image-effect-fall-back .image-layer (позиция: абсолютна; горе: 0; ляво: 0; височина: 300 пиксела; -webkit-transition: 0,6 s; преход: 0,6 s; z-индекс: 1;) .image-effect-fall-back: hover .image- слой( -webkit-трансформация: rotateX(70deg); трансформация: rotateX(70deg); препълване: видим;) .image-effect-fall-back .image-layer img (височина: 100%;) .image-effect-fall -back .image-layer :before ( content : "" ; position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background : rgba(0 , 0 , 0 , 0.5 ) ; box -сянка: 0 0 100px 50px rgba(0, 0, 0, 0,5); непрозрачност: 0; -webkit-transition: всички 0,5s; преход: всички 0,5s; -webkit-transform: rotateX(114deg) translateZ(-26px ) translateY(110px ) scale(0.75 ) ; трансформация: rotateX(114deg) translateZ(-26px) translateY(110px) scale(0.75) ; -webkit-transform-origin: отдолу; -ms-transform-origin: дъно; 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%; височина: 100px; непрозрачност: 0; z-индекс: 10; -webkit-transition: 0,6 s; преход: 0,6 s; -webkit-transform: rotateX(70deg) ; transform: rotateX(70deg) ; ) .image -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 (цвят на фона: #4C75A3;) .share-via-facebook (цвят на фона: #3b5998;) .share-via-twitter (цвят на фона: #00aced;)
Веднага предупреждавам: в част от примерите се използва jQuery, защото там за пълния ефект трябва да кликнете върху изображението. Просто трябва да вземете целия JS код, който се използва на страницата с примера, който харесвате.

внимание!След като поставите CSS кода във вашата таблица със стилове, бутоните може да не се показват точно както е показано в примера. Това може да се дължи на факта, че вашият стилов файл има различни стилове за елементите и класовете, които се използват в демонстрацията.

Заключение

По правило креативността винаги е добре дошла. Мисля, че тук всеки ще може да избере един ефект от 12 за себе си и да го използва в собствените си проекти в бъдеще.

преоразмеряването не влияе на качеството,
перфектно показван на всички устройства, включително тези с Retina дисплеи,
прилагане на почти всеки стил, приложим към текст, като фон, цвят, сенки и т.н.,
лекота на изпълнение;

Тези предимства направиха иконите на шрифтове популярни сред дизайнери, разработчици и се използват от CSS/рамки като .
На вашето внимание шрифтове с икони на социални мрежи.
1. ШРИФТ НА СОЦИАЛНАТА ИКОНА RONDO
Отлични икони на шрифтове на някои от най-популярните социални мрежи и не само, но за съжаление няма икона за нашата любима.
2. Fontello - генератор на шрифтове за икони
Генератор на икони, с огромен набор от готови икони. Едно от предимствата е възможността да изберете само необходимите икони и да генерирате шрифт от тях, което ще повлияе благоприятно на оптимизацията на страницата и скоростта на зареждане на такъв шрифт. Сред предимствата може да се отбележи наличието на икони на такива социални мрежи като Vkontakte и Odnoklassniki.
3. Шрифт за моно социални икони
Идеално решение за бързо интегриране на икони на шрифтове в проект, вече има код за вграждане за CSS, SCSS и HTML пример. Единственият недостатък е липсата на популярни руски социални мрежи.
4. Pixeden - Пакет социални икони
Добри икони с мощна демонстрационна страница, можете да видите красотата на използването на икони на шрифтове и стилизирането им с CSS

Представяме на вашето внимание ТОП 30 най-добри комплекта икони за социални медии за вашия уебсайт, блог, онлайн магазин или друг уеб ресурс.
Тъй като всеки сайт има свой собствен стил, фокус и целева аудитория, намирането на правилните икони може да бъде доста трудно.
Тази колекция съдържа най-добрите комплекти икони и за двете универсална употреба, и такива, които се вписват идеално дори и в най-уникалния дизайн на уебсайт.
Иконите обикновено се поставят в долния колонтитул на уебсайт или блог.
Насърчава се използването на до 5-6 икони.
Комплект икони за корона от стара бутилка
Оригинални стилизирани икони под формата на капачки за бутилки ще бъдат чудесно допълнение към кафене, бар или тематичен онлайн магазин.
Висококачественото изчертаване на елементи и яркият дизайн със сигурност ще привлекат посетителите на уеб ресурса да се запознаят с вашите страници в социалните мрежи.
Комплектът се състои от 20 икони, всяка от които е проектирана като отделна картинка в PNG формат.
Старинни марки за социални медии
Винтидж иконите на социалните медии ще се впишат идеално в темата на туристически сайт или блог за световни атракции. Тези икони често се използват от професионални фотографи, за да добавят връзки към социални медии към своите портфолиа.
Файлови формати - PNG, PSD. Разделителната способност на всяка икона е 256x256px.
Дървени социални
Комплектът се състои от десет икони за социални медии.
Също така има снимка за RSS-емисия и абонамент за електронна поща.
Всеки от графичните документи от архива има собствен ресурсен файл, с който можете сами да редактирате картината или да я запишете в друг формат.
Форматът по подразбиране е PNG.
SocialMate
Комплектът е универсален и подходящ за използване във всеки сайт или уеб проект.
За лично редактиране на файлове всеки елемент е прикачен оригинален файл PSD.
Разделителната способност на изображението е 128x128px, 64x64px и 32x32p.
Векторни 3D социални икони
3D Икони от Vector са пълен набор от елементи за футъра на вашия сайт, който се разпространява напълно безплатно.
Яркият и запомнящ се дизайн ще привлече нови абонати към вашите страници в социалните мрежи.
Файловият формат е PNG (плюс оригиналния PSD документ). Резолюция - 256x256px.
Социални скици
Social Sketches е безплатен набор от оригинални икони на стикери за връзки към социални медии, върху които може да се кликне.
Уникалният вид на изображенията ще привлече вниманието на потребителите на ресурса.
Задайте съдържание:
16 икони;
6 различни разрешенияза всеки елемент (32px, 48px, както и 64px, 128px, 256px и 512px);
Стандартен PNG формат.

социализират се
Socialize е набор от 12 спретнати кръгли икони за социални медии. Имайте предвид, че за всеки сайт се предлагат няколко изображения наведнъж.
Така можете да изберете най-подходящия елемент за стила на вашия сайт или блог.
Векторните изображения се записват във формат SVG.
Сомакро
Somacro е 45 качествени икони за всички популярни социални медии, включително, Facebook , Twitter, Steam и плащане Paypal системи, webmoney.
Голям брой икони ще ви позволят да проектирате долните колонтитули на голям онлайн магазин или личен сайт в същия стил.
Разделителната способност на файла е 500 × 500 пиксела. Всяка снимка се предлага в рамка или без рамка, общо 90 различни файла.
Крушка Икони за социални медии
Bulb Icons е популярен пакет с икони за ресурси с научна тематика.
Интересният дизайн на всяка картина ще се впише перфектно в блока за науката, интересни факти, технология.
Фиг.9
Прозрачни икони за социални медии
Иконата върви добре с всеки сайт, независимо от неговия дизайн и тема.
Подходящ комплект за любителите на минимализма.
Единственото нещо е, че снимките могат да се слеят с твърде светъл фон.
Налични размери: 48, 56, 72, 96, 128, 256 и 512 px. Броят на изображенията в архива е 40.
Кръгови плоски икони Готови за Retina
Всяка снимка има жива цветова схема и отразява стила на всяка от социалните мрежи.
Комплектът съдържа 65 уникални изображения за уебсайтове, популярни програми, детски площадки и други инструменти.
Стикери за икони на социални медии
Ярките икони за уебсайтове от Vectezy ще бъдат отличен инструмент за привличане на потребители социални страницитвоята компания.
Картините могат да се използват независимо от общия дизайн на уеб страниците.
Те ще изглеждат еднакво добре както на тъмен, така и на светъл фон.
Засенчени икони за социални медии
Комплектът Shaded Social Media Icons съдържа 40 изображения с ефект на сянка.
Яркият дизайн е идеален за използване на сайтове с лек дизайн.
Архивът може да бъде изтеглен в два варианта.
Първият е с безплатен лиценз, вторият съдържа изходния код и се продава за $3.
Наличните разделителни способности са 48, 56, 72, 96, 128 и 256 px. Формат - PNG.
Прости линейни икони
Всички изображения се предлагат само в бяло, така че комплектът трябва да се използва на колонтитули с тъмен фон.
Налични са не само икони на популярни сайтове, но и снимки за платежни системи, Wi-Fi и много други.
Iconmonstr
Iconmonstr е цял ресурс, където разработчикът редовно публикува уникалните си икони на сайта.
Сред повече от 500 снимки ще намерите черно-бели икони за всеки сайт или инструмент.
Всички файлове могат да бъдат изтеглени безплатно.
Освен това на страницата с ресурси можете да изберете предпочитаната от вас разделителна способност и файлов формат.
Набор от икони с дълга сянка за социални медии
Наборът икони за дълга сянка на социалните медии съдържа 35 файла за различни социални мрежи. Всяка икона има формата на квадрат, направена е в цветовете на определения ресурс и е идеална за сайтове с всякаква ориентация.
Архивът съдържа само PNG файлове.
Социални икони за материален дизайн
8 векторни икони във формат SVF ще ви позволят не само да добавите атрактивни връзки към сайта си, но и да направите свои собствени корекции във файла. Можете да промените разделителната способност, да добавите сянка, да промените цвета, да регулирате прозрачността и др.
Изображенията са налични за Instagram, YouTube, Facebook, Pinterest, Linkedin, Skype, Google+.
Picons Social
Picons Social е професионален пакет икони за социални медии с над 60 различни изображения.
Всички снимки са направени в черно-бял формат и имат приятен и „лек“ дизайн.
Страхотен за универсална употреба в сайтове с лек дизайн.
Няколко формата за всяка икона са налични в архива наведнъж:
.PSD;
.EPS;
.PDF;
.PNG;
.ЕМП.

Кръгли и кръгли икони за социални медии
16 икони за социални медии ще бъдат чудесно допълнение към вашия уебсайт.
Яркият дизайн ще подчертае красиво областта на връзките към страници в други ресурси.
Размерът на всяко изображение е 58px и 40px.
Освен това има източници за редактиране във Photoshop.
Плоски минималистични икони за социални медии
Архивът съдържа 85 минималистични необемни икони за социални мрежи.
Всяка снимка има 4 различни стилове, което ви позволява да изберете най-добрия дизайн, който ще се впише в дизайна на уеб страницата.
Иконите имат два формата едновременно - PNG и SVG.
Предлагат се цветни и черно-бели версии.
Шестнадесетични икони за социални медии
Този набор от икони е направен под формата на шестоъгълници.
Разработчикът предаде цветовата схема на всяка социална мрежа.
От уебсайта на разработчика можете да изтеглите всяка икона поотделно, след като изберете нейния формат и разделителна способност.
Налични са общо 32 уникални дизайна.
Плосък векторен пакет с икона за социални медии
Има икони за видео хостинг, RSS, платежни системи, секции на сайта на блогър.
Също така комплектът съдържа икони за HTML5, CSS.
Форматът на файла е Png. Резолюция - 58 пиксела.
Разширени плоски икони за социални медии
Всяка икона има ефект на сянка и е направена в ярки цветове.
Наличните размери са 72, 96, 128, 256 и 512 px.
Всеки елемент е наличен в дизайна за светли и тъмни цветове на сайта.
Икони за социални медии в стил iOS
Изтеглете архива от сайта на разработчика и вземете изходния код за редактиране на лично съдържание.
Наличните формати са .EPS и .AI.
Гръндж плоски социални икони
Прекрасни икони в гръндж стил са най-добрият изборза място на танцово студио, фитнес зала, музикален портал, звукозаписна компания, както и други организации и ресурси, чийто стил е направен в градска посока.
Всеки файл е наличен в PSD формат.
Геометрични икони за социални медии
Безплатни икони за социални медии, които са направени в геометричен стил, ще бъдат добро допълнение към магазин за козметика, парфюмерия, блог.
Стандартната цветова схема на иконите е направена в светли полутонове.
Освен това можете да изберете по-ярки или по-тъмни опции за стилизиране.
Всички те са налични в един архив.
Икони за социални медии Rogie
Набор от икони от известен уеб илюстратор ще подчертае индивидуалността на уеб ресурс и ще привлече още повече абонати към вашите социални медии.
Всички снимки се изработват поотделно цветно и черно-бели.
Налични изображения на детски площадки, съхранение в облакаи социалните мрежи.
Икони на Adobe Muse
Векторните икони от Adobe са една от най-добрите опции за минималистичен дизайн на долния колонтитул.
Комплектът съдържа 60 снимки от популярни сайтове, мобилни операционна система, съхранение в облак, платежни системи и други популярни уеб ресурси.
120 ръчно рисувани икони за социални медии
Изтеглете този комплект и ще получите 120 уникални ръчно рисувани икони за социални медии.
Всяко изображение е с успешен дизайн и ясен чертеж на линиите.
Той ще се впише добре в дизайна на уебсайт на тема „Направи си сам“ или всеки друг ресурс, посветен на творчеството.
Наличните формати са PNG и SVG.