Ответы пользователя по тегу HTML
  • Как бы вы сверстали такой блок?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как говорится, ябзаверстал (за магические числа в примере ответственности не несу, был пьян).

    Можно взять базовую разметку:
    .project-timeline
        .step
            .number 1
            .content Lorem ipsum dolor sit amet.
        .step
            .number 2
            .content Lorem ipsum dolor sit amet.
        ....


    С помощью CSS-трансформаций перевернуть половину элементов, а их содержимое перевернуть еще раз.
    получится что-то такое
    a3d02b15825a4eb58aa11fd45a526e2b.png


    На маленьких экранах все повернуть еще раз.

    получится вот так
    3bd5d493f63e43fd98b845854a6ba5e9.png


    ---
    CodePen
    Ответ написан
    Комментировать
  • На разных страницах по разному работает css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    На главной странице в 728 строке stylesheet_custom.css подключается второй раз.
    Ответ написан
    Комментировать
  • Несколько вопросов о шрифтах и pagespeed insight?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    1. caniuse.com/#search=ttf, caniuse.com/#search=otf.
    2. Я бы склонялся к woff. Ну или woff в сочетании с eot, если нужны старые IE.
    3. Google PageSpeed Insight вообще много на что ругается. Такой уж у него характер. В первую очередь под сжатием обычно понимают удаление всех ненужных символов из шрифта (у вас на сайте редко когда будет больше 1-2 языков, так что и полный набор обычно не нужен).
    4. Стоит ли вообще учитывать эти критерии , на которые ругается PageSpeed Insight? - Нет. Этот тест показывает вам узкие места, на которые стоит обратить внимание, но в первую очередь вы должны смотреть своими глазами. Я видел сайты, которые загружались меньше секунды и при этом имели 30-40 баллов по оценке этого теста, а то и меньше, а видел и такие, что они грузились 8-10 секунд при оценке в 95-100.
    Ответ написан
    1 комментарий
  • Из-за чего может лагать легкая анимация css3 на сайте?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Используйте transform: translateX + will-change вместо того, чтобы анимировать свойство left при абсолютном позиционировании.
    Ответ написан
    Комментировать
  • Оцените верстку начинающего верстальщика?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    По внешнему виду:
    Адаптивность есть, это хорошо. Есть мелкие проблемы, которые портят впечатление (где-то что-то обломалось, где-то что-то не влезло):
    240b345906f84e7ca5af8252d9b00964.png51d00024eb5c4c8896e8e888ce8ea000.png821cc5a47651408c8728229982fe1521.png
    и.т.д. Также стрелка снизу кажется не по центру, отступы какие-то странные местами (макет не смотрел, это чисто личное впечатление). Фокус на элементах практически не заметен. Стоит поработать над этим. Обводка синим - бяка.

    По коду:
    - Отсутствует система в именовании классов. Почитайне про БЭМ или RSCSS.
    - Использовать #id в CSS не стоит. Это дурной тон и источник проблем.
    - Из-за вышеупомянутого отсутствия системы классов CSS читать невозможно + потенциальные проблемы с перебиванием стилей в неожиданных местах.
    - Много магических чисел в CSS (321px, 44.148936%, 381px...). Практически всегда можно избежать этого.
    - Нет ресета/нормалайза. Тоже потенциальные проблемы.

    Поправьте вышеупомянутые проблемы. После этого приходите к использованию препроцессоров (можно начать с LESS - он самый простой, но в 99% случаев его возможностей достаточно). Ну и JS изучайте, без него верстальщику не выжить.
    Ответ написан
    1 комментарий
  • Почему не получается поместить текст в рамках тега span?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    И, разумеется, <br><br> тут совсем ни при чем. Быть может стоит их убрать?
    Ответ написан
    Комментировать
  • Как правильно брать данные с макета?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Это проблемы макета или верстальщик должен сам подбирать все? Сетки вроде нет; Отступы кажись на глаз надо делать.

    Я бы спросил это у самого дизайнера. Если он нарисовал все как попало и хочет pixel-perfect - это его проблема, нужно или потребовать переделать или попросить больше времени на работу. В перспективе - научить его делать стайлгайды. При их использовании вопрос "что-то тут немного поехало на макете" уже не стоит так остро - вы смотрите в стайлгайд и берете размеры, шрифты, цвета из него. Я как-то раз делал эксперимент по использованию упрощенно-извращенного подхода к вопросу размеров и могу сказать, что после написания статьи он более-менее обкатался (на нормальных сайтах, а не на надуманном примере) и вполне может применяться в условиях отсутствия дизайнера-перфекциониста.
    Ответ написан
    Комментировать
  • Как сделать смену изображения через каждые 5 сек?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    /* There is no JS scripts! */

    На чистом CSS - никак. Просто потому, что CSS не позволяет "чекнуть" input. Вообще на CSS много чего нельзя сделать, я уже как-то раз приводил список аргументов в пользу слайдеров на скриптах.
    Ответ написан
  • Что значит "отличные знания html/css"?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Know it all.

    А вообще это понятие сильно зависит от того, кто проводит собеседование, вплоть до самых упоротых случаев, когда под "отличными" знаниями будет пониматься то, что вы решили какой-то вопрос таким же образом, как это привык делать собеседующий, а не придумали свой вариант (возможно даже более практичный, но другой).
    Ответ написан
    1 комментарий
  • Почему так странно работает max-wdith в медиа запросе css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Подобная фигня происходит из-за неправильных округлений (с браузерами такое бывает довольно часто, правда обычно проявляется в вещах вроде calc() в css). Вот тут есть статейка по теме media-запросов, и вывод из нее довольно простой - используйте или только max-width или только min-width и все будет хорошо.
    Ответ написан
    1 комментарий
  • Микроразметка сайта недвижимости?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Не видя самого сайта сложно угадать что там есть, и что нужно размечать. Расскажу как по идее должно быть, а вы там уже примените это к своим реалиям.

    Есть (по идее) две категории сущностей - сама организация, которая каталог предоставляет, и собственно предложения о продаже. Если выражаться в терминах schema.org, то первая сущность относится к Thing > Organization. У нее есть address, description, email, могут быть events, foundingDate, location, logo, telephone, image... и еще много всего, что эту организацию описывает. Сами предложения о продаже недвижимости более всего подходят к Thing > Intangible > Offer, а у оффера могут быть availability, availabilityEnds, availabilityStarts, category, offeredBy, price, priceCurrency, priceValidUntil, review, description, image и еще куча всего. Так что открывайте свой сайт, открывайте документацию, и прям по списку смотрите, какие свойства соответствующих сущностей есть у вас на страницах.
    Ответ написан
    Комментировать
  • Правильно ли я применил адаптивную верстку для мобильных устройств?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Правильно ли я применил адаптивную верстку

    Сам факт задания такого вопроса заставляет усомниться в правильности, и с энтузиазмом найти косяки. Так вот: вы совсем забыли про то, что на телефоне, как бы так сказать, может быть низкий экран.
    В результате получилось...

    Упс..
    d7d0f845e9d14a1eb1d0b248e9e321b7.png
    Уупс..
    32fb9c1d02db4490b3061b775c26f941.png
    Ну ежик....
    113a5546b37249eabeda56ba1641b8df.png
    Думаю идея понятна. Избавьтесь от жестких привязок к vh.


    А еще отступы везде немного плавают (не знаю, может дизайн такой, может я привередливый).

    А вот это
    function dropOne() {}
    function dropTwo() {}
    function dropThree() {}
    function dropFour() {}

    Можно было бы и получше оформить.
    Ответ написан
    Комментировать
  • Как сделать эту крутую штуку на CSS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    На чистом CSS такое сделать не получится. Проще всего использовать волну (верхнюю ее часть) в виде SVG картинки (пример). Надеюсь проблем с тем, чтобы нарисовать ее одной кривой, не возникнет.
    Ответ написан
    2 комментария
  • Где посмотреть к каким свойствам можно ставить префиксы для кроссбраузерности?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Какие префиксы нужны, можно посмотреть на caniuse.com.
    А чтобы голову себе всем этим не забивать - нужно использовать autoprefixer.
    Ответ написан
    Комментировать
  • Как реализовать такую css анимацию?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Используйте другую функцию (animation-timing-function):
    везде_где_есть_эта_анимация {
        animation: flipOutRight 7s cubic-bezier(0,1,0,1);
    }
    Ответ написан
    Комментировать
  • Как сделать меню с задержкой при hover (js)?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Судя по стилям, вы вообще что-то не то и не туда добавляете. Если хотите решить вопрос с помощью js, для начала уберите все, что сязано с :hover из css. На событие hover будет добавляться отдельный класс "hovered":
    .b-content-block__menu ul li.hovered > .b-content-block__menu__submenu { ... }
    .b-content-block__menu ul li.hovered > .b-bottom-submenu { ... }


    Теперь на упомянутое событие этот класс добавляем:
    function(){
        setTimeout(function() {
            $(this).addClass('hovered');
        }, 
        500);
    },


    Не работает, что логично. Выходов два, первый:
    function(){
        var _this = this;
        setTimeout(function() {
            $(_this).addClass('hovered');
        }, 
        500);
    },


    Второй - использовать стрелочную функцию. Надеюсь гуглом пользоваться умеете. В любом случае нужное поведение будет получено.

    А теперь о боли...

    Если вы используете БЭМ, не делайте вот так, пожалуйста:
    .b-content-block__menu ul li .b-content-block__menu__submenu


    А что вот это такое?
    .b-content-block__menu ul li:hover > b > a

    Или используйте БЭМ по фен-шую или не используйте вообще, смесь всего в одной куче - это ужасно.

    И, к слову о поведении меню, - оно должно быть доступным для клавиатуры (должна быть возможность протабать все ссылки в нем. Подумайте на досуге как это сделать.
    Ответ написан
    Комментировать
  • Как использовать z-index?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    header > .container {
        position: relative;
        z-index: 1;
    }
    Ответ написан
    1 комментарий
  • Как сверстать такую галерею?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можете отталкиваться от этой демки. Пропорции картинок немного искажены (на глаз сложно угадать), но в остальном - то, что вам нужно.
    Ответ написан
    Комментировать
  • Как сделать footer внизу страницы на экране с малым количеством информации?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как сделать footer внизу страницы... Решаемо ли это?

    И в восьмой раз я приложу к ответу эту демку... Досчитаю до 13 и начну жаловаться на подобные вопросы.
    Ответ написан
  • Как сделать фиксированное меню?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    .menu {
        position: sticky;
        top: 0;
    }

    Почитать про это можно вот тут. И приучайтесь использовать новые возможности CSS вместо того, чтобы прикручивать целую jQuery и плагин сверху, как тут некоторые советуют.
    Ответ написан