Any fool can use a computer. Many do. — Ted Nelson
Местоположение
Россия, Москва и Московская обл., Москва

Достижения

Все достижения (9)

Наибольший вклад в теги

Все теги (78)

Лучшие ответы пользователя

Все ответы (67)
  • Что за техника рисования?

    Kiriniy
    @Kiriniy
    Графический дизайнер / Веб-разработчик
    Если вы про фон, то это полигональная сетка. Можно руками, но это медленно, можно генератором, типа этого.
    Ответ написан
  • 22 H1 на страницу это вообще законно?

    Kiriniy
    @Kiriniy
    Графический дизайнер / Веб-разработчик
    Да, с переходом на HTML5 это нормально (с оговорками) уже скоро 10 лет как. У самой страницы по прежнему должен быть собственный и единственный h1, но если в ней есть блоки <section> и в частности <article>, то они могут иметь собственную иерархию h1-h6 и это нормально.
    Ответ написан
  • Почему все так любят Bootstrap?

    Kiriniy
    @Kiriniy
    Графический дизайнер / Веб-разработчик
    Это просто популярный фреймворк и каких-то тайных преимуществ искать не надо. А популярный из-за большого коммьюнити, способного помочь советом или наработками. Как обычно, курица или яйцо.
    Ответ написан
  • Как исправить проблему с отображения фона лендинга на ios?

    Kiriniy
    @Kiriniy
    Графический дизайнер / Веб-разработчик
    Очень старая проблема и не только на iOS, а на большинстве браузеров для мобильных устройств в принципе. Суть в том, что использование background-attachment: fixed; сказывается на производительности и он тупо отключён в мобильных устройствах. Может однажды всё будет работать, но пока так. После нескольких лет поиска решения я пришёл к следующим выводам.

    Если эффект крайне необходим, вы можете использовать технологию параллакса (есть бесплатные плагины), когда позиционирование элемента изменяется динамически во время прокрутки, либо использовать отдельный пустой div, где вместо background-attachment: fixed; ставите position: fixed; этому пустому блоку и регулируете всё через z-index.

    Если эффект не так важен и вы согласны пойти на компромисс с мобильными, то можете воспользоваться моим личным вариантом. На компьютерах эффект работает как должен, а на мобильных — фон просто растягивается по высоте блока и двигается вместе со страницей.

    HTML
    Тут ваша разметка шапки, но с разложенными по классам свойствами CSS.
    <header class="main-header bg-cover bg-fixed">...</header>


    CSS
    Из своего основного класса убираете всё, что касается фона, кроме картинки. Естественно, если вам там ещё что-то нужно, вроде высоты, флоатов и тд., сами решите. Теперь добавляете два класса, которые пойдут как фреймворк и могут использоваться многократно. Один растягивает картинку (центрует и без повторений), другой делает тот самый эффект fixed.
    .main-header {background-image: url(img/picjumbo-bg5.jpg);}
    .bg-cover {background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-background-size: cover;}
    .bg-fixed {background-attachment: fixed;}


    JS
    Добавляете этот код в шаблон или в файл скриптов. Если ваш сайт открывают на мобильных устройствах, скрипт находит все блоки по классу bg-cover и убирает из них класс bg-fixed, если он есть. Фоновая картинка просто будет скролиться со всем остальным.
    var device = navigator.userAgent.toLowerCase();
    var mob = device.match(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/);
            if (mob) {
                $(".bg-cover").removeClass("bg-fixed");
            }
    Ответ написан