Архив

Архив раздела ‘CSS’
Убрать крестик очистки в 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: ,
css — прозрачный текст вырезанный из фона
4 марта 2019 Нет комментариев

.header — фоновое изображение
.mask — полупрозрачный белый фон
.l1,.l2,.l3,.l4 — буквы вырезающие из полупрозрачного фона полноцветную картинку
.l5,.l6 — ссылка в рамке, вырезающей из полупрозрачного фона полноцветную картинку
Используются свойства: -webkit-text-fill-color:transparent; и -webkit-background-clip:text;

Полный пример:
HTML:

<div class="header">
	<div class="mask">
		<div class="text">
			<div class="wrap">
				<div class="l1">Lorem ipsum</div>
				<div class="l2">dolor sit amet consectetur</div>
				<div class="l3">sed do eiusmod tempor incididunt</div>
				<div class="l4">Excepteur sint</div>
				<a class="l5" href="#">Duis aute</a>
				<div class="l6"><span><i></i></span></div>
			</div>
		</div>
	</div>
</div>

CSS:

.header{
	height:860px;
	background:url("../images/header.jpg") center center;
	background-size:cover;
	position:relative;
	.mask{
		height:100%;
	}
	.text{
		text-transform:uppercase;
		text-align:center;
		font-weight:900;
		div,a{
			width:100%;
			position:absolute;
			display:block;
			left:0;
			color:@color_white;
			text-decoration:none;
		}
		.l1{
			font-size:50px;
			line-height:50px;
			top:230px;
			background-position:50% -230px;
		}
		.l2{
			font-size:70px;
			line-height:70px;
			top:330px;
			background-position:50% -330px;
		}
		.l3{
			font-size:30px;
			line-height:30px;
			top:450px;
			background-position:50% -450px;
		}
		.l4{
			font-size:30px;
			line-height:30px;
			top:500px;
			background-position:50% -500px;
		}
		.l5{
			font-size:25px;
			line-height:100px;
			top:600px;
			background-position:50% -600px;
			z-index:2;
		}
		.l6{
			top:600px;
			z-index:1;
			span{
				display:inline-block;
				width:570px;
				z-index:0;
				position:absolute;
				top:0;
				left:50%;
				margin-left:-285px;
				height:100px;
				border:5px solid @color_white;
				box-sizing:border-box;
				i{
					display:block;
					height:90px;
				}
			}
		}
	}
	&:not(:hover){
		.mask{
			background:fade(@color_white,70%);
			.text{
				div,a{
					background-image:url("../images/header.jpg");
					background-repeat:no-repeat;
					-webkit-text-fill-color:transparent;
					-webkit-background-clip:text;
				}
				.l6{
					span{
						border-color:transparent;
						background:url("../images/header.jpg") no-repeat 50% -605px;
						i{
							background:fade(@color_white,70%);
						}
					}
				}
			}
		}
	}
}
Categories: CSS Tags:
less if else
21 февраля 2019 Нет комментариев

Используя переменные, определяем какой шрифт использовать, первый — локальный, второй с google fonts.

@font_gotham:true;
@font_opensans:false;
.set_fonts() when (@font_gotham=true){
	@import '../css/GothamPro.css';
	@font_base:GothamProRegular;
	@font_base_it:GothamProItalic;
	@font_300:GothamProLight;
	@font_300_it:GothamProLightItalic;
	@font_500:GothamProMedium;
	@font_500_it:GothamProMediumItalic;
	@font_700:GothamProBold;
	@font_700_it:GothamProBoldItalic;
	@font_900:GothamProBlack;
	@font_900_it:GothamProBlackItalic;
	.font_it{
		font-family:@font_base_it;
	}
	.font_300{
		font-family:@font_300;
	}
	.font_300_it{
		font-family:@font_300_it;
	}
	.font_500{
		font-family:@font_500;
	}
	.font_500_it{
		font-family:@font_500_it;
	}
	.font_700{
		font-family:@font_700;
	}
	.font_700_it{
		font-family:@font_700_it;
	}
	.font_900{
		font-family:@font_700;
	}
	.font_900_it{
		font-family:@font_900_it;
	}
};
.set_fonts() when (@font_opensans=true){
	@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
	@font_base:'Open Sans',sans-serif;
	.font_it{
		font-style:italic;
	}
	.font_300{
		font-weight:300;
	}
	.font_300_it{
		font-weight:300;
		font-style:italic;
	}
	.font_500{
		font-weight:600;
	}
	.font_500_it{
		font-weight:600;
		font-style:italic;
	}
	.font_700{
		font-weight:700;
	}
	.font_700_it{
		font-weight:700;
		font-style:italic;
	}
	.font_900{
		font-weight:800;
	}
	.font_900_it{
		font-weight:800;
		font-style:italic;
	}
};
.set_fonts();

Использование:

body{
	font-family:@font_base;
}
.ex{
	.font_500();
	font-size:12px;
	& when (@font_opensans=true){
		font-size:14px;
	}
}
Categories: CSS Tags:
textarea scrollbar color
19 февраля 2019 Нет комментариев

Пример для less:

textarea{
	padding:15px;
	resize:none;
	scrollbar-color:fade(@color_link,80%) fade(@color_link,10%);
	scrollbar-width:thin;
}
textarea::-webkit-scrollbar{
	width:10px;
}
textarea::-webkit-scrollbar-track{
	background-color:fade(@color_link,10%);
}
textarea::-webkit-scrollbar-thumb{
	background-color:fade(@color_link,80%);
}
Categories: CSS Tags:
Добавлять класс при прокрутке
8 февраля 2019 Нет комментариев 
$(window).scroll(function(){
	if($(window).scrollTop()>130){
		$('header .top').addClass('fixed');
	}
	else{
		$('header .top').removeClass('fixed');
	}
});
header{
	.top{
		color:@color_white;
		background:@color_text;
		padding:10px 0;
		&.fixed{
			position:fixed;
			top:0;
			left:0;
			width:100%;
			z-index:10000;
		}
	}
}
Categories: CSS, Javascript Tags: , , ,
css — attribute in content
11 января 2019 Нет комментариев

Чтобы в свойство css content автоматически подставлялось значение атрибута data-name тега.
Пример на less:

div{
	&:after{
		content:~"attr(data-name)";
	}
}

html:

<div data-name="test"></div>
Categories: CSS Tags: ,