Мне не очень нравятся майонез, сметана и кусты акации.
Контакты
Местоположение
Россия, Москва и Московская обл., Москва

Достижения

Все достижения (18)

Наибольший вклад в теги

Все теги (63)

Лучшие ответы пользователя

Все ответы (286)
  • Где взять макеты для практики из Figma?

    SmthTo
    @SmthTo Куратор тега Вёрстка
    Все перепёлки мира будут оплакивать мою смерть.
    https://www.figmafreebies.com/
    https://www.figmacrush.com/

    Вводите в поиск: Figma templates — находите кучи сайтов.

    UPDATE. Ещё в Community можно смотреть.
    Ответ написан
  • Когда использовать jpg а когда png?

    SmthTo
    @SmthTo Куратор тега Вёрстка
    Все перепёлки мира будут оплакивать мою смерть.
    Типичные примеры использования:

    JPG — фото, иллюстрации без прозрачности, где важны цвета, переходы, оттенки и т. п. В таком случае JPG выигрывает у других форматов в плане соотношения качество/цветность/размер. Так себе для контрастных схем и текстов.

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

    GIF — анимации. Ну тут вообще отдельная песня. Ему на смену пророчат APNG и MP4, но воз и ныне там.

    SVG — иконки, иллюстрации. Поддерживает прозрачность, бесконечно тянется. Обычно те же иконки в SVG весят меньше, чем в PNG при одинаковом фактическом размере использования. Можно анимировать (отдельная тема и куча особенностей) и управлять с помощью CSS и JS, если встраивать inline (можно и через #use, но с ограничениями). Наверное, самый чувствительный к ошибкам формат, потому что состоит из кода: сложный SVG-файл может убить производительность. Можно очень легко зашить вредоносный код, поэтому запрещён в вёрстке писем.

    P. S. Я не могу описать все случаи, бывают уникальные, так как процесс выбора формата зависит от контента вашего изображения. В каждом конкретном нетипичном случае — думайте сами. К примеру, если векторная иллюстрация весит много, то есть смысл перевести её в JPG или PNG. Иногда SVG-иконка может весить в разы больше её PNG-аналога (при одинаковом фактическом размере использования, например, 100 на 100 пикселей при 1:1 размере viewport к физическому разрешению экрана) — тут многое зависит от методов и качества создания таких иконок. Как правильно отметил @Adamosу, иногда затраты на рендеринг SVG (на стороне клиента) не окупают его преимуществ, и приходится использовать растровые изображения. Ну и т. д… Особенностей использования форматов — куча.

    P. P. S. Почитайте о Retina, ибо нет никакого «для ретины следует юзать JPG».
    Ответ написан
  • Как сделать анимацию логотипа?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    Что первое, что второе, по описанию, требуют WebGL. Второй вариант проще и легче в плане кода будет: статичная сфера с текстурой + текст, который описывает движение по её орбите.

    Можно на CSS сделать достаточно убогую бесконечную прокрутку карты, но она не будет учитывать геометрию шара.

    Типа так:


    UPDATE. Увидел такой баг в Android Chrome в результате совместной работы border-radius и overflow:
    5d694ce0ed71b148762968.png
    Нашел решение хаком. Нужно добавить следующее к такому блоку:
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */


    Это исправило проблему, обновил песочницу.
    Ответ написан
  • Как реализовать чёрточки между символами в input?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.


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

    UPDATE №1. Шрифт должен быть моноширинным.

    UPDATE №2. Есть проблема из-за letter-spacing у последнего символа в input'е (появляется прокрутка). Хак с отрицательным margin на ширину letter-spacing тут не сработает. Я знаю только один вариант исправления этого — div как обертка и блок внутри с тем самым хаком и contenteditable. Т. е. нужно будет настраивать JS для получения данных отсюда. Вот тут это все есть + есть простой скрипт для ограничения вводимых в область символов, чтобы понять идею:

    Ответ написан
  • Как поставить hover на тачпад?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    CSS-детекция ненадёжна:
    https://developer.mozilla.org/en-US/docs/Web/CSS/@...
    https://developer.mozilla.org/en-US/docs/Web/CSS/@...

    В Android Chrome срабатывает какого-то дьявола первое:


    Лучше использовать любой JS-скрипт, определяющий сенсорный экран, ставить класс на body, после чего писать стили отдельно для этого случая. Стили для сенсора нужно ставить для :active вместо :hover.

    Я использую этот простой скрипт:
    Ответ написан

Лучшие вопросы пользователя

Все вопросы (7)