Oleg Scretch-1
Scretch-1
/ forms-template.html
Last active
June 24, 2017 11:08
Все типы полей для форм и их атрибуты (HTML5)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ru"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Шаблон типов полей форм</title> | |
| <meta name="description" content=""> |
Scretch-1
/ input Bootstrap
Last active
June 28, 2017 05:15
Поле ввода input как в бутстрапе (миксин SASS)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* mixin SASS input as in bootstrap */ | |
| // input style custom | |
| // пример: @include input($green,$black,$black,.5s); | |
| =input($bsh: transparentize(blue, 0.3), $bdc: gray, $pl: gray, $timetransit: 0.15s) | |
| display: inline-block | |
| height: 34px | |
| padding: 6px 12px | |
| font-size: 14px | |
| line-height: 1.42857143 | |
| color: #555 |
Scretch-1
/ hover.sass
Last active
June 8, 2017 14:15
Эффекты при наведении. Библиотека hover.css (SASS)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Посмотреть примеры с названиями можно тут https://codepen.io/Mestika/pen/PwmqjZ | |
| /* Grow | |
| .hvr-grow | |
| display: inline-block | |
| vertical-align: middle | |
| -webkit-transform: perspective(1px) translateZ(0) | |
| transform: perspective(1px) translateZ(0) | |
| box-shadow: 0 0 1px transparent | |
| -webkit-transition-duration: 0.3s | |
| transition-duration: 0.3s |
Scretch-1
/ animate.sass
Last active
September 4, 2018 12:19
Эффекты анимации библиотеки Animate.css (SASS)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Посмотреть примеры анимации можно тут: https://daneden.github.io/animate.css/ | |
| * Version - 3.7.0 | |
| @charset "UTF-8" | |
| @-webkit-keyframes bounce | |
| from, | |
| 20%, | |
| 53%, | |
| 80%, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // clearfix | |
| // пример: @include cfx; | |
| =cfx | |
| &:after | |
| content: "." | |
| display: block | |
| height: 0 | |
| clear: both | |
| visibility: hidden |
Scretch-1
/ Settings for Sublime text 3
Last active
March 18, 2017 11:56
Стартовые пользовательские настройки Для Sublime Text 3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "show_definitions": false, | |
| "auto_complete": false, | |
| "bold_folder_labels": true, | |
| "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", | |
| "fold_buttons": false, | |
| "font_size": 13, | |
| "highlight_line": true, | |
| "indent_guide_options": | |
| [ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // clearfix | |
| // пример: @include cfx; | |
| @mixin cfx { | |
| &:after { | |
| content: "."; | |
| display: block; | |
| height: 0; | |
| clear: both; | |
| visibility: hidden; | |
| } |
Scretch-1
/ SASS Reset Css
Last active
December 10, 2017 18:02
Reset css выполнен в виде миксина sass
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Это сброс выполнен в качестве sass миксина, подключать можно с помощью директывы "+" это Include в sass. Пример: "+reset" | |
| // http://meyerweb.com/eric/tools/css/reset/ | |
| =reset | |
| html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video | |
| margin: 0 | |
| padding: 0 | |
| border: 0 | |
| font-size: 100% | |
| font: inherit |
Scretch-1
/ JS скролл страницы (добавление класса)
Last active
November 14, 2016 04:29
JS Присвоение класса элементу при скролле
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // при скролле начиная от верха страницы элемента с любым позиционированием | |
| $(window).scroll(function() { | |
| if ($(this).scrollTop() > 50) { | |
| $('.header-home').addClass("fixo"); | |
| } else { | |
| $('.header-home').removeClass("fixo"); | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Добавляем в _vars.sass | |
| // color-stack | |
| $color-stack: (group: orange, id: normal, color: #e67835), (group: orange, id: pale, color: #f8a878), (group: orange, id: dark, color: #ad490c), (group: blue, id: normal, color: #426682) | |
| // Добавляем в _mixins.sass функцию вызова цветовых переменных | |
| // color function | |
| @function color($group, $shade: normal, $transparency: 1) | |
| @each $color in $color-stack | |
| $c-group: map-get($color, group) | |
| $c-shade: map-get($color, id) |
NewerOlder