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

Массив:

print_r($result_price);
Array
(
    [econom_mag] => 1800
    [econom] => 510
    [def] => 870
)

Ищем ключ минимального значения массива:

$min_key=array_keys($result_price,min($result_price));
print_r($min_key);
Array
(
    [0] => econom
)
Categories: PHP Tags:
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:
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:

javascript:

function canUseWebp(){
	let elem=document.createElement('canvas');
	if(!!(elem.getContext&&elem.getContext('2d'))){
		return elem.toDataURL('image/webp').indexOf('data:image/webp')==0;
	}
	return false;
}
window.onload=function(){
	let images=document.querySelectorAll('[data-bg]');
	for(let i=0;i<images.length;i++){
		let image=images[i].getAttribute('data-bg');
		images[i].style.backgroundImage='url('+image+')';
	}
	let isitFirefox=window.navigator.userAgent.match(/Firefox\/([0-9]+)\./);
	let firefoxVer=isitFirefox?parseInt(isitFirefox[1]):0;
	if(canUseWebp()||firefoxVer>=65){
		let imagesWebp=document.querySelectorAll('[data-bg-webp]');
		for(let i=0;i<imagesWebp.length;i++){
			let imageWebp=imagesWebp[i].getAttribute('data-bg-webp');
			imagesWebp[i].style.backgroundImage='url('+imageWebp+')';
		}
	}
};

html:

<div class="item" style="background-image:url('/img/banners/banner2.webp');" data-bg="/img/banners/banner2.jpg" data-bg-webp="/img/banners/banner2.webp"></div>

пример программного вывода:

function attr_background_image($image,$dir,$add=''){
	$html='';
	$image_path=ROOT_HTTP.$dir.$image;
	$image_pathinfo=pathinfo($image_path);
	$ext=($image_pathinfo['extension']=='jpg')?'jpeg':$image_pathinfo['extension'];
	if(USE_WEBP==1&&$ext!='svg'&&file_exists(ROOT_DIR.$dir.$image_pathinfo['filename'].'.webp')){
		$html.=' style="background-image:url(\''.ROOT_HTTP.$dir.$image_pathinfo['filename'].'.webp\');" data-bg="'.ROOT_HTTP.$dir.$image.'" data-bg-webp="'.ROOT_HTTP.$dir.$image_pathinfo['filename'].'.webp"';
	}
	else{
		$html.=' style="background-image:url(\''.ROOT_HTTP.$dir.$image.'\');'.$add.'"';
	}
	return $html;
}
$block_bg='';
if($block['photo']||$block['bgcolor']){
	if($block['photo']){
		$bgcolor='';
		if($block['bgcolor']){
			$bgcolor.='background-color:'.$block['bgcolor'].';';
		}
		$block_bg=attr_background_image($block["photo"],IMAGES_BLOCKS_DIR,$bgcolor);
	}
	elseif($block['bgcolor']){
		$block_bg.=' style="';
		$block_bg.='background-color:'.$block['bgcolor'].';';
		$block_bg.='"';
	}
}

или

<div class="item"<?=attr_background_image($item["photo"],IMAGES_BANNERS_DIR)?>>

https://webinmind.ru/javascript/webp-to-background-image

Categories: Javascript, PHP Tags: , ,

Используется 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:

Для тени используется -webkit-filter вместо text-shadow

.l1,.l2{
	background:linear-gradient(91.72deg,#ffce8f 3.54%,#f9a73b 24.85%,#f9a73b 35.35%,#ad6e24 41.86%,#ee8f13 50.91%,#ffb452 76.88%,#ae6402 99.59%);
	-webkit-text-fill-color:transparent;
	-webkit-background-clip:text;
	-webkit-filter:drop-shadow(1px 1px @color_black);
}
Categories: CSS Tags:
var char_timeout=50;
var story_timeout=2000;
var placeholders=new Array();
	placeholders[0]='труба';
	placeholders[1]='проточный водонагреватель';
	placeholders[2]='фильтр';
	placeholders[3]='бак';
	placeholders[4]='сифон';
	placeholders[5]='теплый пол';
	placeholders[6]='душевая кабина';
	placeholders[7]='емкость';
	placeholders[8]='горелка';
	placeholders[9]='арматура';
	placeholders[10]='бойлер';
	placeholders[11]='газовый котел';
	placeholders[12]='наcос';
function start_printing(){
	item_count=Number(placeholders.length);
	current_placeholder=-1;
	current_length=0;
	input=$('input[name=search_string]');
	run_printing();
}
function run_printing(){
	var timeout;
	if(current_length==0){
		current_placeholder++;
		current_placeholder=current_placeholder%item_count;
		placeholder=placeholders[current_placeholder].replace(/"/g,'-');
	}
	input.attr('placeholder',placeholder.substring(0,current_length)+current_char());
	if(current_length!=placeholder.length){
		current_length++;
		timeout=char_timeout;
	}
	else{
		current_length=0;
		timeout=story_timeout;
	}
	setTimeout("run_printing()",timeout);
}
function current_char(){
	if(current_length==placeholder.length){
		return "";
	}
	else{
		return "|";
	}
}
start_printing();
Categories: Javascript Tags: