Рубрика

CSS

Всего: 63 записи

css — цвет placeholder

2 июня 2016CSSНет комментариев

input[type=text]::-webkit-input-placeholder{
	color:#ffffff;
}
input[type=text]::-moz-placeholder{
	color:#ffffff;
}
input[type=text]:-moz-placeholder{
	color:#ffffff;
}
input[type=text]:-ms-input-placeholder{
	color:#ffffff;
}

css

css перенос длинных слов

7 февраля 2016CSSНет комментариев

article{
	word-wrap:break-word;
}

css

Выезжание блока transition

15 января 2016CSSНет комментариев

Пример на LESS

.transition(@transition){
	-webkit-transition:@transition;
	-moz-transition:@transition;
	-o-transition:@transition;
	transition:@transition;
}
.type{
	width:299px;
	.type_photo{
		height:299px;
		position:relative;
		overflow:hidden;
		.type_photo_hover{
			.transition(top 0.4s ease-out 0.2s);
			display:block;
			width:100%;
			height:299px;
			position:absolute;
			top:299px;
			left:0px;
			background:@color_blue;
		}
	}
	&:hover{
		.type_photo{
			.type_photo_hover{
				top:0px;
			}
		}
	}
}

css less

css: многточие если текст не поместился

11 января 2016CSSНет комментариев

Работает только для текста в 1 строку (с white-space:nowrap;).
Пример на less:

article p{
	display:none;
	&:first-child{
		display:block;
		white-space:nowrap;
		text-overflow:ellipsis;
		overflow:hidden;
	}
}

css less

css transition zoom

11 января 2016CSSНет комментариев

.block {
	transition:all .1s ease-in-out;
}
.block:hover{
	transform:scale(1.2);
}

css

css: затухание блока градиент

21 декабря 2015CSSНет комментариев

.fading{
	max-height:100px;
	overflow:hidden;
	margin-top:-20px;
}
.fading:before{
	content:"";
	display:block;
	height:20px;
	position:relative;
	top:80px;
	background-image:linear-gradient(to bottom,rgba(255,255,255,0),#ffffff 75%);
}

http://habrahabr.ru/post/241485/

css

ol, ul — цвет нумерации

7 декабря 2015CSSНет комментариев

article ul,article ol{
	list-style-type:none;
	counter-reset:num;
	margin:0 0 20px 0;
}
article ul li,article ol li{
	list-style-type:none;
	padding-left:20px;
	margin-bottom:4px;
}
article ul li:before,article ol li:before{
	color:#ffffff;
	background:#ff9300;
	border-radius:50%;
	padding:0 5px;
	text-align:center;
}
article ul li:before{
	content:"•";
}
article ol li:before{
	content:counter(num);
	counter-increment:num;
}

LESS:

.article{
	ul,ol{
		list-style-type:none;
		counter-reset:num;
		margin:0 0 20px 0;
		li{
			list-style-type:none;
			padding-left:20px;
			margin-bottom:4px;
			position:relative;
			&:before{
				position:absolute;
				top:0;
				left:0;
				color:@color_link;
				font-weight:600;
			}
		}
	}
	ul li:before{
		content:"•";
	}
	ol li:before{
		content:counter(num) ". ";
		counter-increment:num;
	}
}

Для того чтобы учитывался атрибут start у ol:

$('article ol').each(function(){
	var start=parseInt($(this).attr('start'));
	if(start>0){
		$(this).css('counter-reset','num '+(start-1));
	}
});

css