Ответы пользователя по тегу Вёрстка
  • Как реализовать подобный эффект?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Абсолютное позиционирование, вырезание картинок, before/after... Ох и понапридумывают всякого...
    .example {
        background: linear-gradient(to right, #F0F3BD, #F0F3BD), // левая граница
            linear-gradient(to right, #F0F3BD 0%, #F0F3BD 70%, #fff 70%, #fff 100%), // верхняя
            linear-gradient(to right, #F0F3BD 0%, #F0F3BD 70%, #fff 70%, #fff 100%), // нижняя
            linear-gradient(to right, #fff, #fff); // правая
        background-size: .5rem 100%, 100% .5rem, 100% .5rem, .5rem 100%;
        background-position: top left, top left, bottom left, top right;
        background-repeat: no-repeat;
    }

    Один элемент. Один фон. Для всего остального есть CSS.
    codepen
    5aa57a2048bd2215197814.png
    Ответ написан
    Комментировать
  • Анимировать svg картинку на js, что лучше для этого подходит?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    1. CSS анимации, которые упомянули выше, стоит использовать осторожно - IE имеет проблемы с интеграцией их и SVG. Такой вариант не всегда подойдет.
    2. SMIL... Процитирую MDN: "Chrome 45 deprecated SMIL in favor of CSS animations and Web animations". Пока все работает. Что будет дальше - кто его знает.
    3. На VanillaJS делать хитрые анимации с SVG достаточно сложно. Вариант с генерацией CSS анимации из JS имеет те же проблемы, что и использование CSS анимаций в чистом виде.
    4. Почему-то у нас народ любит хвалить GSAP. Но есть и другие инструменты, например Anime.js - меньше пафоса, свою задачу решает. Я бы отдал предпочтение второму варианту, но тут уж на вкус и цвет...
    Ответ написан
    1 комментарий
  • Как сделать Border в разных цветах?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можно нарисовать его градиентом (пример).
    Ответ написан
    1 комментарий
  • Как правильно передать анимацию разработчику?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Вариант 1:
    У разработчика есть то же ПО, что и у вас. Он может открыть ваш проект и не по описанию и гифке все делать, а по вашим исходникам.

    Вариант 2:
    У разработчика нет возможности открыть ваш проект. Такое вполне может случиться. Например ваш Principle не очень дружит с линуксом. Или еще что-то не так. В такой ситуации желательно иметь:
    • Гифку
    • Гифку x0.1, а то иногда все так быстро движется, что ничего не понятно
    • Список функций, которые вы используете (кривые безье сложно угадывать на глазок, а easing - понятие ооочень растяжимое)
    • Тайминги, по крайней мере продолжительность основных движений в анимации (в небольших взаимодействиях с элементами разница в 50ms может "чувствоваться", но "увидеть" ее сложно)
    • Если есть хитрые соотношения размеров - было бы хорошо иметь описание логики, а то иногда не понятно, идет движение "на 100px" или "на треть высоты элемента"


    Если есть обратная связь с вами, как дизайнером (можно что-то уточнить в процессе), то этого вполне достаточно.

    результат работы фронтенда не устраивает

    Не забывайте о том, что у очень многих (как это ни странно) фронтендеров чувство вкуса отсутствует от слова совсем. Так что для них создание чего-то красивого и нестандартного - это почти пытка. Правда что в такой ситуации делать - не очень представляю.
    Ответ написан
    3 комментария
  • HTML, CSS: Какими комментариями Вы отмечаете начало и конец блока?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Вопрос к верстальщикам, которые передают верстку бэкэндерам

    Если в верстке получается большой каскад в концах разных секций (а это не такая уж и редкость, самая жуть обычно после шаблонизаторов выходит) и потом это надо нарезать на куски для чего-нибудь на серверной стороне, то можно добавлять для крупных логических блоков завершающий комментарий. В целом его можно дублировать открывающим комментарием, иногда его гораздо проще выцепить глазом, по сравнению с классом, особенно если у вас много классов и аттрибутов:
    ... over9000 lines of code ....
                                </div>
                            </div>
                        </div>
                        <!-- /slide -->
                    </div>
                    <!-- /custom-slider -->
                </div>
                <!-- /column -->
            </div>
            <!-- /row -->
        </div>
        <!-- /content-container -->
    </div>
    <!-- /page-container -->

    Как вариант можно не начинать комментарий с новой строки, особенно если вы любите автоматическое форматирование. Такие комментарии позволяют быстрее ориентироваться в происходящем и меньше терять закрытые/не закрытые теги при нарезке на десяток файлов-шаблонов.

    P.S.: И да, никто не заставляет писать их руками - Emmet может сам их генерировать.
    P.P.S: А тем, кто считает бэкендеров "не тупыми, сами разберутся" стоит пожелать быть добрее к людям в новом году, некоторым из них приятно, когда сразу видно, какие блоки где заканчиваются. Также, как и нам приятно, когда в макете все красиво подписано.
    Ответ написан
    4 комментария
  • CheckBox поставить "content" не работает [fontawesome]?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Необходимо явно указать, какой шрифт должен использоваться:
    font-family: FontAwesome;
    Ответ написан
    Комментировать
  • На каком форуме или в каком видео разъясняют тем flexbox вёрстки?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    На flexboxfroggy.com есть занятный набор упражнений.
    Ответ написан
    Комментировать
  • Как сверстать элемент?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    В CSS имеется свойство clip-path, которое как раз придумано для этого, но браузеры пока с ним не особо дружат, а полифиллить все и вся - не лучшая идея. Так что можно просто нарисовать белую SVG-волну и вставить. Можно как фон, можно как картинку, особенно если хотите ее анимировать и превратить во что-то подобное.
    Ответ написан
    Комментировать
  • Что является идентификатором усвоения языка?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Если вы можете решать любые задачи, которые перед вами возникают в процессе работы и не задаетесь вопросом "знаю/не знаю" - все хорошо, вы усвоили ваш язык. Возможна переодическая потеря памяти и необходимость загуглить что-то что "знаю, но забыл". Если вы хотите прям какой-то тест в процентах - то knot-it-all будет в самый раз. Бесполезная статистика, но все в одном месте - довольно занятно.
    Ответ написан
    Комментировать
  • Кто в production использует flexbox и какие хаки используете для определенных свойств?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Может быть есть какие-то полезные ресурсы, где уже описано, какие свойства ведут себя некорректно в определенных браузерах и как с этим бороться?

    Да, есть - flexbugs.
    Ответ написан
    Комментировать
  • Какие есть способы / сервисы для тестирования верстки в safari на ПК и мобильных?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Как вариант есть еще saucelabs.com.
    Ответ написан
    Комментировать
  • Что есть кроме БЭМ?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    В дополнение к статье Способы организации CSS-кода, упомянутой выше, добавлю еще ссылку на RSCSS.
    Ответ написан
  • Какую лучше сделать разметку и как запомнить выбор?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Это стандартные радио-кнопки. Сами инпуты скрываются, а label для каждого из них стилизуется необходимым образом - пример.
    Ответ написан
    Комментировать
  • Как сверстать блок из PSD? Точнее, как реализовать?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Расположить круглые кнопки по кругу можно примерно так. На маленьких экранах можно убрать все трансформации и поставить кнопки в столбик/строчку. Логику переключения стоит делать на JS, чистый CSS - это интересно, но не практично.
    Ответ написан
    1 комментарий
  • Как делать отступы по макету?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Это по какой-то системе делается или дизайнер просто так по красоте на глазок подбирает отступы?

    Эта система в народе называется стайлгайд. В долгоживущих проектах иметь его в оформленном виде очень полезно. В нем есть и все размеры, и все цвета, и шрифты, а часто и компоненты по отдельности. Если у вас есть стайлгайд - то вы работаете по нему, макет страницы - это скорее для понимания "что в какое место поставить". Он может быть кривым/косым, хоть на бумажке нарисованным.

    Надо ли именно такие отступы соблюдать или можно, например, просто в бутстраповский контейнер запихнуть секцию и не париться?

    А вот если у вас нет стайлгайда и при этом кривой макет, то стоит спросить дизайнера/заказчика об этом и действовать исходя из их объяснений. Единственное, что стоит серьезно обсуждать - так это ситуацию, когда заказчик хочет pixel-perfect, до дизайнера уже не достучаться, а весь макет кривой настолько, что аж в глазах рябит. Там нужно или увеличивать сроки и цену или убеждать, что плюс-минус пара пикселей не имеют великого смысла и вы выиграете и по срокам и в перспективе при поддержке всего этого.
    Ответ написан
    Комментировать
  • С какими проблемами сталкиваетесь при flexbox верстке и как их решаете?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Cобственно проблемы описаны тут. Решения там тоже описаны. Также проблемы решаются ограничением использования флексбоксов (дабы не мучать свой мозг и не тестировать каждый чих во всех браузерах). Ну и postcss-flexbugs-fixes в составе postcss-fixes тоже лишним не будет.
    Ответ написан
    Комментировать
  • Оцените верстку?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Что нужно поправить?

    Доступность. В частности вопросы контрастности элементов. Если вам дизайнер дает такую бяку - вы просто обязаны его поправить. В частности состояния элементов:
    3ff17e1ab4c746688fe4bd419db67e62.pngc9145b0046004608bf1cdeef99826c45.png
    Вы видите разницу? А она есть. Мы с вами может и заметим ее, но пользователь - нет.

    С фокусом вообще все печально, нормально протабать страницу нельзя - фокус улетает в неизвестном направлении и пол страницы пребывает где-то там. Ну и синенькие рамочки - не комильфо.
    Ответ написан
  • Z-index: over9999 - зачем?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Z-index over9000 не нужен вообще. Это костыль, который некоторые люди, не понимающие css, используют для того, чтобы быть уверенными в том, что их элемент будет "сверху". При этом цивилизованные люди ограничиваются небольшими значениями z-index, с которыми проще работать. Иногда используют логические схемы вроде таких:
    • 0-9 - в пределах компонента
    • 10-19 - для всплывающих менюшек, подсказок и.т.д.
    • 20-25 - для выезжающих меню, модалок и.т.д.

    Можно ограничиться только диапазоном 0-9, но такая схема, хоть и является избыточной, позволяет проще ориентироваться в коде.

    А те, кто говорит "Но если используются сторонние плагины, в которых элементы имеют большой z-index, а их надо перекрыть, то ничего другого не остается" в ответах выше ( mletov ) просто решают один костыль подпереть другим. Не стоит утверждать, что ничего другого не остается - в большинстве случаев предпочтительнее в такой ситуации использовать обертку (пример упрощен для наглядности):

    <div class="my-div">My element</div>
    <div class="wrapper">
        <div class="over9000">over9000</div>
    </div>


    div { position: absolute; width: 100%; }
    
    .my-div   { background: #0f0; z-index: 2; }
    .wrapper  { z-index: 1; }
    .over9000 { background: #f00; z-index: 9999 !important; }


    В такой ситуации "мой элемент" будет выше, чем "over9000".
    codepen
    Ответ написан
    2 комментария
  • Как подогнать psd для верстки?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Шаблон сделан на разрешение 3360х12078. Можно ли как нибудь изменить это разрешение до необходимого 1920х1014?

    А почему вы решили, что там должно быть 1920? Не глядя кажется, что он в ширину не 1920 должен быть, а 3360/2=1680. А сделан в два раза больше только ради картинок для ретины. В чем проблема при верстке все размеры делать в 2 раза меньше? Тем более, что если макет нормальный, то многообразия размеров там не будет. Но если вы все же хотите поменять разрешение - вам нужно скачать полноценный фотошоп и поменять его там, assets не для этого предназначен.
    Ответ написан
    Комментировать
  • Как сверстать это?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Как сверстать это?

    Вот как-то так (вариант без SVG, построенный на CSS-трансформациях).

    Пара замечаний по поводу решения:
    - Картинки в виде нормальных картинок, а не фонов, нужны для того, чтобы было проще адаптировать под ретину, загружать их независимым lazy-loadом и для лучшего индексирования поисковыми системами (не могу ни подтвердить, ни опровергнуть, но по личным наблюдениям фоновые картинки имеют свойство иногда не индексироваться вообще, зависит от фазы луны).
    - В связи с первым пунктом добавил полифил для свойства object-fit (нужен только для IE, остальные браузеры давно уже умеют его использовать).
    - Все резиновое, но на маленьких экранах лучше сбрасывать одну секцию под другую (на вашей картинке это не отображено, но логика подсказывает).
    Что имею в виду

    На большом экране:
    ca767f8e94ed4185a9afc83022f90d4f.png
    На маленьком:
    f0d7cc300cb344a7883526d7f28606b0.png
    Ответ написан
    Комментировать