Задать вопрос
serjikz

Сергей ZSA

web-developer
Ответы

  • Как поднять блоки fancybox?

    serjikz
    @serjikz
    web-developer
    Какой-то не правильный fancybox. Если не хочется пробовать делать подругому - #fancybox-wrap изменить top значение и приписать 50% !important и position fixed ну и transform translate(0, -50%) для позиционирования по центру.

    А вообще я беру стандартный fancy отсюда из исходников: webcomplex.com.ua/jquery/delaem-galereyu-s-jquery-...
    Ответ написан
    Комментировать
    Комментировать

  • Как быстро отредактировать статический сайт?

    serjikz
    @serjikz
    web-developer
    Total commander если редактирования не слишком значителны
    Ответ написан
    4 комментария
    4 комментария

  • Как в JS задать css правило и пересчитывать его при любом изменении?

    serjikz
    @serjikz
    web-developer
    У вас наверно в px позиционирование сверху. Оно будет всегда неподвижным если вы так задали, потому что top всегда считается от верхней части родителя (будь то body или relative), а они будут стоять соответственно всегда на своём месте вне зависимости от окна браузера (верхняя граница на своём месте)

    Коряво объяснил, поздно уже, спать охота. Мож кто может - объяснит лучше.

    Если вам хочется поменять расположение элемента при меньшем окне - попробуйте использовать % вместо px в указаниях top. Если нужно менять под конкретный размер экрана - стоит посмотреть на @ media запросы в CSS. JS в вашем случае думаю не нужен совсем. К примеру при max-height: 700px делать у определенного элемента top больше/меньше ну и тп.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как верстается этот элемент?

    serjikz
    @serjikz
    web-developer
    Если не нужна адаптивная вёрстка - просто обрезали по край нижний в центре изображения и в jpg вместе с синим фоном всё залили.
    Нужна адаптивка - говорили уже доп блоки или before + after
    Или если у вас скиловый дизайнер там прямо это рисовал (кого я обманываю...) то тогда он предусмотрел уже адаптивный вид для этого блока и вам можно будет (если в адаптиве тоже такой треугольник) просто при меньшем max-width в media фигачить новый background за место нынешнего (короч первый способ, просто пхаем другой фон в блок).

    Да, первый способ - изврат. Можно и на svg сделать и тд и тп. Просто как вариант безгеморойный. Часто пользуюсь если сайт и хозяева его будущие не собираются звезд с неба хватать.
    Ответ написан
    Комментировать
    Комментировать

  • Какие вы знаете интересные сайты компаний занимающихся web дизайном?

    serjikz
    @serjikz
    web-developer
    Вы ещё не с нами?! dribbble
    Ответ написан
    Комментировать
    Комментировать

  • Сколько вариантов начертаний шрифтов лучше использовать на сайте?

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

  • Какие расширения для Brackets вы ставите?

    serjikz
    @serjikz
    web-developer
    Давно лазил по расширениям, гуглил специально какие вообще для него есть расширения интересные. В итоге Emmet, Working File Tabs и Beautify (последний нужен просто из-за того что часто лазию в чужой код). На php пишу, но чет не знаю какие ошибки можно там прослеживать с помощью расширений. Толку от этого? Если вы пропускаете ; или где-то кавычку не закрыли - с опытом придет, надоест лазить в браузер просто чтоб смотреть где ошибка, а более серьёзное что-то у меня не мог выловить даже phpDesigner, о Brackets я вообще молчу.
    Ответ написан
    Комментировать
    Комментировать

  • Что верстальщики хотели бы донести до веб-дизайнеров?

    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 комментария
    2 комментария

  • Создание своего веб-проекта - где найти практическую часть, что почитать?

    serjikz
    @serjikz
    web-developer
    Наверняка все будут ругаться, но я таки посоветую. Евгений Попов курс по созданию интернет-магазина. Это если вам надо структуру знать, понимать че к чему и тп (технически хороших знаний там не много, но мне и они помогли в своё время). Также кроме этого есть курсы Специалист-а из бауманки. У них там вовсе всё шикарно.
    Ответ написан
    2 комментария
    2 комментария

  • Как checkbox сделать не активным?

    serjikz
    @serjikz
    web-developer
    if(ваше_условие_с_истиной) $(".my_input").attr("disabled");

    Примерно так. Без вашего кода не могу сделать пример более понятным.
    Ответ написан
    Комментировать
    Комментировать

  • Тех. требование к landing?

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

  • Как заскриншотить дизайн от шапки до ног если страница уходит за границы экрана?

    serjikz
    @serjikz
    web-developer
    developer edition FOJHqkydssMeKHbFjlvJ.jpg
    Ответ написан
    Комментировать
    Комментировать

  • Какие есть особенности вёрстки под Edge?

    serjikz
    @serjikz
    web-developer
    Сейчас никаких. Лет через 5-7 появятся.
    Ответ написан
    Комментировать
    Комментировать

  • Какие правила нужно соблюдать чтобы html-разметка была правильной?

    serjikz
    @serjikz
    web-developer
    1. Проверка на валидность
    2. Табуляция
    3. Как можно меньше использования тегов. К примеру
    <div class="logo"><img src="logo.png"></div> лучше делать так <img src="logo.png" class="logo">
    4. Подключение скриптов и стилей внизу страницы перед закрывающим body
    5. Отсутствие inline стилей в документе
    6. Все style и script в файлах, а не в html (я иногда пишу js в доке, если его мало)
    7. ID - единственный на странице, class - множественный
    8. Вложенность тегов, о которой вы говорили
    9. Отсутствие лишних пробелов Пример:
    <div>
     <img>
____
     <a></a>
</div>

    ___ - пробелы, которые надо удалить, оставив пустую строку.
    10. Пробелы в атрибутах. К примеру <a class=".."> но о них вам валидатор скажет сразу, поэтому не вижу смысла описывать правила валидности

    Ну наверно и всё.
    Ответ написан
    3 комментария
    3 комментария

  • Как определить элемент, по которому был совершен клик?

    serjikz
    @serjikz
    web-developer 
    $("a").bind("click", function(){
alert($(this).attr("class"));
});
    Ответ написан
    5 комментариев
    5 комментариев

  • Стараетесь ли вы использовать flex?

    serjikz
    @serjikz
    web-developer
    Активно поддерживаем с командой, если нет отмашки на поддержку старых браузеров. Если есть - увеличение цены.
    Ответ написан
    Комментировать
    Комментировать

  • Куда пойти после 4-ех лет фриланса?

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

  • Что для начала изучать для адаптивности сайта, @media или Bootstrap?

    serjikz
    @serjikz
    web-developer
    Как стать верстальщиком в краткие сроки? вот тут немного про адаптив писал. Bootstrap по не нужен, личное мнение.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать замену текста в блоке2 при наведении на блок 1?

    serjikz
    @serjikz
    web-developer
    Советую разнести цены и размер в разные data- атрибуты. После этого можно будет их вытягивать вот так:
    $(".box1").bind("hover", function(){
    var s1 = $(this).attr("data-s1"); //к примеру тут размер
    var s2 = $(this).attr("data-s2"); //и так далее
    $(".s1").text(s1);
    $(".s1").text(s2);
    });
    Можно конечно вытянуть прямо вот так var data_p = $(this).attr("data-prise"); и потом строку разбивать так, как вам надо на массив и потом массив вставлять в text(), но разбиение вы сами тогда сделайте. Сейчас некогда этим заниматься.
    Ответ написан
    1 комментарий
    1 комментарий

  • Почему Safari не корректно работает с flexbox?

    serjikz
    @serjikz
    web-developer
    делаю так для поддержки старых браузеров и приколов с вебкитом и прочими:
    display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;


    Это всё вместо
    flex-wrap: wrap;
display: flex;
justify-content: space-between;
    Ответ написан
    3 комментария
    3 комментария