Архив

Архив раздела ‘CSS’
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: ,
firefox css zoom
3 октября 2018 Нет комментариев

Пример на less:

.zoom(@zoom){
	zoom:@zoom;
	-ms-zoom:@zoom;
	-webkit-zoom:@zoom;
	-moz-transform:scale(@zoom,@zoom);
	-moz-transform-origin:top center;
}
img{
	.zoom(.7);
}
Categories: CSS Tags: ,
css — рамка с уголком
9 февраля 2018 Нет комментариев

Рамка с уголком посредине в центре (less):

.block{
	background:@color_white;
	border:1px solid @color_gray;
	.border_radius(5px);
	padding:10px;
	&:before,&:after{
		content:'';
		position:absolute;
		left:50%;
		margin-left:-10px;
		top:-20px;
		border:10px solid transparent;
		border-bottom:10px solid @color_gray;
	}
	&:after{
		border-bottom:10px solid @color_white;
		top:-19px;
	}
}

http://htmlbook.ru/blog/treugolniki-cherez-css

Categories: CSS Tags: ,
fancybox ajax datepicker
22 января 2018 Нет комментариев 
$('.popup').fancybox({
	helpers:{title:null},
	padding:'0',
	width:'800',
	beforeShow:function(){
		$('input.date').datepicker({
			//options
		});
	}
});
#ui-datepicker-div{
	z-index:9999 !important;
}
Categories: CSS, Javascript Tags: ,