Архив

Архив раздела ‘CSS’
css — рамка с уголком
9 февраля 2018 Нет комментариев

Рамка с уголком посредине в центре (less):

.block{
	background:@color_white;
	border:1px solid @color_gray;
	.border_radius(5px);
	padding:10px;
	&:before,&:after{
		content:'';
		position:absolute;
		left:50%;
		margin-left:-10px;
		top:-20px;
		border:10px solid transparent;
		border-bottom:10px solid @color_gray;
	}
	&:after{
		border-bottom:10px solid @color_white;
		top:-19px;
	}
}

http://htmlbook.ru/blog/treugolniki-cherez-css

Categories: CSS Tags: ,
fancybox ajax datepicker
22 января 2018 Нет комментариев 
$('.popup').fancybox({
	helpers:{title:null},
	padding:'0',
	width:'800',
	beforeShow:function(){
		$('input.date').datepicker({
			//options
		});
	}
});
#ui-datepicker-div{
	z-index:9999 !important;
}
Categories: CSS, Javascript Tags: ,
увеличенный шрифт safari ios
12 января 2018 Нет комментариев 
body{
	-ms-text-size-adjust:100%;
	-moz-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}

Mobile Safari (а также Chrome для Android, Mobile Firefox и IE Mobile) автоматически увеличивают размер шрифта внутри широких блоков.

Минус этого решения:
Двойной тап по блоку больше не будет увеличивать его масштаб в рамках ширины экрана.

Если размер шрифта покажется пользователю слишком мелким, то ему придется увеличивать масштаб всей страницы и использовать свайп влево-вправо, чтобы читать текст.

https://ru.stackoverflow.com/questions/382661/Почему-ios-safari-увеличивает-шрифт

Categories: CSS Tags: , ,
input type submit — safari
19 декабря 2017 Нет комментариев

Чтобы убрать закругленные углы и другие стандартные стили Safari:

-webkit-appearance: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
Categories: CSS Tags:
list-style-type тире
6 ноября 2017 Нет комментариев 
ul{
	list-style:none;
	margin-left:10px;
}
ul li:before{
	content:"—";
	position:relative;
	left:-5px;
}
Categories: CSS Tags:
css градиент текста
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:
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: