Полезные CSS трюки

В этой статье Вы найдете 25 невероятно полезных CSS трюков, которые помогут Вам сделать дизайн сайта интереснее. Некоторые методы могут быть Вам знакомы, но есть же и те которые Вы не знаете, а их желательно знать.

1. Изменение фонового цвета текста в разных браузерах.

Возможно, Вы не знали этого раньше! С помощью CSS Вы можете изменять отображение фоновый цвет текста к зависимости от браузера.


 ::selection{ /* Safari и Opera */
 background:#c3effd;
 color:#000;
 }
 ::-moz-selection{ /* Firefox */
 background:#c3effd;
 color:#000;
 }
 

2. Полосы прокрутки в Firefox.

Браузеры Firefox обычно скрывают полосы прокрутки, если размер страницы меньше видимого окна. Но Вы можете это исправить с помощью простого трюка.


 html{ 
 overflow-y:scroll; 
 }
 

3. Распечатка страниц или как создавать разрывы страниц.

Хотя большинство интернет пользователей предпочитают читать статьи с мониторов компьютера, но все же есть и такие пользователи, любители читать напечатанную версию. С помощью CSS Вы можете контролировать разрывы страниц. Для этого необходимо добавить стиль для любого тега, который и будет создавать разрыв страницы. Тег с классом будет автоматически переноситься на новую страницу.

Примечание: не стоит использовать этот класс для каждого абзаца.

.page-break{ page-break-before:always; }

4. Использование !important.

Опытные CSS программисты, как правило, осознают это, а новички часто упускают это важное правило с CSS. Добавляя правило !important Вы можете увеличить его приоритет над другими последующими правилами. В примере, приведенном ниже, фон страницы будет синим, а не красным, так как используеться правило !important.


 .page {
 background-color:blue !important;
 background-color:red;
 }
 

5. Замена текста на изображение.

Это хороший трюк для создания красочного дизайна сайта. Вместо скучного текста будет видна красочная картинка. Этот трюк никак не повлияет на индексацию страницы поисковыми машинами. Поисковые машины не будут видеть картинку, но зато будут видеть текст который Вы заменили.


 .header{
 text-indent:-9999px;
 background:url('someimage.jpg') no-repeat;
 height: 100px; /*размеры картинки*/
 width:500px;
 }
 

6. Минимальная высота в браузерах.

Браузеры Internet Explorer не понимают значение минимальной высоты, но этот трюк позволит это обойти.


 #container{
 height:auto !important; /*для всех браузеров, кроме IE6*/
 min-height:500px;
 height:500px;
 } 
 

7. Выделение ссылок открывающихся в новом окне.

Представленный фрагмент CSS кода позволяет выделать только те ссылки, которые будут открываться в новом окне. Это позволит пользователю сразу видеть те ссылки, которые будут открываться в новом окне.


 a[target="_blank"]:before,
 a[target="new"]:before {
 margin:0 5px 0 0;
 padding:1px;
 outline:1px solid #333;
 color:#333;
 background:#ff9;
 font:12px "Zapf Dingbats";
 content: "\279C";
 }
 

8. Разные стили для одного нумерованного списка.

В нумерованном списке Вы можете отображать разными стилями нумерацию списка и сам список. Ниже приведенный фрагмент кода позволит Вам это выполнить.

 
 ol {
 font: italic 16px Georgia, Times, serif;
 color: #999999;
 }
 ol p {
 font: normal 14px Arial, Helvetica, sans-serif;
 color: #000000; 
 } 
 

 <ul>
 <ol><p>Первый</p></ol>
 <ol><p>Второй</p></ol>
 <ol><p>Третий</p></ol>
 …
 <ol><p>Последний</p></ol>
 </ul>
 

9. Отображение первых букв абзаца.

В любом абзаце Вы можете отображать первую букву на несколько строк ниже, как это часто используют газеты и журналы.


 p:first-letter{
 display:block;
 margin:5px 0 0 5px;
 float:left;
 color:#FF3366;
 font-size:25px;
 font-family:Georgia;
 }
 

10. Прозрачность в браузерах.

Хотя CSS3 включает в себя создание прозрачности, но не все браузеры это поддерживают. Сейчас я Вам представлю маленький CSS фокус кросс прозрачности в браузерах.


 .transparent_class { 
 filter:alpha(opacity=50); 
 -moz-opacity:0.5; 
 -khtml-opacity: 0.5; 
 opacity: 0.5; 
 } 
 

11. Вертикально центрирование текста.

Если Вы используете контейнер с фиксированной высотой и Вам необходимо вертикальное центрирование в нем текста, используйте для этого:

line-height:30px;

12. Центр фиксированной ширины.

Если Вы используете фиксированную ширину страницы, Вы можете отображать контейнер по центру при любых расширениях монитора.


 body{
 width:1000px;
 margin:0 auto;
 }

13. Удаление вертикальной прокрутки текстового поля в IE

В форме ввода, IE всегда добавляет полосу прокрутки, не зависимо от высоты и ширины содержания в нем. Это можно исправить простым CSS трюком.


 textarea{
 overflow:auto;
 }
 

14. Удаление границ ссылок.

Некоторые браузера, такие как Firefox и IE, добавляют пунктирные границы ссылкам при нажатии. Если вас нужно от этого избавиться, используйте следующий CSS код.

a:active, a:focus{ outline:none; }

15. Предотвращение исчезания элементов в IE

Иногда IE ведет себя странным образом. Он не показывает некоторые элементы при их выборе. Это происходит из-за позиции элементов. Чтобы это не происходило, добавьте исчезаемому элементы position:relative.

16. Конкретные иконки.

Селекторы атрибутов в CSS – очень мощные. В них встроены множество опций для управления стилями различных элементов. Например, Вы хотите к ссылке с doc файлом добавить иконку, которая будет показывать, что вы ссылаетесь именно на doc файл. Этот метод можно использовать и для других типов файлов.


 a[href$='.doc'] {
 padding:0 20px 0 0;
 background:transparent url(/img/icons/doc.gif) no-repeat center right;
 }
 

17. Указатель курсора.

Если у вас уникальный дизайн страницы, то все должно быть уникальным, вплоть до курсора мыши. Изменить курсор мыши Вы можете для различных действий, таких как открытие ссылки, наведение на кнопку и т.д.


 input[type=submit],label,select,.pointer 
 { 
 cursor:pointer; 
 }
 

18. Заглавный текст.

Этот трюк особенно полезен для отображения названия статьи со всеми его словами. Просто используйте:

text-transform: capitalize;

19. Малый текст шапки.

Это одно из менее распространенных свойств CSS. Это свойство капитализирует все буквы текста, размер текста после первой буквы меньше, чем первые буквы.

font-variant:small-caps;

20. Выделение поля ввода текста.

Этот трюк позволит выделить поле ввода. Он используется для заострения внимания пользователя. Этот трюк не работает в IE.


 input[type=text]:focus, input[type=password]:focus{
 border:2px solid #000;
 }
 

21. Удаление голубой каемки.

Изображение гиперссылки часто приобретает никуда не нужную голубую каемку. Это ужасно выглядит и почти никогда не соответствует Вашему дизайну. Можно удалить границы на всех изображениях гиперссылках.

a img{ border:none; }

22. Бестабличные формы. Использование ярлыков.

Ушли в прошлое те дни, когда таблицы использовали для макета форм. CSS позволяет создавать красочные формы используя для этого ярлыки. Использование ярлыков гарантирует, что ваша форма будет более доступна. Вот пример HTML и CSS кода для бестабличной формы.


 <form method="post" action="#" >
 <p><label for="username" >Пользователь</label>
 <input type="text" id="username" name="username" />
 </p>
 <p><label for="password" >Пароль</label>
 <input type="password" id="password" name="pass" />
 </p>
 <p><input type="submit" value="Отправить" /></p>
 </form>
 

 p label{
 width:100px;
 float:left;
 margin-right:10px;
 text-align:right;
 }
 

23. Установление соответствия размеров шрифта.

Настройка соответствия шрифта в теге body составляет 62,5%. Это позволяет сделать 1em=10px.

body{ font-size:62.5%; }

24. Выделение тегов Acronym и Abbr.

Теги Acronym и Abbr предоставляют полезную информацию об аббревиатурах и сокращениях. Большинство браузеров их не выделяют. Этот кусок кода позволит их выделить.


 acronym, abbr{
 border-bottom:1px dotted #333;
 cursor:help;
 }
 

25. CSS Сброс.

Как-то про сброс я уже упоминал в своих статьях. В этой статье я предоставлю более полный фрагмент CSS кода.

Кто не читал мои предыдущие статьи, CSS сброс – это сбрасывание стилей браузера по-умолчанию, предотвращение любого несоответствия стилей в браузерах.


 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, font, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
 }
 body {
 line-height: 1;
 }
 ol, ul {
 list-style: none;
 }
 blockquote, q {
 quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
 content: '';
 content: none;
 }
 :focus {
 outline: 0;
 }
 ins {
 text-decoration: none;
 }
 del {
 text-decoration: line-through;
 }
 table {
 border-collapse: collapse;
 border-spacing: 0;
 }
 

На этом пока все.

Понравился урок? Добавьте его к себе в закладки.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *