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

Достижения

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

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

Все теги (61)

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

Все ответы (257)
  • Когда использовать jpg а когда png?

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

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

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

    GIF — анимации. Ну тут вообще отдельная песня.

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

    P. S. Я не могу описать все случаи, бывают уникальные, так как процесс выбора формата зависит от контента вашего изображения. В каждом конкретном нетипичном случае, думайте сами. К примеру, если векторная иллюстрация весит много, есть смысл перевести её в JPG или PNG. Иногда SVG-иконка может весить больше её PNG-аналога (при одинаковом фактическом размере, например, 100 на 100 пикселей), тут многое зависит от методов и качества создания таких иконок. Как правильно отметил @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 для получения данных отсюда. Вот тут это все есть + есть простой скрипт для ограничения вводимых в область символов, чтобы понять идею:

    Ответ написан
  • Как сделать вот такую верстку?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    Минимальная ширина просто для примера, чтобы был виден вылет вверх на мобильных, для них нужно просто через media подгонять ширину блока с текстом, что мне делать лень.

    Ответ написан
  • Как оставить текст прежнего размера, если мы придали ему значение тега H1?

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

    h1 {
      font-size: 16px; /* ну или что там у вас тут будет; inherit, em, rem */
      font-weight: normal; /* сброс начертания до обычного */
    }

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

    На всякий пожарный случай:
    https://learn.javascript.ru/css-selectors.

    P. S. Номинант на премию «Вопрос-ответ года».
    Ответ написан

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

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