Архив

Публикации с меткой ‘css’
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: , , ,
11 января 2019 Нет комментариев

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

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

html:

<div data-name="test"></div>
Categories: CSS Tags: ,
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: ,

Когда шрифты с https://fonts.google.com/ нужно сохранить и использовать локально.
Для загрузки шрифтов и генерации css воспользоваться сервисом:
https://google-webfonts-helper.herokuapp.com/

Categories: Web Tags:
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: ,
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: ,