Тут всякие полезности. Кладовка кода.
Подборка интересных, готовых решений.
HTML часть
<div class="section">
<div class="phone">
</div>
<div class="tablet">
</div>
<div class="desktop">
</div>
<h1 class="heading">Адаптивная верстка</h1>
</div>
Пример на github
Читать далее «CSS трансформация с использованием transform»
HTML часть
<div class="wrap">
<div class="card">
<div class="front"><span>Front</span></div>
<div class="back"><span>Back</span></div>
</div>
</div>
Предварительно необходимо скачать и подключить сам скрипт https://sarcadass.github.io/granim.js/
HTML часть
<canvas id="canvas-basic"></canvas>
<canvas id="canvas-radial"></canvas>
CSS часть
#canvas-basic,
#canvas-radial {
position: relative;
display: block;
width: 100%;
height: 300px;
margin-bottom: 20px;
}
Читать далее «Анимация градиента с плагином granim.js»
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
('<style>.about-work{background-color:#fff;}.order{background-color:#fff;}footer{background-color: rgba(57, 172, 249, 1);}.price{background:#ffffff;}.hakscr{background: #ffffff;}.dignity{background-color:rgba(57, 172, 249, 1);}header{background-color: rgba(57, 172, 249, 1);}.header{background-color: rgba(57, 172, 249, 1);}.hak{background: rgba(57, 172, 249, 1);}.about{background-color: #fff;}</style>')
}
Тестировал с 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%}
}
Пример тут
HTML часть
<div class="row press">
<input type="checkbox" id="unchecked" class="cbx hidden"/>
<label for="unchecked" class="lbl"></label>
</div>
<div class="row press">
<input type="checkbox" id="checked" class="cbx hidden" checked/>
<label for="checked" class="lbl"></label>
</div>
<div class="row">
<input type="checkbox" id="unchecked_disabled" class="cbx hidden" disabled/>
<label for="unchecked_disabled" class="lbl"></label>
</div>
