Задать вопрос
  • Микроразметка сайта недвижимости?

    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 и еще куча всего. Так что открывайте свой сайт, открывайте документацию, и прям по списку смотрите, какие свойства соответствующих сущностей есть у вас на страницах.
    Ответ написан
    Комментировать
  • Как составить такое выражение в css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    У вас на картинке 2 раза по 50% и 2 раза по 100%, можно сделать как-нибудь так:

    div {
        display: inline-block;
        float: left;
        width: 50%;
    }
    
    div:nth-of-type(4n),
    div:nth-of-type(4n-1) {
        width: 100%;
    }
    Ответ написан
    Комментировать
  • NPM + Gulp или как не сойти с ума?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Не так давно сталкивался с похожей проблемой. После обновления npm начал переодически терять права на запись в локальную папку node_modules, в результате половина пакетов оказывались недоустановленными. Обнаружилось это случайно и пару дней костылилось запуском всего, что можно, от администратора. Причину так и не узнал, вернулся к своему линуксу и старой версии npm.
    Ответ написан
  • Если UI-дизайнер должен во время создания интерфейса думать об удобстве использования, зачем разделение на UI\UX?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Я вас еще больше запутаю, сказав, что UX (user experience, эмоции, когда пользователю приятно) - это не то же самое, что usability (когда пользователю удобно). Хороший дизайнер должен понимать что-то и в том и в другом, вроде бы это всегда так было. А по поводу названий - это мода. Вот дизайнеры сейчас называют себя UI/UXами, админы в свитерах с оленями - DevOpsами, верстальщики-бутстрапщики называют себя frontend-developerами, а чуваки, пишущие на erlang - просто царями. И никого не парит зачем эти слова были придуманы - в данной ситуации они просто показывают "смотрите какой я крутой".

    В крупных компаниях по идее должно существовать разделение труда. Каждая из этих профессий делится уже на более узкие специализации, так в дизайне уже один человек будет думать о том, как что будет выглядеть, второй - как будет удобно, а третий нарисует красивых анимаций для взаимодействия с пользователем.
    Ответ написан
    1 комментарий
  • Как сделать rss на сайте без движка?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Нуждаемся в rss ленте, но у сайта нету движка. Т.е. html+css+js...на сайте ежедневно создаются записи/страницы:)

    Мсье знает толк в извращениях... Быть может стоит хотя бы какой-нибудь jekyll прикрутить? Заодно и лента будет сама генерироваться.
    Ответ написан
    Комментировать
  • Правильно ли я применил адаптивную верстку для мобильных устройств?

    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);
    }
    Ответ написан
    Комментировать
  • Добавить CSS-анимация?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    желательно на css

    Это возможно только если предположить, что лопасти прямые (т.е. целиком находятся в одной плоскости) и поиметь картинку "вид сверху на лопасти". Тогда можно с помощью CSS трансформаций развернуть ее в нужном направлении и крутить сколько влезет с помощью анимации с animation-iteration-count: infinite.
    Ответ написан
    Комментировать
  • Как сделать меню с задержкой при 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

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

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    .item_class.\--item {}
    С двух дефисов имя класса начинаться не может (некоторые браузеры умеют использовать такие имена, но не стоит на такое расчитывать). А хак этот нужен для того, чтобы обмануть CSS валидатор.
    Ответ написан
    2 комментария
  • Как реализовать такие границы у секции?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Конкретно в вашем примере - там просто большая картинка (png) с волной ставится в конец секции (в инспекторе видно). Можно и на SVG делать волны как в этом примере, это позволит накладывать разные эффекты, но нужно будет больше думать, по крайней мере уметь эту волну нарисовать.
    Ответ написан
    Комментировать
  • Как использовать z-index?

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    SmartApe (не реклама) соответствует. Многие знакомые туда перешли, пока никаких проблем не было (как в смысле стабильной работы, так и в юридическом плане).
    Ответ написан
    Комментировать
  • Как сверстать такую галерею?

    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 и плагин сверху, как тут некоторые советуют.
    Ответ написан
  • Как работает :last-child вместе c :not?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Такое окончание достойно цитаты:
    <div class="cry2"></div>
                  </div>
                  <div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    От разметки, которая предшествует этому, и правда плакать хочется...

    А по делу - то, что вы описываете, на чистом CSS сделать не получится, а если бы и можно было - это был бы очень непрактичный костыль. Лучше почитайте про какую-нибудь методологию, rscss или модный нынче БЭМ - это избавит от подобных вопросов, а код станет гораздо более структурированным.
    Ответ написан
    Комментировать
  • Фигура выходит За пределы блока?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Я взял прямоугольник и просто повернул его, но он выходит за пределы item`а.

    Ну так transform так и работает. Ничего странного тут не произошло.
    Ответ написан
    2 комментария