Как вставить фото в css

4 способа добавить иконки на сайт из Figma — все плюсы и минусы

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

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

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

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

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

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

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

Однако тут у нас выступает 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, там также много полезного.

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

Как реализовать перекрытие изображений в CSS

От автора: очень популярная в веб-дизайне в настоящее время вещь — это перекрывающиеся изображения. Когда вам, как разработчику, передается проект, есть несколько способов реализовать это — как и почти всегда в CSS.

Один из способов, который вы могли бы использовать — это абсолютно позиционировать один элемент с более низким z-индексом, чтобы другое изображение располагалось сверху, настроить ширину каждого изображения, чтобы мы могли видеть их оба, и это будет работать, верно?

Нуууу, когда вам понадобится текст или любой другой контент после изображений, вы столкнетесь с проблемой. Если элемент с абсолютным позиционированием выше статического (верхнего) изображения, следующий контент будет перекрывать изображения. Это связано с высотой изображения с абсолютным позиционированием, оно не распознается, поскольку находится вне потока документов (нормальное поведение для элемента с абсолютным позиционированием). Чтобы обойти это, вы можете начать экспериментировать с произвольной высотой изображений, и тогда компонент станет очень хрупким, ограниченным и не стабильным.

Я не рекомендую это. Пример того, о чем я говорю, здесь:

Хорошая новость: есть гораздо лучший способ, и не пытайтесь сделать это первым способом, если только вам не нравится головная боль.

Я опишу два надежных подхода к перекрывающимся изображениям.

Метод 1: CSS Grid

Прежде чем я услышу ворчание о необходимости поддержки IE и поэтому вы не можете использовать CSS Grid, я говорю, что вы легко можете использовать CSS Grid и запасной вариант для IE. Я покажу вам, как его создать в последнем разделе.

Одна из моих любимых вещей в CSS Grid (помимо единиц fr или свойства min-max) — это возможность перекрывать изображения, изменяя z-индексы, не извлекая ничего из обычного потока документов!

Сначала мы проанализируем этот компонент. Несколько вещей, на которые стоит обратить внимание:

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

Верхнее изображение всегда будет слегка смещено вниз и будет выровнено по левому краю контейнера.

Как сделать в HTML подпись под картинкой?

От автора: как сделать в html подпись под картинкой? Действительно, как? С первого взгляда все кажется проще некуда, но на деле не каждый может сам додуматься до того, как же все-таки разместить текст ровно под картинкой, ведь она является строчным элементом.

Самый примитивный вариант

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

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

Ладно, это был самый простой способ, который не всегда подойдет, поэтому предлагаю рассмотреть более правильные.

Соединение изображения и подписи в блок

Все очень просто. Мы поместим картинку и подпись к ней в отдельный блок.

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

text — align : center ;
max — width : 200px ;

В моем случае это 200 пикселей.

С помощью селектора .frog p вы можете применить дополнительные стили к подписи.

Использование тега figure

Следующее решение является наиболее оптимальным, так как в нем используются теги html5 – figure и figcaption. Они предназначены для группировки каких-либо элементов вместе.

По сути, нам даже практически полностью подходит код предыдущего примера, нужно только заменить div на figure и p на figcaption:

Все остальное актуально и для этого варианта. В частности, само по себе нахождение текста в теге figcaption не выравнивает его по центру. Чтобы выровнять, нужно сделать то же самое, что мы делали в предыдущем способе. Я изменил цвет текста, чтобы подпись в этом примере хоть чем-то отличалась от того, что мы сделали в предыдущем примере.

Как видите, оба способа дают одинаковый результат. Ну и еще 1 вариант вдогонку

В этом примере не нужно помещать картинку и подпись в блок или фигуру, они могут быть просто самостоятельными элементами, но при этом должны стоять друг за другом в разметке.

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

display : block ;
width : 200px ;
text — align : center ;

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

Ну а чтобы выровнять подпись по центру картинки, мы даем ему ширину картинки и выравнивание текста по центру. Заметьте, какой селектор я использовал. Такие селекторы называются соседними. Например: .frog + p – будет выбран абзац, который лежит в html-разметке сразу за элементом с классом frog.

Результат аналогичен предыдущим способам, даже скриншот не буду показывать. Что ж, это все способы сделать в html подпись под изображением, которые я хотел вам показать. Дело то на самом деле очень мелочное, поэтому особо над его решением нет смысла задумываться, просто выбирайте любой способ и делайте.

Как вставить фото в css

С помощью CSS на страницу можно добавить элементы, несуществующие в разметке страницы. Это делается с помощью псевдоэлементов :before и :after , но не менее важную роль в этом играет свойство content .

Оно определяет содержимое псевдоэлементов. И даже больше, псевдоэлементы не отобразятся, если у них не задано свойство content . Достаточно такой строки:

Снеговики в примере добавлены с помощью content для псевдоэлементов, сами снеговики — символы юникода:

Возможные значения свойства:

normal , none — содержимое псевдоэлемента не отображается. Полезно, если нужно скрыть ранее заданный псевдоэлемент.

— текстовый контент. Можно вставлять простой текст и символы юникода, как в примере выше. Для практических целей очень пригодятся разные варианты стрелок. Символы юникода можно найти, например, тут или тут.

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

Правда, тут появляется проблема лишних запросов к серверу.

• спрайт, иконки из которого вставляются фоном в саму ссылку или в псевдоэлемент. Второе предпочтительней, потому что тогда псевдоэлемент ограничит область видимости спрайта, таким образом иконки в спрайте могут быть расположены не только вертикально, но и рядами.
  Количество запросов к серверу уменьшается до одного, но при этом картинка кешируется у пользователя;
• закодировать отдельные картинки в base-64 и вставлять через content: url() ;
• закодировать весь спрайт в base-64 и использовать его как фон для псевдоэлемента.

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

Закодировать картинку в base64 можно с помощью онлайн-сервисов. Полученный код вставляется в url() с информацией о формате содержимого, например data:image/png;base64 .

Вот так будет выглядеть код для иконки Instagram:

Код длинный и заканчивается где-то за горизонтом. Кроме того, по коду непонятно что за картинка в нём лежит, и, при необходимости отредактировать, картинку надо будет каждый раз кодировать и вставлять заново, хотя в случае с обычным изображением его надо будет просто перезалить. В то же время есть плагин для гранта, который автоматически кодирует картинки и заменяет в коде адреса картинок на base64.

Подобным же образом можно вставлять SVG.

Это очень удобно, но пока что работает не во всех браузерах. Например, Chrome такое поймет и отобразит, а Firefox — нет.

Upd: SVG в CSS будет работать во всех браузерах, если закодировать его как адресную строку. Это можно сделать с помощью URL Encoder.

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

counter-reset задает имя счетчика.

counter-increment увеличивает значение заданного счетчика.

content: counter(имя счетчика) выводит значение счетчика в качестве содержимого псевдоэлемента.

attr() — это значение выводит содержимое заданного атрибута. Удобно использовать для вывода атрибутов href в версии для печати и для разных интересных эффектов.

open-quote , close-quote — значения для вывода открывающих и закрывающих кавычек. Символы, которые будут использованы, определяются свойством quotes . Если оно не задано, будут использованы значения по умолчанию, которые зависят от браузера.

no-open-quote , no-close-quote — значение отключает отображение кавычек, но при этом продолжает учитываться уровень их вложенности.

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

Как реализовать перекрытие изображений в CSS

От автора: очень популярная в веб-дизайне в настоящее время вещь — это перекрывающиеся изображения. Когда вам, как разработчику, передается проект, есть несколько способов реализовать это — как и почти всегда в CSS.

Один из способов, который вы могли бы использовать — это абсолютно позиционировать один элемент с более низким z-индексом, чтобы другое изображение располагалось сверху, настроить ширину каждого изображения, чтобы мы могли видеть их оба, и это будет работать, верно?

Нуууу, когда вам понадобится текст или любой другой контент после изображений, вы столкнетесь с проблемой. Если элемент с абсолютным позиционированием выше статического (верхнего) изображения, следующий контент будет перекрывать изображения. Это связано с высотой изображения с абсолютным позиционированием, оно не распознается, поскольку находится вне потока документов (нормальное поведение для элемента с абсолютным позиционированием). Чтобы обойти это, вы можете начать экспериментировать с произвольной высотой изображений, и тогда компонент станет очень хрупким, ограниченным и не стабильным.

Я не рекомендую это. Пример того, о чем я говорю, здесь:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Хорошая новость: есть гораздо лучший способ, и не пытайтесь сделать это первым способом, если только вам не нравится головная боль.

Я опишу два надежных подхода к перекрывающимся изображениям.

Метод 1: CSS Grid

Прежде чем я услышу ворчание о необходимости поддержки IE и поэтому вы не можете использовать CSS Grid, я говорю, что вы легко можете использовать CSS Grid и запасной вариант для IE. Я покажу вам, как его создать в последнем разделе.

Одна из моих любимых вещей в CSS Grid (помимо единиц fr или свойства min-max) — это возможность перекрывать изображения, изменяя z-индексы, не извлекая ничего из обычного потока документов!

Сначала мы проанализируем этот компонент. Несколько вещей, на которые стоит обратить внимание:

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

Верхнее изображение всегда будет слегка смещено вниз и будет выровнено по левому краю контейнера.

Как вставить в html картинку

Добавление изображения или фото в HTML не вызовет у вас особых хлопот благодаря этой статье, в ней мы рассмотрим не только вставку картинки в HTML. Например, еще мы научимся вставлять картинку в таблицу и многое другое. Зачем? Потому что картинки — наше все! С ними статьи выглядят лучше, подробнее, качественнее, веселее.

Тег для вставки картинки

Итак, для размещения изображения на веб-странице используется тег , у которого есть атрибуты src и alt. Src показывает браузеру где лежит картинка, а alt это альтернативный текст, который видит пользователь в случае если у него отключены картинки, во время загрузки или если изображение не загружается.

Для HTML4, HTML5

Берем и недолго думая вставляем картинку в html. Результат:

Учтите, что тег это строчный элемент. Значит, когда используется XHTML/строгий HTML4, его можно размещать только внутри блочного элемента (

, )

В остальных случаях (HTML4, HTML5) это не обязательно.

Параметры, применяемые к изображениям в HTML

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

width – ширина картинки
height – высота картинки

Вообще, браузер автоматический определяет ширину с высотой и отображает картинку в оригинальном размере, подгоняя под блок, если картинка больше. Если мы выставляем ширину в %, то считаются проценты от родительского блока, если выставляем в пикселях то отображается просто в пикселях. Давайте попробуем использовать вышеобозначенные атрибуты на практике. Например:

При несоответствии оригинального размера и указанного в атрибутах, браузер принудительно отображает то, что вы указали. Если вы указываете пропорции отличающиеся от пропорций оригинала, браузер будет искажать картинку. Например:

Для решения этой проблемы (например если лень высчитывать пропорции и смотреть оригинальное разрешение), можно указать один параметр по которому браузер и будет высчитывать пропорции. Кстати, не обязательно писать «20px», можно просто написать «20». Идем дальше, на очереди параметр alt.

alt – альтернативный текст (краткое описание изображения)

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

title – заголовок картинки

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

Следующие атрибуты это vspace, hspace и border.

vspace – этот атрибут задает отступ по вертикали между изображением и текстом вокруг (в пикселях)

hspace – этот атрибут задает отступ по горизонтали между изображением и текстом вокруг (в пикселях)

border – этот атрибут задает рамку вокруг картинки (в пикселях)

align – (right, left, middle) этот атрибут выравнивает изображение по одному из краев, либо по центру

Помимо этого можно использовать обычный атрибут style, если вам так хочется:

Вот что получится:

Сайты иногда присваивают картинкам классы в эстетических целях, чтобы все картинки имели одинаковый стиль обрамления (например, какие-нибудь красивые border). В .css файле задается общий параметр для одного класса, например, pic. Затем он указывается в HTML:

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

. Пояснение для новичков.
• Как установить счетчик посещений на сайт? Устанавливаем счётчик LiveInternet, Яндекс.Метрика и Google Analytics: https://blogwork.ru/kak-ustanovit-schetchik-poseshhenij-na-sajt/
• Перенос сайта с Денвера на хостинг — перенос WordPress с localhost.

Размещаем изображение с чужого сайта

Можно ли вставить картинку с чужого сайта? Можно. Это называется хотлинк (hotlink). Не все вебмастера это любят и позволяют делать, потому что картинка подгружается с чужого хостинга и если мы все начнем подгружать картинки с чужого хостинга, а он будет слабым и вообще не предназначенным для этого (как специальные сайты-хостинги картинок) то будет печаль. Но Вконтакте не такой. Вот смотрите, захожу в чужие сохраненные картинки Вконтакте и вставляю в html прямо на этой странице:

Как я это сделал? Очень просто:

По поводу хотлинкинга. Еще можно вставить картинку напрямую с хостинга изображений, но в отличие от вебмастеров препятствующих хотлинку, фотохостинги стремятся заработать на этом. А значит кода для вставки изображения вам будет дан код, ведущий на HTML-страницу, при переходе на которую будет показывать реклама. Смотрите в оба!

Как вставить картинку в таблицу на веб-странице

Сделать это очень просто — достаточно поместить внутри тега ячейки