Мой набор 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;
}