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

    lambesis
    @lambesis
    Слабоумие и отвага!
    Попробуйте так:
    @media(min-width: 427px) and (max-width: 768px){ 
    .container{
    zoom: 2;
    }
    }
    Ответ написан
  • Нелогично работает overflow-x?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Overflow всегда обрезает контент и по вертикали и по горизонтали.
    Свойства "overflow-x" и "overflow-y" управляют только полосой прокрутки, обрезаться будет всегда со всех сторон.
    Ответ написан
    Комментировать
  • Целесообразно ли использовать в качестве bacground-image сразу весь задник макета лэндинга?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Зависит от макета, покажите его если есть возможность.
    Вообще так лучше не делать, если фон не бесшовный вы намучаетесь с ним потом на стадии адаптива.
    Ответ написан
    Комментировать
  • Увеличивает ли padding ширину блока?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Если ширина фиксирована, она меняться не будет. Блок внутри будет подстраиваться под родителя.
    Если внутреннему блоку жестко задать ширину превышающую ширину родительского - он будет вываливаться, но ширина родительского блока все равно останется 300px,
    Ответ написан
    2 комментария
  • Как убрать белое пространство под фоном у контейнера?

    lambesis
    @lambesis
    Слабоумие и отвага!
    На счет белой полоски: она появляется из-за того что .slide растягивается и на всю ширину, и на всю высоту экрана, а фон при этом позиционируется по широте (background-size: 100%;). Картинке просто высоты не хватает чтобы заполнить оставшееся место. Вы правильно использовали background-size: cover. Одна из сторон в любом случае будет обрезаться если вам принципиально нужен параллакс на все окно, но вы можете управлять этим.

    В этом примере картинки занимает все доступное пространство, но их пропорции зависимы от высоты экрана.
    Ответ написан
    Комментировать
  • Как сделать полоску отслеживания меню и эффект наложения фона на фон?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Там много плагинов, которые объеденили и дописали свой js, с помощью которого все реализуется. Эффект при скролле - это параллакс, который завязан на поэкранную навигацию (плагин fullPage.js).
    Зайдите на этот сайт, откройте Chrome Dev Tools (F12), и посмотрите ресурсы сайта, если углубиться в js-файлы, то станет понятно что за что отвечает.
    Скриншот
    5bc11f25980ac126416953.png
    Ответ написан
  • Как эспортировать svg из фотошопа?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Не стоит пытаться экспортировать svg из фотошопа, это гиблое дело.
    Проще так: копируем SVG-код векторного слоя, создаем файл.svg, вставляем в него скопированный код. И тогда все работает идеально. Этот метод так же будет работать если векторному слою заданы какие-нибудь параметры наложения, типа градиента.
    5ac3b107897d4571952566.png
    Ответ написан
    Комментировать
  • Svg и его друзья. Что с ним не так?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Я столкнулась с такой же проблемой как и у вас, и методом проб и ошибок поняла в чем дело. Вы правы, svg из фотошопа нужно "специально" сохранять. Самую простую форму/вектор фш экспортирует криво. Но если просто скопировать SVG-код слоя, создать файл.svg, и потом закинуть в него скопированный код, то все работает идеально.
    5ac3b107897d4571952566.png
    К слову этот метод прекрасно работает даже когда формам заданы какие-нибудь параметры наложения.
    Ответ написан
    Комментировать
  • Есть ли сервисы для рисования интерфейсов?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Подборка сервисов для прототипирования
    Ответ написан
    Комментировать
  • Как правильно сверстать блоки в таком порядке?

    lambesis
    @lambesis
    Слабоумие и отвага!
    У меня получилось решить эту задачу через гриды: линк на codepen. По высоте выстраивается, порядок соблюдается, на мобилке превращаются в обычную колонку.
    На счет поддержки браузерами - гриды давно вошли в спецификацию, простейшие функции поддерживаются уже в 87% браузеров.
    Ответ написан
    2 комментария
  • Как выглядит современная верстка?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Как человек, который был в той же ситуации, рекомендую вот что: в первую очередь, самым идеальным вариантом будет найти работу верстальщиком, как уже сказали выше. Пусть не за очень большие деньги, но найти ее надо обязательно. Вы не поверите, насколько быстро вы будете учиться, т.к. задачи перед вами будут стоять совершенно реальные, и каждый день будет что-то новое чего вы еще не делали, в отличии от тренировочных макетов. Таким образом у вас накопится хороший опыт реальной разработки.
    Далее, настоятельно рекомендую постоянно гуглить. Абсолютно по всем вопросам и сложностям которые у вас возникают. Повторюсь, именно гуглить, не задавать вопрос на тостер (не воспринимайте в упрек :)), а самостоятельно искать ответы, решения и туторы. В будущем это очень поможет вам быстро находить всю необходимую информацию, а так же грамотно и четко формулировать соответствующий вашей задаче запрос.
    Так же, советую постоянно читать книги и статьи из мира фронтенда. Постоянно!
    Навскидку из того что пришло в голову скажу четыре сайта.
    Всем известный хабр: открываем тег "html" и внимательно изучаем все статьи подряд, делая для себя пометки в блокноте и добавляя в закладки полезные статьи, которые могут пригодиться в будущем, отмечая для себя темы которые нужно изучить в будущем и т.д. Даже касательно вашего вопроса о технологиях - полхабра забито статьями на эту тему.
    Второй - css-live.ru, шикарный ресурс с русскоязычным контентом, огромным количеством переводов каяественных иностранных статей, и очень понятной подачей материала.
    Третий - webref.ru (бывший htmlbook). Лучший справочник по html и css, а так же на нем множество уроков, статей и полезных материалов и бесплатных обучающих курсов.
    И четвертый - frontender.info. Изначально может показаться что там все связано с Js, но на самом деле это не так.
    Помимо всего этого, порекомендую вам курсы от LoftSchool. Они лучшие, честно. За два месяца с ними вы изучите больше чем самостоятельно за полгода, и я не утрирую.

    И на последок, вам нужен наставник. Человек, который подскажет решение если в гугле не удается найти ответ, придумает ТЗ для тренировки, подскажет где ошибка в коде и, если что, направит в нужное русло. Если хотите, могу вам в этом помочь, я люблю делиться знаниями :)
    Ответ написан
    2 комментария