Ответы пользователя по тегу Вёрстка
  • Как изменить высоту iframe через @media?

    serjikz
    @serjikz
    web-developer
    А вы не пробовали просто для iframe в css задать ширину и высоту?. Либо можете задать блоку оборачивающему нужные параметры а также position: relative и потом для iframe 100% высота и ширина а также абсолютное позиционирование.
    Ответ написан
    3 комментария
  • Кто в production использует flexbox и какие хаки используете для определенных свойств?

    serjikz
    @serjikz
    web-developer
    htmlacademy перешли уже полностью на flexbox даже на своем базовом интенсиве html и css. Год назад еще учили float и inline-block. Вопрос не в том, надо переходить или нет. Надо использовать нужные техники в нужных местах. Я около 2х лет использую flex во всех своих работах (и в фриланс и на постоянке). Да, проблемы есть и они очень и очень забавны местами и решение этих проблем тоже имеется. К примеру есть проблема следующая - на iOS 11 в сафари сайт смотрится отлично, на iOS 10 нет. И думай в чем дело. Но опять же подобные проблемы выявляются только тестами и решаются без особого труда. IE 10-11 и Edge - тоже самое, только тесты и исправлять все что там не так. Опять же вряд ли вам нужно делать pixel perfect проекты для этих браузеров и поэтому проблемы использования flex я не вижу.
    Ответ написан
    Комментировать
  • Премущества и недостатки Google Fonts?

    serjikz
    @serjikz
    web-developer
    Советую глянуть хоть и старую, но хорошую статью по шрифтам от google https://habrahabr.ru/post/159907/

    По поводу SEO что-то я ничего не слышал за такое)) Оно никак не связано с google fonts. На счет минусов - в google есть достаточное количество косячных шрифтов, поэтому надо смотреть каждый раз, не с косяком ли у вас шрифт (сравнить с макетом от дизайнера и с тем что у вас в верстке получается, если с косяком - подключать руками с сервера).
    Ответ написан
  • Как правильно верстать Landing Page?

    serjikz
    @serjikz
    web-developer
    1. Как в дизайне. Если заказчик/дизайнер сказал делать так - значит так. Если нет - значит нет.
    2. Как в дизайне (1920 не видел ширины центровщика ни разу, смотри вспомогательные линии голубого цвета в документе от края контента до края контента)
    3. Опять же - в дизайне как сделано? Делайте так, как сделал дизайнер.
    Ответ написан
    2 комментария
  • Правильно ли avocode отображает line-height?

    serjikz
    @serjikz
    web-developer
    Проверить проще всего - откройте в фотошопе и посмотрите, правильно или нет. Вам тут никто не скажет однозначно, правильно ли в вашем случае показывает потому что макета нет. Но такой line-height быть не должен это точно, как вам ответили в комментарии - это косяк дизайнера возможно.
    Ответ написан
    Комментировать
  • Как правильно и быстро определить тень из photoshop'a?

    serjikz
    @serjikz
    web-developer
    Если ФШ более менее новый - правой кнопкой на слое с тенью, в менюшке всплывшей выбрать "Копировать css".
    Ответ написан
    Комментировать
  • Возможно ли уменьшить качество jpeg файлов используя плагин Postcss?

    serjikz
    @serjikz
    web-developer
    А причем тут постпроцессор css и ваши jpg? Делайте это с помощью grunt/gulp плагинов либо чего-то вот такого https://habrahabr.ru/post/168251/ Нагуглить подобные инструменты не проблема по запросу "сжать картинки jpg" или что-то подобное.
    Ответ написан
    Комментировать
  • Как можно сверстать вот такие кнопки со стрелками?

    serjikz
    @serjikz
    web-developer
    Под стрелочками я понимаю линии от одного к другому. А почему их не сделать через after у каждого кружка и не позиционировать абсолютно? Ну и естественно делать через width: 1px; и нужную высоту и потом их просто через rotate в нужных местах вертать (все они между собой одинаковые, вполне можно так сделать). Даже если это должно как-то перестраиваться - не проблема это сделать через медиа-выражения.
    Ответ написан
  • А что мешает в БЭМ-верстке все сделать блоками вместо элементов?

    serjikz
    @serjikz
    web-developer
    Писал в прошлом вопросе немного по этому поводу. А какой смысл тогда от БЭМ ? Вы название само БЭМ расшифровывали? БЭМ - блок, элемент, модификатор. Давайте выкинем элементы и модификаторы, останутся только блоки. И... что? Зачем тогда нам это?
    Ответ написан
  • У меня стоит зада, изменить стили select в HTML. Дайте ссылку на надежный плагин?

    serjikz
    @serjikz
    web-developer
    https://css-tricks.com/almanac/properties/a/appearance/
    Достаточно сделать apperanse: none; и конечно префиксы написать. Никакие плагины не нужны. Будет работать во всех современных браузерах.
    Ответ написан
    Комментировать
  • Клиент проверяет верстку при масштабе меньше 100% правомерно ли это и чем ему помочь, если да?

    serjikz
    @serjikz
    web-developer
    FireFox 2 варианта - 50% и 30% у кого там и что куда плывёт я честно говоря не знаю и какой больной человек будет работать с таким масштабом - без понятия. Мне при 50% плохо видно, а о 30% говорить вообще нечего... Внушите клиенту, что он требует бред. У меня выходит только когда я говорю прямо человеку, что он псих и требует невменяемых и никому не нужных вещей.
    4eda52a3bb1842ef9fdf2e5ce38d8642.png0f0a271f8b3d4788b686e57f19ed2e25.png

    Да, на хроме в 33% есть косяк с неправильным выводом меню. Зачем вам советуют какие-то min-width и тд и тп - я честно не понимаю. Просто убираем у первой ссылки margin-left и при 33% будет всё замечательно (это если ваш клиент реально психованный и хочет чтоб при этом масштабе всё было круто). Если человек будет прикапываться к масштабу в 25% - просто попрощайтесь с ним и всё, я бы не тратил время на такого заказчика.
    Ответ написан
  • Как сверстать подобный дизайн?

    serjikz
    @serjikz
    web-developer
    А зачем тут ссылки на мануалы? Просто через инспектор происследуйте нужные вам элементы и посмотрите как они свёрстаны. Ничего сложного в сайте нет, 2 картинки с позицианированием на фоне fixed. Все остальные части (типа наложенных друг на друга блоков) просто позиционирование элементов немного нестандартное с помощью position: relative;и соответствующих top: ; left: ;
    Ответ написан
    Комментировать
  • Как сделать такие заголовки под любую ширину и цвет?

    serjikz
    @serjikz
    web-developer
    Как вариант - рисовать 2 svg, которые будут как раз с кружками и палочками (ну или png если с svg не сложилось), далее через inline-block делаем и :before и :after, им ставим vertical-align:middle; а внутри самого заголовка используем span у которого всё тоже самое. Затем у before и after прикиньте максимальную и минимальную ширины (минимальная - сам шарик можно взять) и задавайте бекграунд с вашими картинками палочки и шарика чтоб были относительно верха и низа по центру ну и у одного фон слева, у другого справа. Должно всё заработать (хотя с шириной фиг знает, надо пробовать).
    Ответ написан
    Комментировать
  • Что изучать дальше?

    serjikz
    @serjikz
    web-developer
    js и хотя бы jQuery для более менее нормальной работы и чтоб делать что-то более сложное нужно ещё подтянуть CSS. Шаблоны "средней сложности" у всех понятие очень растяжимое как резиновая вёрстка.
    Ответ написан
    Комментировать
  • Сколько вариантов начертаний шрифтов лучше использовать на сайте?

    serjikz
    @serjikz
    web-developer
    Так, вы дизайнер и вы паритесь о том, как верстальщик будет верстать ваши разные заголовки, я правильно вас понял? Вопрос - зачем вы об этом паритесь? Это ваша головная боль разве? У нас для разных заголовков полно разных инструментов, которые являются селекторами css. Хоть у вас будет 1 000 000 h6 я могу каждый из них стилизировать по-разному совершенно.
    Ответ написан
    9 комментариев
  • Что верстальщики хотели бы донести до веб-дизайнеров?

    serjikz
    @serjikz
    web-developer
    Прошел через все стадии создания web-проектов начиная с копирайтинга, заканчивая back-end и настройку серверов. В итоге остановился на front-end + чуть-чуть дизайн (но это не значит, что плохо знаю фотошоп))).

    Что мне было делать лень, как дизайнеру:
    1. Прикладывать файлы со шрифтами
    2. Архивировать работу
    3. Писать комментарии к дизайну
    4. Присылать исходники иконок (если используется пак)
    5. Рисовать :hover :active :focus и тп для элементов, которые это 100% требуют
    6. Общаться с тугим верстальщиком, который не может отличить iline от inline-block
    7. Корректировать работу, если это просит верстальщик

    Что я понял, когда перешел на другую сторону:
    1. Я хочу архив с адекватными шрифтами (идеал - ссылку на шрифт в goolge fonts или подобном сервисе, где есть сразу все форматы шрифтов)
    2. Я хочу хотя бы .zip потому что инет в России не всегда и везде качественный и я могу быть не дома, когда хочу скачать и посмотреть диз, а он весит 300мб
    3. Я хочу несколько .psd если лендос/сайт большой (экранов в 25-30 или больше). Разбивайте на 7-10 экранов максимум каждый .psd потому что не у всех верстал 8-16 гигов оперативки
    4. Я хочу состояния :hover :active (пожалуйста!!! пусть уж без :focus, сам его придумаю)
    5. Я хочу ссылку на пак с иконками, если они использовались в дизайне
    6. Я хочу комментарии пусть даже в .txt если там что-то из-под чего-то должно выезжать при наведении/клике и тп
    7. Я хочу группы в макете с адекватными названиями, а не сплошняком все слои и/или группы "Группа 1 и тп"
    8. Я хочу минимум скрытых слоёв/групп в шаблоне (если группа не может донести суть - писать в .txt для чего она)
    9. Я хочу каждую часть текста по отдельности, а не заголовок (60px желтый отступ от абзаца с помощью межстрочного интервала) вместе с абзацем (18px белый с межстрочным интервалом не равным заголовку). Хочу чтоб был отдельно абзац и отдельно заголовок (подзаголовок, без разницы как называть)
    10. Я хочу отдельно каждую картинку, а не слитый воедино фон шапки с изображением товара/курса/др.
    11. Я хочу большой векторный логотип отдельно от шаблона
    12. Я хочу прозрачность, чтоб сделать png, а не "Режим наложения"->"Умножение" (обязательно адекватно мягко по контуру вырезанный объект, а не ступенька из пикселей)
    13. Я хочу общаться с дизайнером, если у меня есть его контакт
    14. Я хочу мобильную версию, если она должна быть у сайта
    15. Я хочу бесшовную текстуру отдельно от документа, если есть фон, который имеет свойство повторяться (его в "Наложение узора" обычно ставят в стилях слоя)
    16. Я хочу скайп дизайнера в макете чтоб связаться с ним))) Главное нарисуйте так, чтоб его не принять за элемент сайта и не заверстать случайно

    Ну как-то так. Думаю список можно ещё пополнить, но уже о некотором сказали.

    P.S. Я не эгоист, уже давно сам придерживаюсь всех этих правил, если хотят, чтоб дизайном занимался именно я.
    Ответ написан
    2 комментария
  • Тех. требование к landing?

    serjikz
    @serjikz
    web-developer
    Если там после дизайнера переделок поуши - спрашивать у него про адаптивность нет смысла, он не знает, как она работает/будет работать. Хороший верстальщик может сам сделать адаптивность спокойно, просто об этом надо предупредить заказчика и стребовать с него деньги за дополнительную работу. ТЗ для дизайнера возможно криво было составлено, а может и вообще не составлялось
    Ответ написан
    Комментировать
  • Куда пойти после 4-ех лет фриланса?

    serjikz
    @serjikz
    web-developer
    Работаю удалённо на инфо-бизнессмена. Зарплата каждый месяц. Нашу столицу для жизни не рассматриваю - ужасный город, да и жене не понравился даже после первого дня пребывания. Прекрасно хватает на все расходы + на "отложить". Работа как раз front-end, но знание php всё же обязательно, а также частенько приходится с людьми общаться. Щас вообще запартнерились и делаем совместный тренинг.
    Ответ написан
    Комментировать
  • Как можно сохранить набор своих расширений для brackets?

    serjikz
    @serjikz
    web-developer
    Я сделал копию папки с установленными расширениями, а папку закинул на OneDrive ну и она ещё лежит на компе локально конечно. Расширения добавляю редко очень, программа минимально собрана (всего 5 расширений)
    Ответ написан
    Комментировать
  • Как вы начинаете вёрстку сайта?

    serjikz
    @serjikz
    web-developer
    Верстаю часто, верстаю много (дизайнерю тоже, но чуть меньше). 7 лет занимаюсь этим. Работал и с table-вёрсткой, и все косяки float, inline-block и тп уже давно знал, хотя и не считал это всё косяками, а воспринимал как должное. Надеюсь, кому-то помогу своим опытом (не только техническая сторона)

    1. Необходимо чётко узнать требования по проекту (будет ли он адаптивным, подразумеваются ли на нём какие-либо динамические блоки и тд и тп)
    2. Если проект - ленд на 12 экранов и за него платят 2000 рублей - заказчика вежливо отправляю куда-нибудь по-дальше, чтоб хотя бы денег накопил и совести набрался.
    3. Смотрю на дизайн (в основном достаточно быстро, минут за 10) для того, чтоб понять, какие элементы реально сделать, а какие нет (смотря какие условия опять же, явно все тутошние читатели знают про адаптивку). Если что-то unreal - чётко расписываю заказчику что не реально и почему, если контактирую с дизайнером и есть относительная свобода - прошу перерисовать конкретные элементы.
    4. Открываю ФШ и начинаю приводить в порядок все слои (с режимами наложения, с составными фонами для 1 блока и тд и тп). Если есть режим наложения на какой-то элемент (обычно Умножение чтоб не было видно белого фона) - топаем к дизайнеру и начинаем ему выносить мозг если изображение сложное (если нет - сам вырежу, если есть подобное в интернете - нахожу png и далее...) Все слои для блока конкретного сливаю воедино, тогда и макет меньше весит и вырезать проще будет (конечно зависит от ТЗ всё, мож там где-то параллакс и надо двигать туда-сюда всё)
    5. "Обрезанный" psd ложу на Creative Clound
    6. Пока всё это дело заливается - запускаю Brackets и пишу весь необходимый html вместе с текстом.
    7. Залился psd, а html уже написан. Топаем в css, открываем Extract и понеслась по стилям гонка
    8. Проверка на адаптивность и кроссбраузерность
    9. Продакшн

    P.S. Стараюсь всегда минифицировать html и css. Если есть хоть чем-то одинаковые блоки на страницах - один класс для них и только отталкиваясь от расположения меняем их. Напимер: .btn с градиентом, тенью, цветом и смещением текста, а также :hover пишу всё ближе к началу css дока, а дальше если кнопка где-то больше по отступам либо по шрифту: nav .btn {необходимые отступы}
    P.P.S. 100% комментарии. Чаще всего в css.

    Пожалуй, всё.
    Ответ написан
    8 комментариев