Ответы пользователя по тегу CSS
  • Как сделать ховер появления элемента с css-анимацией без использования св-ва position?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Чтобы просто поправить косяк с overflow, достаточно исправить одну строчку:
    .right{
    	position: fixed;
    }

    Но вообще у вас сама верстка не совсем правильная: position'ы не очень логично прописаны, ширина/высота блоков тоже. Вот чуть отредактированный pen.
    Ответ написан
    7 комментариев
  • Какие сеточные фреймворки flexbox используете?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Очевидно, Bootstrap v4 - это первое что приходит в голову.
    Еще недавно нашла Flex Layout Attribute, уж больно интересен этот концепт избавления html от кучи перечислений классов. Однако потестить пока не успела, но может вам пригодится.
    Ответ написан
    1 комментарий
  • CSS Desktop First фреймворк?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Bootstrap в четвёртой версии предусматривает вёрстку Desktop First, можно выбрать подходящие брекпойнты: getbootstrap.com/docs/4.0/layout/overview
    Ответ написан
    Комментировать
  • Как правильно сверстать блоки в таком порядке?

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

    lambesis
    @lambesis
    Слабоумие и отвага!
    Рекомендую очень внимательно ознакомиться с этой статьей: 100% правильный способ делать контрольные точки в CSS
    В ней ответы на все вопросы и описан самый логичный и правильный подход к медиа-запросам.
    Ответ написан
    Комментировать
  • Как выглядит современная верстка?

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

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

    lambesis
    @lambesis
    Слабоумие и отвага!
    Уточните ваш вопрос.
    Если у вас есть подобный чатик, который нужно сделать выезжающим, то это проставив связка (CSS Transitions + 5-строчный скрипт отлавливающий клик по кнопке "чат").
    Другое дело, если вам нужно непосредственно этот сайт написать и заставить работать. Что именно вам нужно?
    Ответ написан
  • Как не применять определенные стили css для mobile?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Если я вас правильно поняла, то вам необходимо использовать подобный медиа-запрос:
    @media only screen (min-width: 544px){ 
    .element: { background: red; }
    }

    Который обозначает, что у данного элемента фон будет красным только если ширина браузера будет 544px или выше (т.е. вплоть до фул-hd, если сами не поставите ограничение).
    Почитать подробнее можно тут.
    Либо запросом (max-width: ....) пропишите непосредственно то, как как ваши блоки должны выглядеть на мобильном устройстве.
    Ответ написан
    3 комментария