Архив

Публикации с меткой ‘css’
23 ноября 2017 Нет комментариев

В примере таблицы в контенте расположены внутри тега article

$(document).ready(function(){
	$("article table").wrapAll('<div class="contenttable"></div>');
});
article .contenttable{
	overflow-y:auto;
}
Categories: Web Tags: ,
6 ноября 2017 Нет комментариев
ul{
	list-style:none;
	margin-left:10px;
}
ul li:before{
	content:"—";
	position:relative;
	left:-5px;
}
Categories: CSS Tags:
15 октября 2017 Нет комментариев
.text{
	background:linear-gradient(to bottom,#ffd56e,#ed9f23);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}

Градиент + тень:

.text{
	background:linear-gradient(to bottom,#ffd56e,#ed9f23);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	position:relative;
}
.text:before{
	background:none;
	content:attr(data-text);
	left:0;
	position:absolute;
	text-shadow:2px 0px 1px rgba(0,0,0,.4);
	top:0;
	z-index:-1;
}
<div class="text" data-text="Текст">Текст</div>
Categories: CSS Tags:
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:
11 сентября 2017 Нет комментариев
.text{
	width:~"calc(100% - 100px)";
}

вместо

.text{
	width:calc(100% - 100px);
}
Categories: CSS Tags: ,
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: ,