mishelen’s gists

mishelen / factorial.scss

Created March 4, 2016 02:33

математика в SCSS возведение в степень, факториал, тригонометрия

	@function fact($number) {
	$value: 1;
	@if $number > 0 {
	@for $i from 1 through $number {
	$value: $value * $i;
	}
	}
	@return $value;
	}

mishelen / spinner.scss

Last active March 4, 2016 02:35

зацикленная анимация для спиннера. Создаем псевдо-элемент. Здесь достаточно навешивать класс на объект, или отслеживать :hover. Круг плавающий внутри кольца. Стоит не забыть добавить объкту position: relative;

	@mixin loading($name, $big_radius:50,$little_radius:10,$big_stroke:10,$little_stroke:5,$speed:4s,$res:40) {
	&:before{
	content:'';
	position: absolute;
	top: 50%;
	left: 50%;
	width: ($big_radius*2) +px;
	height: ($big_radius*2) +px;
	z-index: 999;
	border-radius: 50%;

mishelen / support.css

Last active August 29, 2015 14:26

В целом все также как @media дерективой, также есть host объект по которому можно проверять из js. Поддержка Edge, Safari 9, Лисе 23, Хроме 28, Мобильной опере 12.1, нет в Опере Мини, браузере Андроида и Мобильном ИЕ

	@supports(prop:value) {
	/* more styles */
	}


	@supports (display: flex) {
	div { display: flex; }
	}

mishelen / mQexport.css

Last active August 29, 2015 14:26

Экспорт медиа-запросов в JavaScript Что-то почти похожее используется в Fdn

	body:before {
	content: "smartphone";
	display: none; /* Prevent from displaying. */
	}
	@media (min-width: 550px) {
	body:before {
	content: "smartphone_wide";
	}
	}
	@media (min-width: 650px) {

mishelen / changePseudo.js

Created July 27, 2015 21:52

Мы не можем получить прямого доступа к этим элементам, так как они не создают узел DOM.

	Самое простое менять класс контейнера для псевдоэлемента, с предопределенными стилями и конентом
	$('p').on('click', function() {
	$(this).toggleClass('special');
	});

	// Чтобы их динамично менять,
	// можно только получить доступ к их контейнеру с его свойством content,
	// которое должно быть предопределено в том же CSS.

	// А потом мы просто задаем соответстующий атрибут элементу

mishelen / event.js

Last active August 29, 2015 14:24

объект методов событийной модели

	var evnt = {
	addEvent: function(el, type, fn) {
	if (typeof addEventListener !== 'undefined') {
	el.addEventListener(type, fn, false);
	} else if (typeof attachEvent !== 'undefined'){
	el.attachEvent('on'+ type, fn);
	} else {
	el['on' + type] = fn;
	}
	},

mishelen / intheEnd.js

Created July 2, 2015 08:36

Detecting the end of CSS animation and transition could be useful if you want to back up some of your JavaScript behavior on CSS.

	/*
	By Osvaldas Valutis, www.osvaldas.info
	Available for use under the MIT License
	*/

	;( function ( document, window, index )
	{
	var s = document.body \|\| document.documentElement, s = s.style, prefixAnimation = '', prefixTransition = '';

	if( s.WebkitAnimation == '' ) prefixAnimation = '-webkit-';

mishelen / createsvg.js

Created July 1, 2015 03:38

Создание svg-элемента

	var svgNs = "http://www.w3.org/2000/svg";


	var svg = document.createElementNS(svgNs,"svg");
	svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
	svg.setAttribute('width', '600');
	svg.setAttribute('viewBox', '0 0 600 520');
	svg.setAttribute('preserveAspectRatio', 'xMidyMid');
	svg.setAttribute('height', '250');

mishelen / step_animation.css

Created June 11, 2015 22:18

The effect is similar to the old Zoetrope devices, which presented a series of illustrations in sequence around a cylinder. Instead of a cylinder, we display a flat series of images inside an element.

	.fave {
	width: 100px;
	height: 100px;
	background: url(images/sprite.png) no-repeat;
	background-position: 0 0;
	}

	.fave:hover {
	background-position: -5500px 0;
	transition: background 1s steps(55);

mishelen / avoid_breaktext_in_column.css

Created June 9, 2015 21:46

Когда текст разбивается на колонки, то браузер пытается равномерно распределить содержимое блока по указанному количеству колонок. Для сплошного текста это может быть приемлемо, но в списках это выглядит неопрятно.

	-webkit-column-break-inside: avoid;
	page-break-inside: avoid; /* Makes effect only in Firefox */
	break-inside: avoid; /* IE10+, Opera 11.1—12.1 */

Mikhail Hozhy mishelen