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

Разместил Александр / Просмотров: 24 398

Привет, друзья! Эта подборка решит много вопросов по поводу фона для вашего сайта! Тут Вы найдёте несколько самых крутых и современных эффектов для фоновых изображений и не только на 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>.

Перейти