Шпоры по CSS

Мой набор css трюков и хитростей, собранных за период программирования в вебе. Собрал их в одной заметке с целью копирования, когда лень набирать код руками. Больше штучек на css можете найти в разделе CSS в заметках веб-программиста. Пользуйтесь, изучайте и делитесь.

Начало файла style.css:

	html{height:100%;}
	body {
		color: #424242;
		font: Arial,Helvetica,'MS Sans Serif',sans-serif;
		font-size:14px;
		font-family:arial;
	}
	

Подключение шрифта из локали, более менее кроссбраузерный вариант:

	@font-face {
		font-family: 'helveticaneuecyrblack';
		src: url("/fonts/helveticaneuecyr-black-webfont.eot");
		src: url("/fonts/helveticaneuecyr-black-webfont.eot?#iefix") format("embedded-opentype"),
		url("/fonts/helveticaneuecyr-black-webfont.woff") format("woff"),
		url("/fonts/helveticaneuecyr-black-webfont.ttf") format("truetype");
		font-weight: normal;
		font-style: normal; 
	}
	

Обычно использую для "wrapper" как контентная часть, размещенная по центру и с нужной шириной:

	.inner {
		width:980px; margin:0 auto;
	}
	.inner600 {
		width:600px; margin:0 auto;
	}
	

Клирфикс(clearfix). блок, который убирает обтекаемость верхних блоков, обычно размещается после обтекаемых элементов:

	.clear {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
	

Линия без бордера, тени и т.д. , выглядит как горизонтальная линия разделения блоков:

	hr{
		border: 1px;
		height: 3px;
		display: block;
		border-bottom: 1px solid #E0E0E0;
		border-top: none;
		border-left: none;
		border-right: none;
		margin: 20px 0;
	}
	

Кроссбраузерное оформление скругленных углов блока:

	.block{
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
	}
	

Кроссбраузерное оформление тени блоков:

	.block{
		box-shadow: 0px 0px 4px 0px rgb(70, 70, 70);
		-webkit-box-shadow: 0px 0px 4px 0px rgb(70, 70, 70); 
		-moz-box-shadow: 0px 0px 4px 0px rgb(70, 70, 70);  
	}
	

Кроссбраузерное оформление прозрачности блока:

	.block{
		-moz-opacity: 0.50;
		opacity:.50;
		filter: alpha(opacity=50);
	}
	

Кроссбраузерное оформление градиента на фоне блока:

	.block{
		background: rgb(242,245,246); /* Old browsers */
		background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */ 
	}
	

Хак для мозилы, очень часто приходится использовать из-за некоторых особенностей мозилы:

	body, x:-moz-any-link, x:only-child {
		margin-top: -35px; 
	}