Популярные CSS хаки
Ниже приведён список самых популярных на сегодня CSS хаков. К большинству хаков прилагается скриншот, если я что-то упустил – пишите в коментариях.
1. Закруглённые края без использования изображений
< !–content goes here –>
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
2. Стильные списки
-
This is line one
-
Here is line two
-
And last line
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
3. Формы
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
4. Двойные кавычки (цытата)
blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman", Times, serif;
}
5. Эффект градиента для текста
CSS Gradient Text
h1 {
font: bold 330%/100% “Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
< !–[if lt IE 7]>
< ![endif]–>
6. Вертикальное центрирование при помощи line-height
div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}
Content here
7. Закруглённые углы с использованием изображений
width="15? height="15? class="corner"style="display: none" />
CONTENT
width="15? height="15? class="corner"style="display: none" />
.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}
.roundcont p {
margin: 0 10px;
}
.roundtop {
background: url(tr.gif) no-repeat top right;
}
.roundbottom {
background: url(br.gif) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
8.Использование нескольких классов
.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}
9. Горизонтальное центрирование
#container {
margin:0px auto;
}
10. Буквица
This paragraph has the class “introduction". If your browser supports the pseudo-class “first-letter", the first letter will be a drop-cap.
p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}
11. Предотвращаем перенос ссылок на новую строку, блок вылазит за границы элемента
a{
white-space:nowrap;
}
#main{
overflow:hidden;
}
12. Скролбар в фаерфоксе, убираем скролбар из textarea в IE
html{
overflow:-moz-scrollbars-vertical;
}
textarea{
overflow:auto;
}
Разработка интернет-магазинов, скриптов, SEO и повышение конвертации.
ych
2 мая, 2008
Интересные хаки=) Пойду пробовать
п.с. почему-то раньше под “хаки” подразумевал уязвимости=)))))
PaLyCH
4 Jun, 2008
Скорее всего потому что “хак” подразумевает скрытые возможности, уязвимости.
Hiway
23 Jul, 2008
Это вполне полезные трюки в CSS, но – это не хаки. Хаки в CSS – это ничто иное как использование определенных правил, которые воспринимаются только определенным браузером и игнорируются другими. Зачастую для в внедрения хаков использую специфические символы и определения перед классами, id или селекторами.
ZUMA
27 Jan, 2010
Тоже считаю, что это можно отнести к трюкам, я вообще то думал, что здесь будут расписаны проблемные места в CSS вёрстке и хаки (костыли) для их решения. Но в принципе инфа полезная, хотя и ожидалось совсем иное.
Гриша
14 Dec, 2010
Перевел интересную статью по CSS хакам. Возможно будет интересно.
http://www.clearboth.ru/article/css-hacks-for-firefox-opera-safari-and-internet-explorer.html