8 приемов работы с CSS: параллакс, «липкий» футер и другие

[croupier]

Подглядел свойство object-fit — очень полезное, спасибо! Как-то не встречал раньше.

Вариант с липким футером ещё можно организовать так:

#document { 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
}

[monochromer]

Пример с чекбоксами на MacOS в Chrome 72:

[sinneren]

Ибо всё это грязные хаки, как и почти всё во фронтенде современном(и не очень).

[funca]

С паралаксом не все так просто. Демка CSS паралакса не работает с мобильном хроме, а JS версия заметно лагает. В общем получился пример как делать не надо. Сможете сделать работу над ошибками и показать в следующей статье нормальное решение?

[Fess_blaga]

Если не интересует IE, то вот шикарное решение на чистом css.

Даже был перевод на хабре.

[Mabusius]

Ага, только при этом футер может закрывать собой часть контента. Надо еще «болванку» в контенте под него городить.

[xPomaHx]

Есть другие способы, без указания высоты в пикселях, так как это грязный костыль.

[sinneren]

Только не будет работать с динамической высотой футера(а она в более половины случаев такая). А тут работает.

[sinneren]

Динамический, это сколько нужно, столько и будет. Не о мобильниках речь.

[Dolios]

На хабре опять дизайн поменяли?
Как понять, что это перевод и где ссылка на оригинал?
medium.com/@bretcameron/parallax-images-sticky-footers-and-more-8-useful-css-tricks-eef12418f676

[zeallot]

Спасибо за Night Mode, object-fit и режим смешивания — не знал об этом. Теперь надо не забыть и применить где-нибудь.
Вот поддержка object-fit, если что.

[BelkinVadim]

Параллакс-изображения на CSS обычная фиксация фонового изображения. А вот именно настоящий параллакс на чистом CSS реализуется примерно так — Performant Parallaxing

[Rastishka]

Это похоже первый пример который я увидел, который хорошо работает на iOS.
Спасибо.

[POPSuL]

Постоянный режим Night Mode

Почему то он у меня сработал только на хабре нормально. Например, в том же яндексе он работает как-то вообще странно, фон как был белым, так и остался. На других ресурсах такое же поведение.

Я пытался разобраться почему так, но так и не получилось