Архив

Публикации с меткой ‘css’
css — построчно закрасить текст
6 июля 2020 Нет комментариев

Для отступов в каждой строке outline

span{
	background:#45bf55;
	color:#ffffff;
	outline:#45bf55 solid 5px;
}
Categories: CSS Tags:
jquery before css
18 июня 2019 Нет комментариев

Применить стили к :before (1200 — ширина рабочей области)

$(window).load(function(){
	var half=(parseInt($(window).width())-1200)/2;
	$('head').append('<style>.title:before{width:'+(half-15)+'px;left:-'+half+'px;}</style>');
});
Categories: CSS, Javascript Tags: ,
css косая граница
6 июня 2019 Нет комментариев

Less:

.block{
	position:relative;
	&:before{
		content:'';
		position:absolute;
		top:0;
		left:-20px;
		display:block;
		width:20px;
		height:100px;
		background:@color_white;
		-webkit-transform:skewX(15deg);
		-moz-transform:skewX(15deg);
		-ms-transform:skewX(15deg);
		-o-transform:skewX(15deg);
		transform:skewX(15deg);
	}
}
Categories: CSS Tags: ,
owl carousel no animation
6 июня 2019 Нет комментариев

Javascript:

$('#owl_1').owlCarousel({
	loop:true,
	margin:0,
	items:1,
	nav:false,
	dots:false,
	autoplay:true,
	autoplayTimeout:500,
	animateOut:'fadeOut',
	animateIn:'fadeIn',
});

Less:

#owl_1{
	.animated{
		-webkit-animation-duration:0ms;
		animation-duration:0ms;
		-webkit-animation-fill-mode:both;
		animation-fill-mode:both;
	}
	.fadeOut{
		-webkit-animation-name:fadeOut;
		animation-name:fadeOut;
	}
	@-webkit-keyframes fadeOut{
		0%{
			opacity:0;
		}
		100%{
			opacity:0;
		}
	}
	@keyframes fadeOut{
		0%{
			opacity:0;
		}
		100%{
			opacity:0;
		}
	}
}
Categories: CSS, Javascript Tags:
css: ul column-count — предотвратить разрыв внутри li
4 июня 2019 Нет комментариев 
ul{
	list-style:none;
	column-count:2;
	-moz-column-count:2;
	-webkit-column-count:2;
}
ul li{
	-webkit-column-break-inside:avoid;
	-moz-column-break-inside:avoid;
	-moz-page-break-inside:avoid;
	page-break-inside:avoid;
	break-inside:avoid-column;
}

http://qaru.site/questions/34311/how-to-prevent-column-break-within-an-element

Categories: CSS Tags:
Убрать крестик очистки в input в IE
24 мая 2019 Нет комментариев 
input::-ms-clear{
	display:none;
	width:0;
	height:0;
}

для password:

input::-ms-reveal{
	display:none;
	width:0;
	height:0;
}
Categories: CSS Tags:
js — invalid form control is not focusable
28 марта 2019 Нет комментариев

Когда, к примеру, input checkbox невидим, а вместо него отображается иконка font awesome или др. и нужно проверить его checked и т.д.
Не использовать display:none или visibility:hidden
Использовать, например, opacity:0;

Categories: CSS, Javascript Tags: ,