Как добавить на сайт украшения

Содержание

Поговорим о том, КАК ДОБАВИТЬ ИКОНКИ НА САЙТ ИЗ FIGMA. Для тех, кому интереснее смотреть видео, прикрепляю свой видосик на YouTube:

Проверяя html-макеты верстальщиков и разработчиков наблюдаю проблемы с добавлением иконок на сайт. Они их добавляют чёрт пойми как… Могут добавить их как png изображения, а могут вообще использовать не иконки из макета, а похожие иконки, использовав, к примеру, FontAwesome. Это жестко, скажу я вам.

В связи с этим я хочу расставить все точки над i в этой теме и рассказать достаточно подробно о том, как лучше всего добавлять иконки на сайт из макета Figma.

Способов хватает, и выбор конкретного способа зависит от самого проекта и дизайнера, который делал макет. Собственно об этом всём мы и поговорим!

Способ №1 — это экспортировать иконки в svg формат и вставлять их либо как код, либо как изображение, либо как CSS свойство.

Сосбтвенно, выделяем иконку в Figma и жмём на экспорт в SVG формат, сохраняем в наш проект и вставляем на сайт:

HTML & CSS практика | Верстаем меню сайта

.icon-refresh < position: relative; display: inline-block; width: 16px; height: 16px; background-image: url(‘img/icon-refresh.svg’); background-size: 100%; background-repeat: no-repeat; background-position: center; >

Сам по себе вариант самый очевидный, простой и достаточно хороший.

Однако тут у нас выступает 2 очень неприятные проблемы.

Первая проблема — если мы используем svg код, то сам код становится достаточно большим так как сама иконка может быть очень сложной по цветам и количеству вектора внутри.

Вторая проблема — это если мы подключаем иконку таким способом, то нам проблематично менять её цвет через CSS или даже JS. Придётся экспортировать дубль иконки, но с другим цветом. А в случае с тегом object у нас вообще не будет нормально работать ссылка, если мы обернули её в тег .

Читайте также:

Чем хороши украшения из дерева

Есть также ещё небольшой минус — он связан с тем, что мы не можем задать размер иконки через свойство font-size (то есть мы не наследуем размер шрифта). Приходится всё время «играться» с шириной и высотой.

Из плюсов, пожалуй, только то, что вариант простой и экономит немного времени в небольших проектах.

Поэтому этот вариант на самом деле подходит тогда, когда иконок в макете не много (то есть максимум штук 3-5) и их цвета нигде не меняются (к примеру по наведению или теме макета).

Способ №2 — это создать 1 файл со всеми иконками. По-другому это называют текстура иконок.

Вариант также подразумевает экспорт иконок в svg или png формат, но одним файлом, где будут все иконки одного размера. Это довольно старый вариант, но знать о нём нужно. Я точно знаю, что ВКонтакте использовали этот способ очень долго, и после редизайна они отказались от этого способа в пользу SVG + JS.

К примеру, иконки соц. сетей:

Прописываем код для иконки ВК и Instagram:

.icon < position: relative; display: inline-block; width: 40px; height: 40px; background-image: url(‘img/socials-pack.svg’); background-size: 287px; background-repeat: no-repeat; >.icon_vk < /* начальная позиция стоит по-умолчанию */ >.icon_instagram

Тут у нас выступает 2 проблемы:

Клубничный мохито- ювелирные украшения из серебра с драгоценными камнями ручной работы Сила природы

Первая — у нас может занять много времени подготовка CSS свойств.

Вторая — опять очень проблематично менять цвета. Придётся экспортировать столько дублей иконок, сколько нужно цветов.

Зато тут есть 1 приятный плюс — это небольшой HTML код, так как мы используем только класс, чтобы добавить иконку.

Сам вариант нужно использовать с осторожностью и только по особенности проекта (к примеру, если мы хотим сделать плагин со смайликами для чата). В других же ситуациях нужно использовать другие варианты.

Способ №3 — использовать готовый сервис иконок. Тут вам важно уточнить у дизайнера — ОТКУДА ВЗЯТЫ ИКОНКИ.

Небольшое отступление — вам в принципе нужно всегда спрашивать у дизайнера: какие иконки, откуда изображения, где взять шрифт и т.п. вопросы.

Часто бывает такое, что иконки взяты с какого-то сервиса, который позволяет подключить иконки через стили или скрипты.

В Figma дизайнеры часто используют сервис Iconify.

Либо дизайнер мог использовать другие иконки, где есть готовое подключение на сайт. Тот же EvaIcons, к примеру.

Пример подключения через Iconify:

Тут я уже начну с плюсов:

во-первых, мы можем очень легко и быстро подключить все иконки на сайт
во-вторых, цвет иконки меняется очень просто по свойству color в css
в-третьих, размер иконки наследуется от шрифта и мы можем его менять по свойству font-size
да и в целом в нашем html коде всё аккуратно, иконки занимают 1 строку

Читайте также:

Если человек носит украшения из серебра

Из минусов, пожалуй, только то, что мы подключаем сторонний сервис/библиотеку, и вместе с этим много лишнего кода. Но это мелочь, особенно если дедлайн проекта горит.

Этот вариант следует использовать, если иконок в макете больше 5 и их цвета не нигде не меняются.

Способ №4 — это самостоятельно превратить все иконки в иконочный шрифт

В этом случае вам не повезло, потому что дизайнер использовал иконки, для которых нет никакого решения для подключения на сайт (вот подлец).

Что мы делаем:

мы экспортируем все иконки в svg формат (будет лучше, если все они будут чёрные, латиницой без символов и слова «icon»)
импортируем их в сервис icomoon (чтобы сэкономить кучу времени). Тут важно, чтобы у вас все иконки были в кривых (fill), а не обводкой (stroke). Сервис не работает с обводкой, и он вас предупредит, если какая-то иконка будет сделана обводкой
генерируем иконочный шрифт и получаем готовый CSS файл и превьюшку с иконками

или в файле стилей —> Кнопка с иконкой .button:before

Из плюсов я выделю:

возможность легко менять цвет через CSS свойтсво color
возможность задавать размер иконки через font-size (то есть иконка наследует размеры щрифта)
небольшой html-код, так как мы используем только 1 небольшой класс для добавления иконки
простая поддержка иконок (легко добавлять и удалять иконки из нашего арсенала)
экономим пространство тем, что у нас находятся только те иконки и код, которые нужны (в отличии от использования готового решения, где может быть больше сотни иконок)

Из минусов:

мы тратим немного больше времени на подготовку иконочного шрифта
нам важно следить, чтобы иконки были в кривых, а не обводочными

Данный вариант подходит, когда иконок в макете много и когда их цвета могут меняться.

Друзья! Поверьте, этого всего вам достаточно, чтобы научиться правильно и без проблем подключать любые иконки на любой сайт. Ведь сами понимаете, как важно, чтобы html-макет соответствовал макету в Figma, при это без ущерба производительности и качеству кода.

Пишите в комментариях — что вы думаете по этому поводу.

Не забывайте подписываться на меня в YouTube, там также много полезного.

Удачи вам в ваших макетах и увидимся в следующих видео/статьях. Пока!

Читайте также:

Бохо шик украшения своими руками

Источник: habr.com

Как украсить свой сайт к празднику

Kak-ukrasit

Всем привет! Украшения для сайта — самый быстрый и бесплатный способ изменить его внешний вид. Давно известно, что посетитель свое мнение о веб-ресурсе составляет за первые 10 — 20 секунд нахождения на нем. И если он ему не понравился, просто — напросто уходит с него. Поэтому дизайн, в том числе всевозможные украшения для сайта, играют очень важную роль в его посещаемости, а значит, и прибыли, которую этот веб — ресурс приносит.

Теперь подробнее поговорим о том, как украсить свой сайт к любому празднику, затратив на это минимум времени и получив максимальный эффект. Как известно, время от времени для любого интернет — ресурса требуется редизайн, в соответствии с изменяющимися вкусами целевой аудитории и так далее.

Как правило, такое обновление сайта благотворно сказывается на его посещаемости. Но тут есть два но. Во-первых, редизайн требует вложения определенных средств и затрат времени. А во-вторых, и это самое главное, изменение дизайна сайта необходимо проводить раз в два-три года – слишком частое изменение внешнего вида интернет-ресурса выглядит несолидно.

Украшения для сайта — это совсем другое дело. Во-первых, с их помощью можно легко и совершенно бесплатно освежить вид сайта актуальной тематикой. А во-вторых, это не будет выглядеть, как изменение дизайна сайта. Представьте себе фасад офиса, который периодически украшают либо яркие новогодние гирлянды, либо красочные воздушные шарики и так далее. Другими словами, внешний вид офиса всегда будет выглядеть празднично и, в тоже время, легко узнаваемо.

Сервис Дари! предлагает украсить любые сайты при помощи различных скриптов собственной разработки. Тематики скриптов самые различные: новогодняя (падающие снежинки, Дед Мороз, поздравляющий посетителей сайта), в честь 23 Февраля, 8 Марта и так далее:

darii

Украсить сайт просто и бесплатно . Для того, чтобы воспользоваться бесплатными украшениями от darii.ru, зарегистрируйтесь на сайте . Регистрация стандартная:

darii-registr

Далее, выберите украшение для своего блога и нажмите «Примерка!». Как раз завтра «День защитников Отечества» 23 февраля, а у меня как раз день рождение (можете поздравлять в комментариях). Сделайте вашим посетителям мужчинам приятное:

Den

Обратите внимания, можно так же в это проделывать в личном кабинете администратора. Вкладка «Управление расписанием»:

darii-ukrasheniya

После нажатия кнопки вас будет перенаправлять на свой блог, где Вы можете увидеть и настроить своё украшение. Я в пример возьму анимированного (флеш) деда мороза:

ded-moroz

Здесь, Вы можете выбрать расположение картинки; размер; изменить текст поздравления; период показа. Только не забывайте кликать «Сохранить». Следующий этап, это установка скрипта на ваш блог.

Как установить скрипт украшений на блог WordPress

Вкладка в личном кабинете — Профиль и HTML код. Настройте внешний вид информера, который будет отображаться у вас в блоге:

informer

Нажмите «Сохранить». Скопируйте код информера:

kod-informera

Аккуратно вставьте код информера на ваш сайт, не изменяя его. Внимание! Не изменяйте код, это может привести к неработоспособности украшений или вашего сайта. Код информера как правило лучше вставлять в нижнюю часть сайта («футер»), как это делается со счетчиками статистики. Код должен быть размещен на всех страницах сайта, либо только на тех страницах, которые вы хотите украсить.

Можно воспользоваться виджетом «Текст». Проверьте правильность установки информера. Для этого перейдите на сайт: если вы видите в «футере» сайта прямоугольный информер с логотипом Darii.ru Вы все сделали правильно.

Все скрипты отличает хорошо продуманный, лаконичный стиль. Они имеют малый вес и практически не нагружают страницы веб-ресурса, на которых они установлены.

html-код устанавливается всего один раз: Вы сможете размещать на сайте любые украшения к любому празднику из личного кабинета без смены html-кода, используя Личный Кабинет.

Пользоваться сервисом «ДАРИ!» можно целый год, поздравляя посетителей вашего сайта (блога), например, с Новым Годом, 8 Марта, 23 февраля или вашим профессиональным праздником.

Обновление расписания происходит раз в 1 час, поэтому если Вы настроили появление украшения на текущий день — оно появится через час.

Надеюсь друзья будет вам полезно. До встречи.

Источник: wordpressmania.ru

Как украсить свой сайт к Новому году?

Новый год

Новый год уже близко. А это значит, что нужно нарядить не только ёлку и себя, но и сайт. Собрали для вас подборку праздничных украшений для сайта. Внедряйте и дарите посетителям новогоднее настроение.

Ёлочная ветка на углу страницы
Метель
Новогодняя гирлянда
Гирлянда на JavaScript
Боковая панель с Санта-Клаусом
Новогодний фейерверк
Таймер обратного отсчёта
Новогодняя открытка

Ёлочная ветка на углу страницы

Достаточно простое, но вместе с тем красивое украшение сайта. Простой скрипт отображает png-изображение в углу страницы. Вот пример одного из вариантов: