- Страница 10 из 10 Тут всякие полезности. Кладовка кода.

18.04.201923.10.2019

Трансформация 3D карточки-поворот на 180 градусов CSS3

HTML часть

<div class="section">
<div class="container">
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
</div>
</div>

Поделится

12.04.201923.10.2019

CSS трансформация с использованием transform

Пример 2 — При наведение на какую-либо область, выезжают и поворачиваются блоки.

HTML часть

<div class="section">
  <div class="phone">
  </div>
  <div class="tablet">
  </div>
  <div class="desktop">
  </div>
  <h1 class="heading">Адаптивная верстка</h1>
</div>

Пример на github

Поделится

11.04.201919.12.2023

Переворачиваем карточку на 180 градусов с помощью CSS

HTML часть

<div class="wrap">
  <div class="card">
    <div class="front"><span>Front</span></div>
    <div class="back"><span>Back</span></div>
  </div>
</div>

Поделится

10.04.201923.10.2019

Анимация градиента с плагином granim.js

Предварительно необходимо скачать и подключить сам скрипт 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;
}

Поделится

09.04.201923.10.2019

Отдельные стили 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
('<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» будут отступы.

Поделится

09.04.201923.10.2019

Меняющийся фон сайта на градиенте

Просто добавляем в 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%}
}

Пример тут

Поделится

09.04.201923.10.2019

Переключатели на CSS. Не стандартный checkbox

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>

Поделится

Роман Ташев

Записи

Трансформация 3D карточки-поворот на 180 градусов CSS3

CSS трансформация с использованием transform

Переворачиваем карточку на 180 градусов с помощью CSS

Анимация градиента с плагином granim.js

Отдельные стили CSS через js для любимого IE )

Меняющийся фон сайта на градиенте

Переключатели на CSS. Не стандартный checkbox

Статистика

Статистика

Метки