Léonard, изобретательский сайт для изобретательского агентства. Разблокируйте знания шаг за шагом, чтобы узнать о нашей методологии взаимодействия/вознаграждения.

Скрины

Видео

Посмотреть сайт ↗

Это и ещё многое другое о веб-разработке вы можете найти в нашем телеграм канале nahtml!

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

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

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

Скрины и Применение

Скачать шрифт ☷

Источник ↗

Это и ещё многое другое о веб-разработке вы можете найти в нашем телеграм канале nahtml!

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

Скрины

Видео

Посмотреть сайт ↗

Это и ещё многое другое о веб-разработке вы можете найти в нашем телеграм канале nahtml!

"Le Voyage Azarian" - это захватывающий опыт пребывания в лесу. Поэтическая баллада в интимной близости с деревьями, сканируемая датчиком лидара.

Скрины

Видео

Посмотреть сайт ↗

Это и ещё многое другое о веб-разработке вы можете найти в нашем телеграм канале nahtml!

Приключения канатоходцев излучают аккуратность. Добраться до другой стороны - это не шутка. Это требует полной сосредоточенности и решительных шагов, но, как ни странно, это делается с элегантностью, точно так же, как этот новый шрифт, который элегантно шагает вдоль ваших проектов и подчеркивает ваши тексты. Представляем Mosk, новый линейный шрифт без засечек, разработанный и распространяемый Iulian Maftei.

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

Скрины и Применение

Скачать шрифт ☷

Источник ↗

Это и ещё многое другое о веб-разработке вы можете найти в нашем телеграм канале nahtml!

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

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

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

Скрины и Применение

Скачать шрифт ☷

Источник ↗

Это и ещё многое другое о веб-разработке вы можете найти в нашем телеграм канале nahtml!

Antara - это мультидисциплинарная дизайн-студия, которая формирует идеи с помощью умных и простых дизайнерских решений с функциональностью в корне.

Скрины

Видео

Посмотреть сайт ↗

Это и ещё многое другое о веб-разработке вы можете найти в нашем телеграм канале nahtml!

RedLight - это студия разработки программного обеспечения, ориентированная на плавную коммуникацию и прозрачность процессов.

Скрины

Видео

Посмотреть сайт ↗

Это и ещё многое другое о веб-разработке вы можете найти в нашем телеграм канале nahtml!

Просмотр шрифтов очень похож на шопинг. Если вы идете с идеей в голове, вы мгновенно найдете то, что вам нужно, не заглядывая далеко, но если это спонтанное решение, вы, вероятно, потратите часы, прежде чем остановитесь на чем-то, что “можно сделать”.

Поэтому, когда вы ищете шрифт для отображения ваших смелых презентаций, вы будете невероятно довольны тем, что может предложить Neutro. Этот шрифт с заглавными буквами был создан для того, чтобы быть замеченным, шрифт, предназначенный для величия от Typologic.

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

Typologic включает в себя 3 различных стиля с Neutro: обычный, жирный и экстра-жирный, а также очерченную версию с личной и коммерческой лицензией.

Скрины и Применение

Скачать шрифт ☷

Источник ↗

Это и ещё многое другое о веб-разработке вы можете найти в нашем телеграм канале nahtml!

Продолжим изучение темы CSS3 - анимация. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Введение в CSS3-анимацию
• ② Ключевые кадры
• ③ Временная функция для ключевых кадров
• ④ Название анимации: свойство animation-name
• ⑤ Продолжительность анимации: свойство animation-duration
• ⑥ Временная функция: свойство animation-timing-function
• ⑦ Повтор анимации: свойство animation-iteration-count
• ⑧ Направление анимации: свойство animation-direction
• ⑨ Проигрывание анимации: свойство animation-play-state
• ⑩ Задержка анимации: свойство animation-delay
• ⑪ Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode

Краткая запись анимации: свойство animation

Все параметры воспроизведения анимации можно объединить в одном свойстве — animation, перечислив их через пробел:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration, остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay.

Множественные анимации

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

CSS

div {
  animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;
}

Источник ↗