mishelen’s gists

mishelen / mixin-inline-block-with-zoom.scss

Created August 19, 2014 16:19

михина инлайн-блока

	@mixin i-b($v-a) {
	display: inline-block;
	vertical-align: $v-a;
	zoom: 1;
	*display: inline;
	}

mishelen / mixin-for-constant-aspect-ratio-to-block.scss

Created August 19, 2014 20:58

constant aspect ratio for child in container Создание блока с постоянным соотношением сторон, на псевдоэлементе, по существу блок нулевой высоты, высота получается за счет паддинга псевдоребенка, сам ребенок абсолютно позиционируется в этом получившемся контейнере. По умолчанию миксина предполагает ребенком img, также считается что контейнер буд…

	@mixin stretching-pos($type-pos: absolute) {
	left: 0;top: 0;right: 0;bottom: 0;
	position: $type-pos;
	}

	@mixin stretching-hw($type-pos: absolute) {
	height: 100%; width: 100%;
	position: $type-pos;
	}

mishelen / mixin-background-video.scss

Created August 20, 2014 00:34

Mixin for video on all container == background video. Миксина для заполнения видео-бэкграундом.

	@mixin stretching-pos($type-pos: absolute) {
	left: 0;top: 0;right: 0;bottom: 0;
	position: $type-pos;
	}

	@mixin stretching-hw($type-pos: absolute) {
	height: 100%; width: 100%;
	position: $type-pos;
	}

mishelen / unvisible-gmaps-controls.scss

Last active August 29, 2015 14:05

Unvisible GoogleMaps controls. Лекарство от НЕВИДИМЫХ контролов в гугло картах. Задание по умолчанию max-width: 100%; для img ломает как минимум отображение контролов на карте. Эта проблема встречается и в Foundation и в Bootstrapp. Мало того там эта проблема решена, просто надо знать классы для карт.

	.gmap-icons, .gm-style {
	img {max-width: none;}
	}

mishelen / new_gist_file_0.scss

Last active September 16, 2015 02:05

Очередная ремопикселе фолбек From http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/

	@function strip-unit($num) {
	@return $num / ($num * 0 + 1);
	}

	@mixin rem-fallback($property, $values...) {
	$max: length($values);
	$pxValues: '';
	$remValues: '';

	@for $i from 1 through $max {

mishelen / er.scss

Created August 21, 2014 03:27

Очередной ремофлбек вроде взаимообратный From http://hugogiraudel.com/2013/03/18/ultimate-rem-mixin/

	html {
	font-size: 62.5%; /* 1 */
	}

	@function parseInt($n) { /* 2 */
	@return $n / ($n * 0 + 1);
	}

	@mixin rem($property, $values) {
	$px : (); /* 3 */

mishelen / br-in.css

Created October 2, 2014 22:36

символы CR и LF которые представляют собой разрыв строки — это обычные unicode-символы, которые могут быть вставлены где угодно как и все остальные unicode-символы. Им соответствуют коды 000D и 000A соответсвенно. Это значит, что они тоже могут быть вставлены в генерируемый контент если их должным образом экранировать. Далее, мы можем использова…

	.like-inline:after {
	content: '\A';
	white-space: pre;
	}

mishelen / counting.scss

Created April 9, 2015 15:36

Quantity Queries

	// Quantity 6



	li:nth-last-child(6):first-child,
	li:nth-last-child(6):first-child ~ li {
	/* rules */
	}

	// The advantage of :nth-last-of-type(),

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 */

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);

Mikhail Hozhy mishelen