• Частичная прозрачность через css filter?

    @auddit
    Расположите фигуру поверх картинки используя абсолютное позиционирование.
    Метод наложения нужно смотреть в макете, если есть исходник. Если нет, то экспериментировать с mix-blend-mode. Ссылка выше.
    Ответ написан
    Комментировать
  • Оцените верстку №2?

    @auddit
    Если вы только начали верстать, запомните. Никогда не используйте один и тот же текст для нескольких похожих блоков / тизеров / компонентов. Всегда добавляйте разное количество текста, чтобы сразу протестировать, как будет выглядеть с реальным контентом и чтобы не было таких проблем потом. 5f5b860c55e6f172100571.jpeg5f5b86129bafe416149036.jpeg

    Также для ускорения обучения попробуйте несколько курсов, пусть даже платных, но это поможет избежать большинства ошибок и ускорить обучение.
    Ответ написан
    Комментировать
  • Как скрыть текст вылезающий за блок с помощью css?

    @auddit
    text-overflow: ellipsis работает только в паре с overflow: hidden, поэтому добавьте его к своему коду и все заработает.
    Ответ написан
    Комментировать
  • Как изменить форму?

    @auddit
    Верхнему блоку нужно задать два background-image. Первая картинка – основная, вторая – кусок от нижней картинки с арматурой. Второй бекграунд должен быть поверх первого и выровнен по нижней части.
    5f51e6ecbd852826451035.jpeg
    Ответ написан
    Комментировать
  • Динамическая высота сайдбара + position sticky - как выкрутиться?

    @auddit
    Попробуйте использовать https://api.jquery.com/outerHeight/, чтобы сравнить высоту видимой части экрана (body) с высотой сайдбара, и если высота сайдбара больше - задайте position: relative.

    Но при таком подходе, у вас на всех экранах, где сайдбар выше экрана, у вас будет прокручиваться сайдбар, что не очень удобно.
    Я рекомендую добавить к сайдбару overflow-y: auto, это намного удобнее для пользователя.
    Ответ написан
    Комментировать
  • Не отправляет на почту php. Что с этим делать?

    @auddit
    Чаще всего проблема бывает связана с настройками почтового сервера на хостинге.
    Попробуйте несколько вариантов скриптов для отправки, если ни один не сработает, пишите в техподдержку хостинга.
    Ответ написан
    Комментировать
  • Как сделать такой эффект кнопки?

    @auddit
    Используйте свойство transform, для того, чтобы текст кнопки всегда оставался на месте.
    Например, если padding у кнопки слева и справа по 25px, а при ховере вы хотите получить padding 30px, то добавляете transform: translateX(-5px). То есть, мы компенсируем разницу в отступе 30-25=5px. Тоже самое, если вы хотите при active получить сужение на 5px – transform: translateX(5px) здесь уже без отрицательного значения.
    Пример: https://jsfiddle.net/sopjb7rn/
    Ответ написан
    Комментировать
  • Я запилил анимацию для нового года. Что нужно изменить в первую очередь, чтобы стало лучше?

    @auddit
    Это круто!
    Раз уж вопрос в интерфейсах, то самое простое что можно сделать прямо сейчас - кнопку "На полный экран" зафиксировать, чтобы была видна всегда, а при клике на нее все настройки исчезают и прячутся в бутерброд, чтобы не было необходимости докручивать до "пустого экрана".
    Ну то есть, пришел, настроил, сделал на весь экран и хорошо.

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

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

    Для настройки цвета можно сделать авто режим, чтобы цвета менялись сами.
    Ответ написан
    2 комментария
  • Что сейчас модно и в тренде в дизайне настольных приложений?

    @auddit
    Минимализм, большие заголовки контент блоков, отсутствие графики (картинки, иконки), content first, адаптивность под разные размеры вашего приложения на десктопе.
    Ответ написан
    Комментировать
  • Как улучшить главную страницу терминала?

    @auddit
    А что происходит при нажатии на кнопку "Заказать такси"?
    Быстрая подача машины это хорошо. А что с ценами? Человек должен примерно понимать цены, чтобы уверенно нажать на кнопку, а не подумать "Здесь наверное дорого, раз уж даже терминал есть. Лучше так пойду поищу"
    Допустим, цены указали и она устраивает.
    Дальше вопрос "Что за авто приедет? Может это жигули?"

    Я бы слева написал текст крупным шрифтом, черным по белому "Быстрый вызов такси"
    А справа
    - Подача за 1 минуту
    - в город от 900 руб.
    - Новые автомобили (Toyota Camry, Hyunday Sonata и похожие)
    Ниже желтая кнопка "Заказать такси"
    5df3c4713f192923246616.png
    Ответ написан
    1 комментарий
  • Периодически не открывается проект в Figma?

    @auddit
    Такое иногда бывает связано также с провайдером.
    Если не открывается, попробуйте раздать интернет с смартфона и открыть через него. Потом можно работать с обычного интернета.
    Ответ написан
    Комментировать
  • Можно ли автоматически заменить цвета в градиенте?

    @auddit
    Если стоит задача подогнать цвета именно через CSS, используйте свойство filter
    Подробнее о CSS фильтрах смотрите здесь https://css-tricks.com/almanac/properties/f/filter/
    Ответ написан
    Комментировать
  • Может ли контент уменьшаться в размерах при адаптивной верстке?

    @auddit
    Можно, если учитывать размеры шрифта относительно размера экрана девайса.
    Например, от 24" монитора мы находимся дальше, чем от ноутбука, поэтому, шрифт на ноутбуке может быть немного уменьшен. То же самое и на смартфонах. Мы держим смартфон близко, а разрешение экрана на смартфона гораздо больше, поэтому более мелкий шрифт будет читаться нормально.
    Нужно соблюдать баланс. например, на смартфоне, текст должен читаться на расстоянии вытянутой руки.
    Ответ написан
    Комментировать
  • Полезно ли разбивать стили сайта на несколько .css файлов?

    @auddit
    Это полезно для оптимизации скорости загрузки сайта. Маленький файл с основными стилями в head, остальные стили в footer.

    Для удобства правки кода на больших проектах, лучше использовать препроцессоры
    Ответ написан
    2 комментария
  • Возможно ли сделать такой фон средствами CSS?

    @auddit
    Можно сделать через псевдоэлементы. :before и :after
    Ответ написан
    Комментировать
  • Как можно убрать "overflow:hidden" по вертикали у слайдера?

    @auddit
    Как вариант - можно сделать так:

    .slick-list {
    overflow: visible!important;
    }
    .slick-slide {
    opacity: 0;
    transition: opacity 500ms;
    }
    .slick-slide.slick-active {
    opacity: 1;
    }
    Ответ написан
    Комментировать
  • Web-дизайнеры как Вы просматриваете свои макеты в браузере?

    @auddit
    Чтобы не было проблем с центрированием картинки, для макета возьмите такое же разрешение, как у вашего монитора. Если монитор fullHD, то берете разрешение 1920px-17px(размер скроллинга). Таким образом, ширина макета должна быть 1903px. Потом просто сохраняете в .png, открываете в браузере и смотрите.
    Это также поможет понять, как сайт будет выглядеть в браузере, если у сайта есть блоки на всю ширину страницы.
    Ответ написан
    Комментировать