Ответы пользователя по тегу Вёрстка
  • Изменения каких свойств при анимации являются более оптимизированными? transform: translate или top (position: relative)?

    wqertAnna
    @wqertAnna Автор вопроса
    Кажется, я перепутала и всё наоборот.


    1. Макет (layout)
    2. Отрисовка (paint)
    3. Композиция (composite)

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

    Если вы измените свойство CSS, которое не затрагивает ни макет, ни отрисовку, то браузеру остаётся сделать только композицию.
    Для подробной информации, какие процессы запускают различные свойства CSS, см. триггеры CSS

    ________________________________________________
    статья
    Начиная от заголовка Макет, отрисовка и композиция

    свойство top влияет на все 3 шага конвейера
    свойство transform в некоторых браузерах на 3 шага, в других же только на 1
    Ответ написан
    Комментировать
  • Как расположить блок по центру без костылей (ссылка на codepen внутри)?

    wqertAnna
    @wqertAnna Автор вопроса
    Решение найдено
    https://codepen.io/anon/pen/xopBZw
    5d17123760577310368315.png

    блок сверху светло-фиолетовый (фон добавила для наглядности, так разумеется он прозрачный) это :before
    со стилями:
    {  
      min-height: 20px;
        max-height: 80px;
        flex-grow: 8;
        width: 100%;
    }


    т.е. от текста до верхней и нижней границы блока .box (тот, что с розовым border) одинаковое расстояние (стрелки) вне зависимости от количества текста, если нет переполнения.
    При переполнении верхний блок сжимается
    Ответ написан
    1 комментарий
  • Как сделать так, чтобы кавычки (fontawesome) переносились на другую строчку с последним словом, а не изолированно?

    wqertAnna
    @wqertAnna Автор вопроса
    Всё оказалось весьма прозаично)
    Просто добавить абсолютное позиционирование последней кавычке и относительное родительскому блоку.
    Ответ написан
  • Оценка первой верстки?

    wqertAnna
    @wqertAnna
    1. отзывчивый интерфейс!
    Это безумно важно.
    Всё что интерактивно, должно реагировать на действия пользователей
    нужны стили для псевдокласса :hover на кнопки
    при наведении на ссылки соц.сетей, они тоже должны как-то реагировать. Например, самое простое opacity: .8
    И также не забудьте про cursor: pointer для всего с чем можно взаимодействовать

    2. не видела макет, но Вы уверены, что у кнопок должен быть этот серый сомнительный border?
    Мне кажется, так лучше (зеленая стрелка) border: 0
    уберите оранжевый outline при :focus (синяя стрелка)
    5cf439fd3ee49933461037.png

    3. телефон должен быть ссылкой и тогда он кликабельный
    <a href="tel:+74956660266">+7 (495) 666-02-66</a>
    4. КАК НАС НАЙТИ? в footer, как я понимаю, это тоже должны быть ссылка

    5. я бы убрала outline у input при focus
    и placeholder должен исчезать, когда курсор в поле, а он исчезает у вас только при вводе

    Вы правильно сделали padding-left у полей ввода, но почему нет padding-right. В общем, это не очень красиво.
    5cf43a1be49f4012430270.png

    Правильно делаете, что используете тег time)

    Насчет семантики
    В общем, зеленые стрелки означают, что вы правильно использовали теги h2 и p
    Красные говорят о неправильном использовании этих тегов
    5cf43a848f547575902900.png

    Там где красные стрелки я бы посоветовала использовать div и span
    Смотрите div и span это просто строительные блоки без семантики

    заголовки и параграфы обладают семантическим смыслом, поэтому советую использовать их там, где они нужны.

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


    6. footer не прижат к низу
    5cf43c84e503a132867640.png
    Ответ написан
    9 комментариев