Анна

======

Пишите в телеграм, если хотите скидку на Профессии в HTML Academy.
Осталось 3 инвайта.
Контакты

Достижения

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

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

Все теги (140)

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

Все ответы (1808)
  • Как научиться верстать без проблем?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Студентам в начале курса говорила, кто хорошо в детстве играл в лайнс, тетрис и подобное, тот будет хорошо верстать.
    Верстка это обычная геометрия средней школы записанная с помощью тегов и раскрашеная/подвинутая стилями. Всё.
    Всякие JS и т.д. это просто следующий этап.

    План действий может быть таким:
    1. Берете/получаете макет
    2. Внимательно рассматриваете его, мысленно разбивая на блоки. Думаете что куда может/должно растягиваться или уменьшаться при изменениях экрана и увеличении/уменьшении контента.
    3. Если п.2. сразу не осилился, идете гулять или спать.
    4. Возвращаетесь к п.2.
    5. Верстаете понятные большие блоки, затем их заполняете. Разбивайте задачи более простые.

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

    А совсем без проблем не выйдет, потому что экранов много, браузеров много, хотелок у заказчиков еще больше. Хорошо, когда эти хотелки интересные :)
    Ответ написан
    12 комментариев
  • Какие должны быть размеры в дизайне?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Не оттуда пляшете.

    Давайте я вам как девочка девочке всё объясню. На примере джинсов.
    Есть такая штука мода. Сейчас в обтяжку, раньше клеш или широченные. Но при этом всегда остаются люди предпочитающие классику или консерваторы, которые предпочитают даже слегка устаревшую классику.

    Так вот, с сайтами аналогичная история.
    10 лет назад считалось, что шрифт 14px это гигантомания и использовали 10 или 12. Между строчками крошечные отступы. Особо нерадивые даже между абзацами пытались не делать пустых строк.

    Есть мода и восприятие пользователем современных сайтов. То, как хочется видеть именно сейчас. Изменяются даже пропорции и зависимости.
    96 это точно такое же красивое число как 100. Это 16*6. А 16 это стандартный размер шрифта основных браузеров.

    Кроме этого есть аспекты адаптивности.
    И правильно не ширина кнопки равна 100 или 96px, а ширина кнопки это ширина текста плюс отступы. И хорошо бы, чтобы эти отступы были пропорциональны размеру шрифта, а не кратны 5px. Вы поставите отступ четко 20px, а пользователь поставит в настройках браузера шрифт 150%. И получится куцая кнопка с некрасивыми маленькими отступами.
    При этом не все элементы должны быть кратны размеру шрифта, какие-то имеют другие зависимости.

    Другой вариант, пропорции относительно размеров экрана или блока. Например, кнопка должна занимать всю ширину блока или половину. Если текст не помещается, то переносится.

    Поэтому, хороший дизайнер либо сопровождает работу верстальщика, либо пишет сопроводительное письмо с указанием зависимостей, либо и то и другое.

    И да, дизайнер может четко сказать, что справа отступ 19px, а слева 17, потому что визуально (например, из-за особенностей шрифта) получается ровно. Если это проблема для верстальщика, то не надо работать с таким верстальщиком.
    Верно и в обратную сторону, если дизайнер нагородил какую-то невменяемую конструкцию из-за которой прибавляется лишняя 1000 строчек кода, то имеет смысл обсудить целесообразность ее использования с самим дизайнером и заказчиком.

    Про вклад заказчиков в дизайн, я думаю, вы и сами знаете. У них особенное чувство прекрасного, хорошо, если просто консерватор из первого абзаца.
    Ответ написан
    6 комментариев
  • Как в content вставлялся текст в HTML тегах? Как вставить перевод строки?

    Ankhena
    @Ankhena Куратор тега HTML
    Нежно люблю верстку
    Для вставки спецсимволов в content надо использовать escaped unicode. Например,
    \0a — перенос строки
    \a0 — неразрывный пробел
    \20 — пробел

    Ответ написан
    Комментировать
  • Как открыть изображение на весь экран?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    На чистом CSS:


    Если плагин, то fancybox
    Ответ написан
    Комментировать
  • Какие используете единицы измерения при верстке?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Какие используете единицы измерения при верстке?

    Подходящие!
    Для решения разных задач используются разные единицы измерения

    примеры

    1. Размер шрифта удобно писать в px, em и rem.
    Если он фиксированный, то это px.
    Если зависит от настроек пользователя, то rem. Для html задают font-size: 62.5%, для body font-size: 1.6rem в итоге для стандартных настроек получают изначальные 16px, но для удобства расчетов в этом случае 1rem=10px.
    Если размер шрифта зависит от размера шрифта родителя, то используют em, например, заголовок должен быть в 1.2 раза крупнее текста. h1{font-size: 1.2em}
    А может быть мне нужен адаптивный шрифт, чтобы на всех экранах слово занимало всю ширину, тогда vw vh

    2. Границы. Обычно толщина границ не зависит от шрифта или размеров блоков, значит, px
    border: 1px

    3. Блоки.
    У блоков могут быть разные зависимости.
    Например, четверть родителя -> проценты %
    Или фиксированная -> px
    Или зависит от ширины/высоты вьюпорта -> vw vh
    Или зависит от шрифта -> ch (Ширина символа 0 в шрифте текущего элемента.)

    4. Отступы.
    Могут зависеть от шрифта, могут быть % от ширины блока или фиксированными в px.

    Это не все варианты, все мне, наверное, так сразу и не перечислить
    Ответ написан
    2 комментария