Подборка полезных CSS снипетов для верстальщика (15 штук.)

CSS можно изучать и изучать, наверно бесконечно, решил опубликовать еще одну заметку на эту тему. Которая будет полезна как Вам так и мне.

Установка font-size для body (поможет легко использовать em вместо px):

body {

   font-size: 62.5%; /* font-size 1em = 10px */

}

p {

   font-size: 1.2em; /* 1.2em = 12px */

}

Вертикальное выравнивание картинки в блоке (полезно когда картинки разного размера):

div {

	width: 100px;

	height: 100px;

	line-height: 100px;

	overflow: hidden;

	}

	div img {

		max-width: 100px;

		vertical-align: middle;

		display: block;

		}

Изменение цвета выделения:

::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

Предотвращение схлопывания родительского элемента если внутри есть плавающие блоки (clearfix):

.clearfix:before, 

.clearfix:after { content: ""; display: table; }

.clearfix:after { clear: both; }

.clearfix { *zoom: 1; }

Можно использовать и вот такую конструкцию:

.clr {clear: both; height: 0; overflow: hidden;}

а перед закрывающим тегом родительского блока вставить:

<div class="clr"></div>

Запрет выделения текста:

div {

	-webkit-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	user-select: none;

	}

"Подсветка внешних ссылок"

a {

	color: #c06;

	}

	a[target*="blank"] {

		color: #f50;

		}

	a[target*="blank"]:after {

		content: url(icon.png); /*маленькая иконка для большей наглядности*/

		}

Размытый текст:

h1 { /*ie9 и старше, как всегда отсасывает... юзаем костыли*/

	color:transparent;

	text-shadow:   0 0 10px #ccc;  

	}

Треугольник на css:

.someclass {

	width: 0; 

	height: 0; 

	border-left:solid 5px transparent;

	border-right:solid 5px transparent;	

	border-bottom:solid 5px black;

	}

- Тоже самое применимо к спискам:

ul {

    margin: 0.75em 0;

    padding: 0 1em;

    list-style: none;

}

li:before { 

    content: "";

    border-color: transparent #111;

    border-style: solid;

    border-width: 0.35em 0 0.35em 0.45em;

    display: block;

    height: 0;

    width: 0;

    left: -1em;

    top: 0.9em;

    position: relative;

}

Кроссбраузерный inline-block для блочных элементов:

li {

	width: 200px;

	min-height: 250px;

	display: -moz-inline-stack;

	display: inline-block;

	vertical-align: top;

	margin: 5px;

	zoom: 1;

	*display: inline;

	}

Замена текста картинкой (новый вариант без text-indent):

.ir { 

	border: 0; 

	font: 0/0 a; 

	text-shadow: none; 

	color: transparent; 

	background-color: transparent; 

	}

Видимый контур у всех элементов (полезно для отладки):

* { outline: 2px dotted red }

* * { outline: 2px dotted green }

* * * { outline: 2px dotted orange }

* * * * { outline: 2px dotted blue }

* * * * * { outline: 1px solid red }

* * * * * * { outline: 1px solid green }

* * * * * * * { outline: 1px solid orange }

* * * * * * * * { outline: 1px solid blue }

Стили для печати страницы:

@media print {

  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */

  a, a:visited { text-decoration: underline; }

  a[href]:after { content: " (" attr(href) ")"; }

  abbr[title]:after { content: " (" attr(title) ")"; }

  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */

  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }

  thead { display: table-header-group; } /* h5bp.com/t */

  tr, img { page-break-inside: avoid; }

  img { max-width: 100% !important; }

  @page { margin: 0.5cm; }

  p, h2, h3 { orphans: 3; widows: 3; }

  h2, h3 { page-break-after: avoid; }

}

Стили для таблиц (от bootstrap):

/*TABLES*/

table.bordered {

	max-width: 100%;

	background-color: transparent;

	border-collapse: collapse;

	border-spacing: 0;

	width: 100%;

	margin-bottom: 18px;

}



table.bordered {

	border: 1px solid #dddddd;

	border-collapse: separate;

	*border-collapse: collapsed;

	border-left: 0;

	-webkit-border-radius: 4px;

	-moz-border-radius: 4px;

	border-radius: 4px;

}



table.bordered caption + thead tr:first-child th,

table.bordered caption + tbody tr:first-child th,

table.bordered caption + tbody tr:first-child td,

table.bordered colgroup + thead tr:first-child th,

table.bordered colgroup + tbody tr:first-child th,

table.bordered colgroup + tbody tr:first-child td,

table.bordered thead:first-child tr:first-child th,

table.bordered tbody:first-child tr:first-child th,

table.bordered tbody:first-child tr:first-child td { border-top: 0; }



table.bordered caption + thead tr:first-child th,

table.bordered caption + thead tr:first-child td,

table.bordered colgroup + thead tr:first-child th,

table.bordered colgroup + thead tr:first-child td,

table.bordered thead:first-child tr:first-child th,

table.bordered thead:first-child tr:first-child td { border-top: 0; }



table.bordered tbody + tbody { border-top: 2px solid #dddddd; }



table.bordered tbody tr:hover td,

table.bordered tbody tr:hover th { background-color: #f5f5f5; }



table.bordered tbody tr:nth-child(odd) td,

table.bordered tbody tr:nth-child(odd) th { background-color: #f9f9f9; }



table.bordered th { font-weight: bold; }



table.bordered th,

table.bordered td {

	padding: 8px;

	line-height: 18px;

	text-align: left;

	vertical-align: top;

	border-top: 1px solid #dddddd;

}



table.bordered th,

table.bordered td { border-left: 1px solid #dddddd; }



table.bordered thead th { vertical-align: bottom; }



table.bordered thead:first-child tr:first-child th:first-child,

table.bordered tbody:first-child tr:first-child td:first-child {

	-webkit-border-top-left-radius: 4px;

	border-top-left-radius: 4px;

	-moz-border-radius-topleft: 4px;

}



table.bordered thead:first-child tr:first-child th:last-child,

table.bordered tbody:first-child tr:first-child td:last-child {

	-webkit-border-top-right-radius: 4px;

	border-top-right-radius: 4px;

	-moz-border-radius-topright: 4px;

}



table.bordered thead:last-child tr:last-child th:first-child,

table.bordered tbody:last-child tr:last-child td:first-child {

	-webkit-border-radius: 0 0 0 4px;

	-moz-border-radius: 0 0 0 4px;

	border-radius: 0 0 0 4px;

	-webkit-border-bottom-left-radius: 4px;

	border-bottom-left-radius: 4px;

	-moz-border-radius-bottomleft: 4px;

}



table.bordered thead:last-child tr:last-child th:last-child,

table.bordered tbody:last-child tr:last-child td:last-child {

	-webkit-border-bottom-right-radius: 4px;

	border-bottom-right-radius: 4px;

	-moz-border-radius-bottomright: 4px;

}



table.bordered th,

table.bordered td { padding: 4px 5px; }





table.bordered.character {

	border: none !important;

	padding: 0 !important;

	background: #fff !important;

	}

22.02.2013 02:17:59

admin

1372

← Красивые checkbox и radio без javascript 12 полезных трюков в .htaccess →

Комментарии

Тут еще нет комментариев, Вы можете стать первым...