Архив

Архив раздела ‘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:
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:
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:
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:
webkit-background-clip text-shadow
21 июля 2021 Нет комментариев

Для тени используется -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:
input date своя иконка
22 января 2021 Нет комментариев 
input[type=date]::-webkit-calendar-picker-indicator{
	display:none;
}
input[type=date]{
	background:url("../images/icon_calendar.svg") #f7f9fc no-repeat 90% 50%;
}
Categories: CSS Tags:
input number hide arrows
15 декабря 2020 Нет комментариев 
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
	-webkit-appearance:none;
}
input[type=number]{
	-moz-appearance:textfield;
}
Categories: CSS Tags: