Как сделать логотип css

Обновлено: 05.07.2024

Это перевод двух частей статьи Джереми Франка (Jeremy Frank) Responsive Logos. Часть 1, Часть 2. Я заметил, что когда дело доходит до адаптивного дизайна, логотипы зачастую используются не лучшим образом. В большинстве случаев логотип просто сжимается настолько, насколько это необходимо, чтобы заполнить отведенное ему пространство на странице.

Использование гайдов по фирменному стилю

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

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

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

Что делать, если нет руководства по стилю? Действуйте с осторожностью

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

Вот несколько советов для начала:

Уменьшение детализации

Хотя логотипы с замысловатыми деталями встречаются не так уж часто, тем не менее, в таких случаях уменьшение количества деталей поможет значительно улучшить читаемость в малых размерах. Формы с высокой детализацией могут быть сглажены, тонкие штрихи можно сделать толще, элементы, очерченные контуром, можно залить или инвертировать. Логотип Argento и их стиль выступает отличным примером описанных приемов.

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

Горизонтально и вертикально ориентированные блоки

Это, пожалуй, самый простой и распространенный способ адаптации логотипа, когда графический знак располагается над или сбоку от текстовой части, в зависимости от пропорций носителя. Логотип Case-Mate замечательно иллюстрирует этот прием.

Пошаговое сокращение

Для логотипов, использующих текстовые блоки малых размеров, пошаговое сокращение может стать отличным способом увеличения читаемости. Эмблема Национального Управления Океанических и Атмосферных Исследований (NOAA) является ярким примером. В ней большое количество текста окружает основную графическую форму, который, естественно, станет нечитаемым в малом масштабе. Текст пошагово удаляется в каждой следующей уменьшенной версии логотипа, при этом узнаваемость сохраняется.

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

Теперь мы переходим к практической реализации описанных выше примеров в пользовательских интерфейсах.

CSS-спрайты и подкачка картинок

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

Адаптация логотипов с помощью inline SVG

К счастью, есть гораздо лучший способ, который обеспечивает независимость от разрешения и реализацию в одном файле. В адаптации с помощью inline SVG используется один файл SVG для логотипа, CSS media queries для настройки, и, при необходимости, капля JavaScript. Вот как это выглядит:

Логотип отображается на странице как inline SVG;
Размер логотипа определяется с помощью CSS media queries;
Настройте расположение, цвет, видимость отдельных частей логотипа для каждого случая с помощью CSS media queries;
Если пропорции логотипа должны меняться, настройте это с помощью свойства SVG viewBox для каждого случая, используя JS.

Пример 1. Университет Пенсильвании

Так как логотип в меньшей версии должен быть чуть выше, чтобы соответствовать гербу, свойство viewBox элемента SVG должно быть выставлено так, чтобы логотип не обрезался справа из-за большей общей ширины. Я взял значение из Иллюстратора, просто изменив общий размер и округлив значение.

Пример 2. Argento Wine

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

Это самый сложный пример, так как в SVG содержатся две версии знака, взятые из руководства по фирменному стилю, в котором также указаны правила компоновки текстового логотипа и знака. Как и в прошлом примере, свойство viewBox должно быть отрегулировано для каждого состояния, чтобы соответствовать размеру отображаемых элементов.

Пример 3. Case-Mate

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

Как всегда, следите за свойством viewBox.

Пример 4. NOAA

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

Это самый простой пример, так как меняется только прозрачность элементов. Нет необходимости в JavaScript, так как пропорции всегда квадратные. Свойство viewBox настройки не требует.

Бонус. Инъекция SVG

Еще более рациональный подход — использовать инъекции SVG. По существу, этот способ использует обычный тэг img для создания ссылки на внешний SVG файл, и JavaScript для загрузки соответствующей разметки. Для этой цели я рекомендую пользоваться легкой библиотекой SVGInjector.

Заключение

Формат SVG отлично подходит для реализации независящих от разрешения логотипов. В сочетании с настройкой с помощью CSS media queries и инъекцией SVG вы получаете надежный способ реализации адаптивных логотипов в пользовательских интерфейсах.

Здесь безусловно CSS является основной для разработчиков интерфейсов и также веб дизайна, это в каком виде будет логотип выглядеть на главной страницы или в шапке, как основном его устанавливают. Он представляет собой каскадные таблицы стилей, что представляют собой код для указания браузерам, как форматировать и стилизовать HMTL.

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

Так смотрится на светло синем фоне:

Приступаем к установке:

.zorner-1 <
transform: rotate(-2deg);
>

.zorner-2 <
top: 0.132em;
margin-left: -0.3em;
transform: rotate(1deg);
>

.zorner-3 <
margin-left: -0.35em;
>

.zorner-4 <
top: 0.135em;
margin-left: -0.35em;
>

.zorner-5 <
margin-left: -0.27em;
z-index: -1;
>

.zorner-6 <
top: 0.135em;
margin-left: -0.37em;
transform: rotate(3deg);
>

.zorner-7 <
font-family: 'Montserrat', sans-serif;
font-size: 1.3em;
font-weight: 700;
top: 0;
margin-left: -0.23em;
>

.zorner-8 <
top: 0.136em;
margin-left: -0.28em;
>

Установите style=position:absolute;left:0px;top;0px; на картинке логотипа и располагайтесь left top как вам нравится

3 ответа 3

Мне кажется, что так будет проще:

если по быстрому то

но это большое зло так делать нельзя нужно не картинки использовать а background

Нужно изменить порядок блоков