10 исходников для создания крутого фона для сайта на CSS

24 655 любопытных

Привет, друзья! Эта подборка решит много вопросов по поводу фона для вашего сайта! Тут Вы найдёте несколько самых крутых и современных эффектов для фоновых изображений и не только на CSS и JS. В общем быстрее всё скачивайте!

Спасибо https://speckyboy.com и рекомендую:

Изменение цвета фона на CSS

See the Pen <a href="https://codepen.io/giana/pen/PqVbRr/">CSS background change on scroll</a> by Giana (<a href="https://codepen.io/giana">@giana</a>) on <a href="https://codepen.io">CodePen</a>.

Перейти

Анимационный фон на CSS и JS

See the Pen <a href="https://codepen.io/jonathan/pen/YyMKMz/">GSAP Animate CSS background-position</a> by Jonathan Marzullo (<a href="https://codepen.io/jonathan">@jonathan</a>) on <a href="https://codepen.io">CodePen</a>.

Перейти

Как сделать перекос для фона на чистом CSS

See the Pen <a href="https://codepen.io/MKasio/pen/kEypt/">skew bg</a> by Marcel (<a href="https://codepen.io/MKasio">@MKasio</a>) on <a href="https://codepen.io">CodePen</a>.

Перейти

Плавные переходы фоновых изображений на CSS

See the Pen <a href="https://codepen.io/klesht/pen/vEOjrz/">Fullscreen CSS Background Image Slideshow</a> by Kevin Lesht (<a href="https://codepen.io/klesht">@klesht</a>) on <a href="https://codepen.io">CodePen</a>.

Перейти

Анимированный градиент

See the Pen <a href="https://codepen.io/quasimondo/pen/lDdrF/">Animated Background Gradient</a> by Mario Klingemann (<a href="https://codepen.io/quasimondo">@quasimondo</a>) on <a href="https://codepen.io">CodePen</a>.

Перейти

Размытие при прокрутке

See the Pen <a href="https://codepen.io/zrichard/pen/wEFBd/">Zoom and Blur background Image</a> by Zach Richard (<a href="https://codepen.io/zrichard">@zrichard</a>) on <a href="https://codepen.io">CodePen</a>.

Перейти

Световой фильтр для фонового изображения

See the Pen <a href="https://codepen.io/randseay/pen/bVWEPJ/">CSS background image stacking with fade and overlay</a> by Rand Seay (<a href="https://codepen.io/randseay">@randseay</a>) on <a href="https://codepen.io">CodePen</a>.

Перейти

Увеличение изображения при наведении

See the Pen <a href="https://codepen.io/ccrch/pen/yyaraz/">Zoom + pan the image on hover & mouse move</a> by Krz Szzz (<a href="https://codepen.io/ccrch">@ccrch</a>) on <a href="https://codepen.io">CodePen</a>.

Перейти

Право выбора при наведении

See the Pen <a href="https://codepen.io/karks88/pen/RLVedz/">CSS Background reveal</a> by Eric Karkovack (<a href="https://codepen.io/karks88">@karks88</a>) on <a href="https://codepen.io">CodePen</a>.

Перейти

Изменение фонового цвета при прокрутке

See the Pen <a href="https://codepen.io/jackharner/pen/bdPmQM/">Changing Background Color on Scroll</a> by Jack Harner (<a href="https://codepen.io/jackharner">@jackharner</a>) on <a href="https://codepen.io">CodePen</a>.

Перейти