• Как называется такой тип верстки?

    @unreal_serg
    Ну, на этих лендосах много параллакса, если о нем речь, конечно! Это такой эффект, когда элементы саыта (картинки например) смещаются относительно курсора или экрана.
    Ответ написан
    Комментировать
  • Как называется такой тип верстки?

    SuperToster
    @SuperToster
    Что такое "тип вёрстки" — затрудняюсь.. Тут верстальщик хотел сверстать лендинг, но случайно нашёл плагин scrollmagic.io... И не смог остановиться )

    Если интересно как сделать подобное, смотрите примеры: scrollmagic.io/examples/index.html, читайте доку.

    Но пользуйтесь в меру. Не как в приведённых вами шаблонах.
    Ответ написан
    Комментировать
  • Заказчик скинул макет в формате ai, но ни в Avacode, ни в Adobe Illustrator не читается шрифт. Что делать?

    c0nt0rti0m
    @c0nt0rti0m
    Препресс для флексы и офсетной печати.
    Если не требуется редактирования - попросить заказчика перевести всё в кривые.
    Если требуется редактирование - запросить шрифт / найти шрифт и установить на компьютер
    ВАЖНО. При установке шрифта может произойти несоответствие версий шрифтов и текст может "поехать", лучше попросить дополнительно превью в jpg или pdf
    Ответ написан
    Комментировать
  • Как изменить размер SVG-картинки в CSS?

    @ArseniyInformation
    Ответ написан
    Комментировать
  • Как сделать грамотно сделать header?

    @romant094
    Frontend-developer
    Обратите внимание на то, как сделана верстка. Добавил скрин, чтобы продемонстрировать, как ведут себя элементы. Красная обводка — это ul, черная — li.

    6229aed482423513413180.jpeg

    Набросал, как это может быть: https://codepen.io/romant094/pen/ZEagLWz
    Ответ написан
    Комментировать
  • Как сделать цвет текста зависящем от яркости изображения за ним (фоновым)?

    DanArst
    @DanArst Куратор тега CSS
    Гриффиндор в моде при любой погоде!
    Есть такое свойство mix-blend-mode, но оно не поддерживается IE. Работает примерно так (тут mix-blend-mode: difference):


    p.s. не советую его юзать, лучше придумайте решение под свои задачи
    Ответ написан
  • Как сделать такой эффект анимации?

    twobomb
    @twobomb
    Ответ написан
    Комментировать
  • Как сохранить страницу сайта со всем ее зависимым содержимым?

    Basters
    @Basters
    Кокер-спаниель
    Погоди.... Phantom.js это несколько другое....

    Если тебе просто выкачать сайт нужно сохранив все пути и зависимые файлы, то юзай wget!

    wget -r -k -l 7 -p -E -nc http://site.com/

    Где

    -r—указывает на то, что нужно рекурсивно переходить по ссылкам на сайте, чтобы скачивать страницы.
    -k—используется для того, чтобы wget преобразовал все ссылки в скаченных файлах таким образом, чтобы по ним можно было переходить на локальном компьютере (в автономном режиме).
    -p—указывает на то, что нужно загрузить все файлы, которые требуются для отображения страниц (изображения, css и т.д.).
    -l—определяет максимальную глубину вложенности страниц, которые wget должен скачать (по умолчанию значение равно 5, в примере мы установили 7). В большинстве случаев сайты имеют страницы с большой степенью вложенности и wget может просто «закопаться», скачивая новые страницы. Чтобы этого не произошло можно использовать параметр -l.
    -E—добавлять к загруженным файлам расширение .html.
    -nc—при использовании данного параметра существующие файлы не будут перезаписаны. Это удобно, когда нужно продолжить загрузку сайта, прерванную в предыдущий раз.

    P.S. ты пишешь что это будет сервис, тогда в принципе ничего сложного написать BASH реализацию скрипта. Однако нужно учитывать все тонкости твоей задачи...
    Ответ написан
    3 комментария
  • Как убрать на айфонах в инпутах сверху непонятную тень?

    Ugolnikovvv
    @Ugolnikovvv
    Junior Frontend-разработчик
    Попробуйте
    input {
        appearance: none;
    }
    Ответ написан
    1 комментарий
  • Примеры макета SENIOR-дизайнера?

    @alekcena
    Нелинейный наставник
    "Сеньор помидор" дизайнер лично для меня
    1) Делает под 3 брекпоинта. (Мобилка, Планшет, Компуктер)
    2) Выносит отдельно(Цвета, кнопки со всеми состояниями, повторяющиеся блоки, шрифты)
    3) Отдаёт архив со шрифтом.(Я попросил мне лично отдаёт.)
    4) Валидные блоки в инструменте(Чтобы я мог нормально, без танцов с бубном смотреть отступы)

    По поводу длины. Это он и не должен учитывать особо.
    В мире сколько языков?. Начертаний и тд. Это просто невозможно.

    Тк-же если блок редактируется не думаю что он должен про это думать. У них своих проблем выше головы.
    line-height особенно в фигме дизайнер не задаёт. Он тянет блоки. То что фигма вам генерирует файл к верстке никак не относится. ( Это в первую очередь инструмент для дизайна. А не для вёрстки.)
    Относительные размеры шрифтов?) Создай такой инструмент, сделайте его удобным и будут тебе делать. Проблемы нет.
    Пока это всё выглядит не как проблема дизайнера. А как не "Сеньорность" верстальщика.
    Ответ написан
    1 комментарий
  • В чем суть такой записи в reset.css?

    nowm
    @nowm
    Это специфичное для blockquote определение, которое Eric Meyer (автор reset.css) позаимствовал у Paul Chaplin. Первая строка content: "" делает так, чтобы у blockquote исчезли кавычки — на случай, если вторая строка content: none не поддерживается браузером, потому что первая строка — это CSS 2, а вторая — это CSS 2.1. В одну строку их записать нельзя, потому что по стандарту для свойства «content» нельзя комбинировать ключевые слова «normal» и «none» с другими значениями.

    Вообще, когда встречается перечисление одного и того же свойства с разными значениями, это делается для того, чтобы обеспечить совместимость с разными браузерами. То есть, если, например, браузер не поддерживает «content: none», он применит «content: ""», а другую запись проигнорирует.

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

    .some-class {
        background: #e66465;
        background: linear-gradient(#e66465, #9198e5);
    }


    В этом коде, если браузер поддерживает градиентный фон, он сначала прочитает, что нужно использовать цвет «#e66465», а потом это перезапишется записью «linear-gradient», и итоговое значение будет «linear-gradient(#e66465, #9198e5);». Если же браузер не поддерживает градиент, он сначала прочитает, что нужно использовать «#e66465», а потом увидит неподдерживаемое определение «linear-gradient», проигнорирует его, и итоговое значение будет «#e66465».
    Ответ написан
    Комментировать
  • Инверсия на сайте, как отключить?

    develx
    @develx
    Web developer
    Мета тег color-scheme и медиа запрос prefers-colors-scheme samsung internet поддерживают https://developer.samsung.com/internet/blog/en-us/... Но есть одно но - чтобы это все заработало нужно в настройках браузера выбрать labs и там чекнуть использовать темную тему сайта и тогда при добавлении <meta name="color-scheme" content="light dark"> тема будет всегда не инвертированная. Но если у пользователя выбрана темная тема без выбора этой настройки в телефоне, он будет видеть инверсию. И с этим ничего сделать нельзя.
    Ответ написан
    Комментировать
  • Как сделать ,чтобы стили применялись только для браузера сафари?

    SlavaMaxwell
    @SlavaMaxwell
    HTML-верстальщик
    Ответ написан
    Комментировать
  • Знает ли кто-то как собрать сайт в 1 файл?

    @dmitryfcz
    Можно сохранить плагином для хрома - SingleFile
    https://chrome.google.com/webstore/detail/singlefi...
    Ответ написан
    Комментировать
  • Знает ли кто-то как собрать сайт в 1 файл?

    sharomet
    @sharomet
    Front-End
    автоматически вряд ли. Вы можете стили засунуть в head -> style, скрипты в тег script. картинки можно конвертировать в base64 и вставить код.
    Ответ написан
    2 комментария
  • Знает ли кто-то как собрать сайт в 1 файл?

    Adamos
    @Adamos
    Есть хороший способ собрать в один компактный файл все стили с картинками и гарантированно избежать расползания верстки.
    PDF называется.
    Ответ написан
    2 комментария
  • Знает ли кто-то как собрать сайт в 1 файл?

    @markak
    Frontend developer
    Можно, если стили из файла перенести в тэг style, изображения сконвертировать в base64 и заменить в соответствующих атрибутах src и значениях свойств background-*
    Например вот так:

    https://jsfiddle.net/71emtqoL/

    <!doctype html>
    
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>example</title>
      <style>
        .bg-img{
          background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
    	    background-repeat:  no-repeat;
    	    padding-top: 10px;
        }
      </style>
    </head>
    
    <body>
      <div>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
        <p>Изображение красной точки в base64 (img src)</p>
      </div>
      <div class="bg-img">Изображение красной точки в base64 (background-image)</div>
    </body>
    </html>
    Ответ написан
    Комментировать
  • Как сделать веб-кинотеатр для себя (видеоплеер)?

    @jumpUp22
    Хороший вопрос.
    Сам делал что то такое (прототип) на Vue. awfulk1f.beget.tech/pj/cinema/index.html
    Пока не доделываю этот проект. Есть пагинация, фильтр по алфавиту (отключен), сохранения просмотренного в cookies.

    Сам плеер - только HTML5. webm, mp4 - воспроизводит нормально.
    mdn говорит что с форматами всё довольно хорошо
    https://developer.mozilla.org/en-US/docs/Web/Media...
    https://developer.mozilla.org/en-US/docs/Web/Media...

    Если хотите, могу отправить исходный код проекта. Со стилями там полный беспорядок, интересно было насколько проще такое сделать с фреймворком, чем на чистом JS.
    Ответ написан
    1 комментарий
  • Что произошло с дизайном веба — почему стали такие большие разрешения для мобильных устройств?

    @deliro
    Агрессивное программирование
    1. Доля мобильного трафика достигает 80-90% на большинстве ресурсов
    2. Минимальное десктопное разрешение, которое есть у 99% десктопных юзеров — 1366х768 (самые дешёвые 15.6 дюймов ноутбуки, которым уже 10 лет от роду. Я не шучу, с таким разрешением я первый ноут купил в 2010. А в 2009 на ПК уже был моник 1440х900). При этом самое частовстречаемое — Full HD (1920x1080). Всё что ниже — таблетки

    Отсюда вытекает вопрос: а зачем ради полутора землекопов сжигать деньги кастомеров/инвесторов, разрабатывая им отдельный интерфейс, если они и мобильной версией могут пользоваться, т.к. сейчас они полнофункциональные? Либо, если не разрабатывать отдельный, то зачем проектировать интерфейсы, ориентируясь на тех 1.5 землекопов, заставляя страдать (условно) остальные 99%?

    Более того, эти 1.5 землекопа обычно оказываются неплатёжеспособной аудиторией (раз уж у них до сих пор монитор/ноут старше 10 лет).
    Ответ написан
    6 комментариев