Популярные CSS хаки

Ниже приведён список самых популярных на сегодня CSS хаков. К большинству хаков прилагается скриншот, если я что-то упустил - пишите в коментариях.

1. Закруглённые края без использования изображений

1. <div id="container">
2. <b class="rtop">
3. <b class="r1″></b> <b class="r2″></b> <b class="r3″></b> <b class="r4″></b>
4. </b>
5. <!–content goes here –>
6. <b class="rbottom">
7. <b class="r4″></b> <b class="r3″></b> <b class="r2″></b> <b class="r1″></b>
8. </b>
9. </div>
10.  
11. .rtop, .rbottom{display:block}
12. .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
13. .r1{margin: 0 5px}
14. .r2{margin: 0 3px}
15. .r3{margin: 0 2px}
16. .r4{margin: 0 1px; height: 2px}

2. Стильные списки

1. <ol>
2. <li>
3. <p>This is line one</p>
4. </li>
5. <li>
6. <p>Here is line two</p>
7. </li>
8. <li>
9. <p>And last line</p>
10. </li>
11. </ol>
12.  
13. ol {
14. font: italic 1em Georgia, Times, serif;
15. color: #999999;
16. }
17.  
18. ol p {
19. font: normal .8em Arial, Helvetica, sans-serif;
20. color: #000000;
21. }

3. Формы

1. <form>
2. <label for="name">Name</label>
3. <input id="name" name="name"><br>
4. <label for="address">Address</label>
5. <input id="address" name="address"><br>
6. <label for="city">City</label>
7. <input id="city" name="city"><br>
8. </form>
9.  
10. label,input {
11. display: block;
12. width: 150px;
13. float: left;
14. margin-bottom: 10px;
15. }
16.  
17. label {
18. text-align: right;
19. width: 75px;
20. padding-right: 20px;
21. }
22.  
23. br {
24. clear: left;
25. }

4. Двойные кавычки (цытата)

1. blockquote:first-letter {
2. background: url(images/open-quote.gif) no-repeat left top;
3. padding-left: 18px;
4. font: italic 1.4em Georgia, "Times New Roman", Times, serif;
5. }

5. Эффект градиента для текста

1. <h1><span></span>CSS Gradient Text</h1>
2.  
3. h1 {
4. font: bold 330%/100% "Lucida Grande";
5. position: relative;
6. color: #464646;
7. }
8. h1 span {
9. background: url(gradient.png) repeat-x;
10. position: absolute;
11. display: block;
12. width: 100%;
13. height: 31px;
14. }
15.  
16. <!–[if lt IE 7]>
17. <style>
18. h1 span {
19. background: none;
20. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
21. }
22. </style>
23. <![endif]–>

6. Вертикальное центрирование при помощи line-height

1. div{
2. height:100px;
3. }
4. div *{
5. margin:0;
6. }
7. div p{
8. line-height:100px;
9. }
10.  
11. <p>Content here</p>

7. Закруглённые углы с использованием изображений

1. <div class="roundcont">
2. <div class="roundtop">
3. <img src="tl.gif" alt=""
4. width="15″ height="15″ class="corner"
5. style="display: none" />
6. </div>
7.  
8. CONTENT
9.  
10. <div class="roundbottom">
11. <img src="bl.gif" alt=""
12. width="15″ height="15″ class="corner"
13. style="display: none" />
14. </div>
15. </div>
16.  
17. .roundcont {
18. width: 250px;
19. background-color: #f90;
20. color: #fff;
21. }
22.  
23. .roundcont p {
24. margin: 0 10px;
25. }
26.  
27. .roundtop {
28. background: url(tr.gif) no-repeat top right;
29. }
30.  
31. .roundbottom {
32. background: url(br.gif) no-repeat top right;
33. }
34.  
35. img.corner {
36. width: 15px;
37. height: 15px;
38. border: none;
39. display: block !important;
40. }

8.Использование нескольких классов

1. <img src="image.gif" class="class1 class2″ alt="" />
2.  
3. .class1 { border:2px solid #666; }
4. .class2 {
5. padding:2px;
6. background:#ff0;
7. }

9. Горизонтальное центрирование

1. <div id="container"></div>
2.  
3. #container {
4. margin:0px auto;
5. }

10. Буквица

1. <p class="introduction"> This paragraph has the class "introduction". If your browser supports the pseudo-class "first-letter", the first letter will be a drop-cap. </p>
2.  
3. p.introduction:first-letter {
4. font-size : 300%;
5. font-weight : bold;
6. float : left;
7. width : 1em;
8. }

11. Предотвращаем перенос ссылок на новую строку, блок вылазит за границы элемента

1. a{
2. white-space:nowrap;
3. }
4.  
5. #main{
6. overflow:hidden;
7. }

12. Скролбар в фаерфоксе, убираем скролбар из textarea в IE

1. html{
2. overflow:-moz-scrollbars-vertical;
3. }
4.  
5. textarea{
6. overflow:auto;
7. }

Здесь можно оставить свои комментарии.