HTML часть
Адаптивная верстка
Пример на github
Читать далее «CSS трансформация с использованием transform»CSS трансформация с использованием transform
Переворачиваем карточку на 180 градусов с помощью CSS
Анимация градиента с плагином granim.js
Предварительно необходимо скачать и подключить сам скрипт https://sarcadass.github.io/granim.js/
HTML часть
CSS часть
#canvas-basic,
#canvas-radial {
position: relative;
display: block;
width: 100%;
height: 300px;
margin-bottom: 20px;
}
Читать далее «Анимация градиента с плагином granim.js»Отдельные стили CSS через js для любимого IE )
if (/MSIE 10/i.test(navigator.userAgent) ||
/MSIE 9/i.test(navigator.userAgent) ||
/rv:11.0/i.test(navigator.userAgent) ||
/Edge\/\d./i.test(navigator.userAgent))
{document.write
('')
}Тестировал с IE8-IE10
ЗЫ. Не будет работать, если в «style» будут отступы.
Меняющийся фон сайта на градиенте
Просто добавляем в css
body{
background: linear-gradient(326deg, #316155, #5fc370, #b8c35f, #c3905f);
background-size: 800% 800%;
-moz-animation: screenplug 11s ease infinite;
-o-animation: screenplug 11s ease infinite;
animation: screenplug 11s ease infinite;}
@-webkit-keyframes screenplug {
0%{background-position:14% 0%}
50%{background-position:87% 100%}
100%{background-position:14% 0%}
}
@-moz-keyframes screenplug {
0%{background-position:14% 0%}
50%{background-position:87% 100%}
100%{background-position:14% 0%}
}
@-o-keyframes screenplug {
0%{background-position:14% 0%}
50%{background-position:87% 100%}
100%{background-position:14% 0%}
}
@keyframes screenplug {
0%{background-position:14% 0%}
50%{background-position:87% 100%}
100%{background-position:14% 0%}
}
Пример тут
