Метка

css

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

css — рамка с уголком

9 февраля 2018CSSНет комментариев

Рамка с уголком посредине в центре (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

css less

fancybox ajax datepicker

22 января 2018CSS, JavascriptНет комментариев

$('.popup').fancybox({
	helpers:{title:null},
	padding:'0',
	width:'800',
	beforeShow:function(){
		$('input.date').datepicker({
			//options
		});
	}
});

#ui-datepicker-div{
	z-index:9999 !important;
}

css javascript

увеличенный шрифт safari ios

12 января 2018CSSНет комментариев

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-увеличивает-шрифт

css ios safari

input type submit — safari

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

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

-webkit-appearance: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;

css

Таблицы в адаптивном дизайне

23 ноября 2017WebНет комментариев

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

$(document).ready(function(){
	$(".article table").wrap('<div class="content_table"></div>');
});

article .content_table{
	overflow-x:auto;
}

css javascript

list-style-type тире

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

ul{
	list-style:none;
	margin-left:10px;
}
ul li:before{
	content:"—";
	position:relative;
	left:-5px;
}

css

css градиент текста — css text gradient

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

.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>

css