Когда пишется код CSS, очень легко попасть в одну из ловушек. Чтобы их преодолеть, нужно использовать небольшие и эффективные трюки. В данном уроке описывается несколько моментов, которые помогут при работе над CSS частью вашего проекта. 1. Задаем стили для кнопок Начнем с классических кнопок HTML. Когда создаются кнопки, например, input type"submit" или button, и хочется получить точность до пикселя, нужно вспомнить о следующих командах: 01 /* Удаляем избыточный отступ в сторону для IE */ 02 .button{ 03 overflow: visible; 04 } 05 06 /* Удаляем избыточный отступ внутрь для Firefox */ 07 .button::-moz-focus-inner{ 08 border: 0; 09 padding: 0; 10 } 2. Используем псевдо-элементы Несомненно, что вам уже известны псевдо-элементы, такие как :before и :after, которые помогают определять содержание, вставляемое перед (или после) основного элемента. Однако, элементы input и img не имеют содержания и псевдо-элементы не работают с ними. А элемент hr позволяет использовать псевдо-элементы. Также нужно помнить о разнице между :before и ::before. IE8 допускает использование только одинарного двоеточия. 3. Фоновый градиент для всего раздела body Если вы пробовали использовать CSS3 градиент для тега body, то наверняка заметили, что он не растягивается, а повторяется. Чтобы исправить положение используйте следующий код: 1 html { 2 height: 100%; 3 } 4 body { 5 height: 100%; 6 margin: 0; 7 background-repeat: no-repeat; 8 background-attachment: fixed; 9 } 4. Отсутствие переходов для градиентов К сожалению, ни один из браузеров не поддерживает переходы градиентов (пока). Но можно использовать следующие трюки: 1. Использовать свойство background-position для :hover, чтобы создать иллюзию перехода градиента. В действительности используется сдвиг по оси Y. 01 a{ 02 background: linear-gradient(orange, red) repeat-x; 03 display: inline-block; 04 padding: 20px; 05 } 06 07 a:hover{ 08 background-color: red; 09 background-position: 0 -15px; 10 transition: background-position .1s linear; 11 } 2. Трансформация background-color и использование изображения градиента, которое будет иметь изменяющуюся прозрачность. Такая техника создаст иллюзию перехода градиента. 01 a{ 02 background-color: orangered; 03 background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); 04 transition: background-color .1s linear; 05 display: inline-block; 06 padding: 20px; 07 } 08 09 a:hover{ 10 background-color: red; 11 } 5. Зазор между элементами inline-block Допустим, вы используете inline-block вместо float для горизонтального списка. При этом появляется зазор между вашими элементами inline-block. чтобы исключить его необходимо использовать "грязную" разметку. То есть, вместо четкой структуры: 1 <ul> 2 <li>один</li> 3 <li>два</li> 4 <li>три</li> 5 </ul> Нужно писать так: 1 <ul> 2 <li>один</li><li>два</li><li>три</li> 3 </ul> 6. Когда height: 100% действительно работает? Все достаточно просто: когда вы используете height: 100% для элемента, всегда думайте о высоте его родителя. Если высота родителя не определяется в стилях, то внутренний элемент будет иметь 100% высоты от ничего. Вот такой широко распространенный пример разметки: 1 <div id="parent"> 2 <div id="child">2</div> 3 </div> Стили для него: 01 #parent{ 02 height: 400px; 03 padding:10px; 04 background:red; 05 } 06 07 #child{ 08 height: 100%; 09 background:green; 10 } Зеленый цвет элемента #child с помощью правила height: 100% будет растянут на все 400px по вертикали. 7. Скругленные углы для таблиц Трюк заключается в установке свойства таблицы border-spacing в значение 0. Свойство border-collapse по умолчанию имеет значение separate, поэтому нужно установить его в значение collapse для IE7 и старше (для обратной совместимости кода). 1 table { 2 *border-collapse: collapse; /* IE7 и старше */ 3 border-spacing: 0; 4 border-radius: 5px; 5 } 8. Модель элемента ввода Когда разрабатывается элемент поиска, например, то после установки одинаковых значений для свойств height или width элементов input type="submit" и input type="text" результат обычно расстраивает. Причина расстройств заключается в том, что для элемента input type="submit" используется модель определения размеров border-box, а для элемента input type="text" - модель content-box (в IE и FF). Чтобы устранить причину расстройств, нужно использовать одинаковые модели для элементов ввода. Для этого используется свойство CSS3 box-sizing: 1 box-sizing: content-box | padding-box | border-box;