Записи в рубрике CSS

Архив

Архив раздела ‘CSS’

яндекс карта зависает при клике на метку

18 июня 2022 Нет комментариев

Проверить, не используется ли глобально свойство transition

*{
	/*
	transition:0.1s;
	*/
}

https://habr.com/ru/sandbox/99895/

Categories: CSS Tags: css

Загрузка iframe YouTube по клику

13 апреля 2022 1 комментарий

Вместо iframe

<iframe width="640" height="360" src="https://www.youtube.com/embed/<?=$item['youtube_id']?>?autoplay=0" allowfullscreen></iframe>

отображаем div

<div class="youtube" id="<?=$item['youtube_id']?>"></div>

css:

.youtube{
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
	display:inline-block;
	overflow:hidden;
	transition:all 200ms ease-out;
	cursor:pointer;
	height:360px;
}
.youtube .play{
	background:url('../images/youtube-play-btn.png') no-repeat;
	background-position:0 -50px;
	-webkit-background-size:100% auto;
	background-size:100% auto;
	position:absolute;
	height:50px;
	width:69px;
	transition:none;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	cursor:pointer;
}
.youtube:hover .play{
	background-position:0 0;
}

javascript:

'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
	if(!document.getElementsByClassName){
		var getElementsByClassName=function(node, classname){
			var a=[];
			var re=new RegExp('(^| )'+classname+'( |$)');
			var els=node.getElementsByTagName("*");
			for(var i=0,j=els.length;i<j;i++)
				if(re.test(els[i].className))a.push(els[i]);
			return a;
		}
		var videos=getElementsByClassName(document.body,"youtube");
	}
	else{
		var videos=document.getElementsByClassName("youtube");
	}
	var nb_videos=videos.length;
	for (var i=0;i<nb_videos;i++){
		videos[i].style.backgroundImage='url(https://i.ytimg.com/vi/'+videos[i].id+'/sddefault.jpg)';
		var play=document.createElement("div");
		play.setAttribute("class","play");
		videos[i].appendChild(play);
		videos[i].onclick=function(){
			var iframe=document.createElement("iframe");
			var iframe_url="https://www.youtube.com/embed/"+this.id+"?autoplay=1&autohide=1";
			if(this.getAttribute("data-params"))iframe_url+='&'+this.getAttribute("data-params");
			iframe.setAttribute("src",iframe_url);
			iframe.setAttribute("frameborder",'0');
			iframe.style.width=this.style.width;
			iframe.style.height=this.style.height;
			this.parentNode.replaceChild(iframe,this);
		}
	}
});

Картинка: youtube-play-btn.zip
На основе: https://sitehere.ru/uskorit-zagruzku-stranic-sajta

Categories: CSS, Javascript Tags: css, javascript

input:-internal-autofill-selected remove

24 ноября 2021 Нет комментариев

Убрать фон:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
	-webkit-box-shadow:0 0 0 30px #ffffff inset !important;
}

Изменить цвет текста:

input:-webkit-autofill{
	-webkit-text-fill-color:#c05857 !important;
}

Categories: CSS Tags: css

css точки между текстом в таблице

1 сентября 2021 Нет комментариев

less:

.pricedesc{
	width:100%;
	margin-bottom:20px;
	&>div{
		display:flex;
		justify-content:space-between;
		&>div{
			text-align:left;
			font-size:14px;
			line-height:20px;
			font-weight:700;
			padding:2px 0;
			&:nth-child(2){
				flex:1 0;
				border-bottom:1px dotted #d2d2d2;
				height:1em;
				margin:0 .4em;
			}
		}
	}
}

html:

<div class="pricedesc">
	<div>
		<div>Взнос в КФ ВВ</div>
		<div></div>
		<div>0 ₽</div>
	</div>
	<div>
		<div>Взнос в КФ ОДО</div>
		<div></div>
		<div>0 ₽</div>
	</div>
	<div>
		<div>Страхование</div>
		<div></div>
		<div>0 ₽</div>
	</div>
	<div>
		<div>Вступительный взнос</div>
		<div></div>
		<div>0 ₽</div>
	</div>
	<div>
		<div>Членские взносы</div>
		<div></div>
		<div>0 ₽</div>
	</div>
</div>

Categories: CSS Tags: css

input focus увеличение iphone

3 августа 2021 Нет комментариев

убрать автоматическое масштабирование при активном input,textarea,select
css:

@media screen and (-webkit-min-device-pixel-ratio:0){
	select,
	textarea,
	input{
		font-size:16px;
	}
}

или запретить масштабирование в принципе:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

Categories: CSS Tags: css

images justify css

3 августа 2021 Нет комментариев

less:

.justify{
	text-align:justify;
	img{
		display:inline-block;
	}
	&:after{
		content:"";
		display:inline-block;
		width:100%;
		height:0;
	}
}

html:

<p class="justify">
	<img alt="" src="/upload/image/about.jpg" />
	<img alt="" src="/upload/image/about.jpg" />
	<img alt="" src="/upload/image/about.jpg" />
	<img alt="" src="/upload/image/about.jpg" />
</p>

Categories: CSS Tags: css

border gradient

22 июля 2021 Нет комментариев

Используется border-image-source и border-image-slice

header{
	height:800px;
	background:url("../images/header.jpg") no-repeat top center;
	background-size:cover;
	box-sizing:border-box;
	padding-top:80px;
	position:relative;
	&:after,&:before{
		content:'';
		display:block;
		width:~"calc(100% - 60px)";
		height:~"calc(100% - 45px)";
		position:absolute;
		border:3px solid @color_gold;
		border-image-source:linear-gradient(90deg,#dcae72 0%,#f9a73b 27.72%,#dcae72 54.07%,#ee8f13 78.85%,#dcae72 101.19%);
		border-image-slice:1;
		box-sizing:border-box;
	}
	&:after{
		top:15px;
		left:20px;
	}
	&:before{
		top:30px;
		left:40px;
	}
}

Categories: CSS Tags: css