Рубрика

CSS

Всего: 63 записи

css черно белый

2 октября 2017CSSНет комментариев

a{
	background-position:center center;
	background-repeat:no-repeat;
	filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	-webkit-filter:grayscale(100%);
}
a:hover{
	filter:none;
	-webkit-filter:none;
}

css

less css3 calc()

11 сентября 2017CSSНет комментариев

.text{
	width:~"calc(100% - 100px)";
}

вместо

.text{
	width:calc(100% - 100px);
}

css less

css — linear-gradient android

14 января 2017CSSНет комментариев

Универсально:

background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#0070bf),color-stop(100%,#005c9d));
background:-moz-linear-gradient(to bottom,#0070bf,#005c9d);
background:-webkit-linear-gradient(to bottom,#0070bf,#005c9d);
background:linear-gradient(to bottom,#0070bf,#005c9d);

css

Текст в 2 колонки

23 декабря 2016CSSНет комментариев

.block{
	column-count:2;
	column-gap:30px;
}

column-gap — межколоночный интервал

css

CSS тряска

21 декабря 2016CSS, JavascriptНет комментариев

@keyframes trambling-animation{
	0%,50%,100%{
		transform:rotate(0deg);
	}
	10%,30%{
		transform:rotate(-10deg);
	}
	20%,40%{
		transform:rotate(10deg);
	}
}
.trambling{
	animation:1.2s ease-in-out 0s normal none infinite running trambling-animation;
}

LESS с поддержкой старых браузеров

.transform(@transform){
	-moz-transform:@transform;
	-ms-transform:@transform;
	-webkit-transform:@transform;
	-o-transform:@transform;
	transform:@transform;
}
.animation(@animation){
	-webkit-animation:@animation;
	-moz-animation:@animation;
	-o-animation:@animation;
	animation:@animation;
}
@keyframes trambling-animation{
	0%,50%,100%{
		.transform(rotate(0deg));
	}
	10%,30%{
		.transform(rotate(-10deg));
	}
	20%,40%{
		.transform(rotate(10deg));
	}
}
.trambling{
	.animation(1.2s ease-in-out 0s normal none infinite running trambling-animation);
}

Или используйте jquery плагин jRumble:
https://jackrugile.com/jrumble/

css

display inline-block ie

20 июля 2016CSSНет комментариев

display:-moz-inline-stack;
display:inline-block;
vertical-align:top;
zoom:1;
*display:inline;

css

display table-cell ie

20 июля 2016CSS, WebНет комментариев

Решается метатегом

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

css