Skip to content

Instantly share code, notes, and snippets.

View slavikse's full-sized avatar
🎨
Colorful

Vyacheslav slavikse

🎨
Colorful
9 followers · 0 following
View GitHub Profile
@slavikse
slavikse / index.html
Created November 3, 2016 21:18
animation opener; example: http://codepen.io/slavikse/full/NbWNwG/
<div class="toggle">open/close</div>
<div class='auth-book'>
<div class='paper paper-1'></div>
<div class='paper paper-2'></div>
<div class='paper paper-first-open'>
<div class='paper paper-3'></div>
<div class='paper paper-4'></div>
</div>
</div>
@slavikse
slavikse / index.css
Last active October 30, 2016 12:24
Открытие дорожной карты: ex: http://codepen.io/slavikse/full/amgyQK/
.auth-book {
position: relative;
z-index: 120;
width: 100px;
height: 100px;
transform-style: preserve-3d;
perspective: 600px;
perspective-origin: center 150px;
@slavikse
slavikse / index.jade
Last active December 26, 2015 20:28
Popup на css - checked. Пример: http://codepen.io/slavikse/full/KVgRGx/
.popup
input#popup__trigger(type='checkbox' hidden)
label.popup__action(for='popup__trigger') click me!
.popup__content super text
label.popup__overlay(for='popup__trigger')
@slavikse
slavikse / index.jade
Last active May 26, 2016 11:08
Слайдер с задержкой для просмотра кадра. На чистом css. Пример: http://codepen.io/slavikse/full/OyYZWQ/
//- Каждый элемент должен иметь четкий порядок для совпадения
- var paths = [ "http://loremflickr.com/320/240?random=1", "http://loremflickr.com/320/240?random=2", "http://loremflickr.com/320/240?random=3", "http://loremflickr.com/320/240?random=4", "http://loremflickr.com/320/240?random=5" ]
- var hrefs = [ "http://vk.com", "http://vk.com", "http://vk.com", "http://vk.com", "http://vk.com" ]
- var titles = [ "Вконтактик", "Вконтактик", "Вконтактик", "Вконтактик", "Вконтактик" ]
- var alts = [ "Вконтактик", "Вконтактик", "Вконтактик", "Вконтактик", "Вконтактик" ]
.slider
.frame
- for (var i = 0; i < paths.length; i++)
a(href= hrefs[i] title= titles[i] target="_blank")
@slavikse
slavikse / index.jade
Last active November 24, 2015 17:45
switcher на css - checkbox. js для отслеживания off/on в консоли. Пример: http://codepen.io/slavikse/full/MaVpqj/
.switcher
input.switcher__input#switcher1(type='checkbox' hidden)
.switcher__wrap
label.switcher__item.switcher__on(for='switcher1') &#10004;
label.switcher__item.switcher__toggle(for='switcher1') |||
label.switcher__item.switcher__off(for='switcher1') &#10008;
.switcher
input.switcher__input#switcher2(type='checkbox' hidden)
@slavikse
slavikse / index.jade
Last active May 26, 2016 11:10
Слайдер на css - radio, с фиксированной горизонтальной навигацией с подписями. Тултип по наведению на слайд. Автоматическое переключение слайдов (по таймеру, js). Переход по ссылке по нажатию на слайд (картинку). Пример: http://codepen.io/slavikse/full/GpxWXz/
- var headlines = [ 'контакт', 'гугл', 'вааау' ]
- var tooltips = [ 'Вступи в группу в контакте', 'Гугл в помощь', 'ого, тултипчик' ]
- var links = [ 'http://vk.com', 'http://google.com', 'http://ya.ru' ]
- var images = [ 'http://loremflickr.com/400/200?random=1', 'http://loremflickr.com/400/200?random=2', 'http://loremflickr.com/400/200?random=3' ]
.slider
- for (var i = 1; i <= images.length; i++)
if i == 1
input(checked data-slide='#{i}' id='slider-#{i}' class='slider-#{i}' type='radio' name='slider' hidden)
else
@slavikse
slavikse / index.jade
Last active November 24, 2015 17:48
Аккордион на css - radio. Для снятия активности с элемента используется js. Пример: http://codepen.io/slavikse/full/NGYpOW/
.accordion
input.accordion__input#accordion-1(type='radio' name='accordion' hidden)
label.accordion__control(for='accordion-1') toggle-1
section.accordion__content
div content content content content content content content content content content content content content content content content content
input.accordion__input#accordion-2(type='radio' name='accordion' hidden)
label.accordion__control(for='accordion-2') toggle-2
section.accordion__content
div content content content content content content content content content content content content content content content content content content content content content content content content content
@slavikse
slavikse / index.jade
Last active November 24, 2015 17:48
Аккордион на css - checkbox. Пример: http://codepen.io/slavikse/full/XmEMxR/
.accordion
input.accordion__input#accordion-1(type='checkbox' hidden)
label.accordion__control(for='accordion-1') toggle-1
section.accordion__content
div content content content content content content content content content content content content content content content content content
input.accordion__input#accordion-2(type='checkbox' hidden)
label.accordion__control(for='accordion-2') toggle-2
section.accordion__content
div content content content content content content content content content content content content content content content content content content content content content content content content content
@slavikse
slavikse / index.jade
Last active November 24, 2015 17:49
Аккордион на css - focus. Пример: http://codepen.io/slavikse/full/qOorJx/
.accordion
span.accordion__control(tabindex='-1') toggle-1
section.accordion__content
div content content content content content content content content content content content content content content content
span.accordion__control(tabindex='-1') toggle-2
section.accordion__content
div content content content content content content content content content content content content content content content
span.accordion__control(tabindex='-1') toggle-3
@slavikse
slavikse / index.jade
Last active November 25, 2015 18:52
Выпадающее меню на css - focus. Пример: http://codepen.io/slavikse/full/mexWza/
.dropdown
span.dropdown__control(tabindex='-1') dropdown
section.dropdown__content
a.dropdown__link(href='#') drop1
a.dropdown__link(href='#') drop2
a.dropdown__link(href='#') drop3
a.dropdown__link(href='#') drop4
a.dropdown__link(href='#') drop5
a.dropdown__link(href='#') drop6