Архив

Публикации с меткой ‘css’
css градиент текста
15 октября 2017 Нет комментариев 
.text{
	background:linear-gradient(to bottom,#ffd56e,#ed9f23);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}
Categories: CSS Tags:
css черно белый
2 октября 2017 Нет комментариев 
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;
}
Categories: CSS Tags:
less css3 calc()
11 сентября 2017 Нет комментариев 
.text{
	width:~"calc(100% - 100px)";
}

вместо

.text{
	width:calc(100% - 100px);
}
Categories: CSS Tags: ,
css — linear-gradient android
14 января 2017 Нет комментариев

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

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);
Categories: CSS Tags:
Черно-белая карта Яндекс
11 января 2017 Нет комментариев

HTML:

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<div id="map"></div>

Javascript:

ymaps.ready(init);
function init(){
	var myMap=new ymaps.Map("map",{
		center:[59.974504,30.550266],
		zoom:11,
		controls:['zoomControl']
	}),
	Placemark1=new ymaps.Placemark([60.002148,30.272623],{
		balloonContent:'Балун 1',
		hintContent:'Стандартный значок метки 1',
	},{
		preset:'islands#redDotIcon'
	}),
	Placemark2=new ymaps.Placemark([59.935935,30.363452],{
		balloonContent:'Балун 2',
		hintContent:'Стандартный значок метки 2',
	},{
		preset:'islands#redDotIcon'
	});
	myMap.geoObjects.add(Placemark1).add(Placemark2);
	myMap.behaviors.disable('scrollZoom');
}

CSS:

#map{
	height:390px;
}
[class*="ymaps-2"][class*="-ground-pane"]{
	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%);
}

На основе: http://jsfiddle.net/9aj8j/76/

Categories: Web Tags: ,
Текст в 2 колонки
23 декабря 2016 Нет комментариев 
.block{
	column-count:2;
	column-gap:30px;
}

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

Categories: CSS Tags:
CSS тряска
21 декабря 2016 Нет комментариев 
@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/

Categories: CSS, Javascript Tags: