Закажи “Сайт под ключ” и получи

в подарок:

  • Домен !
  • Хостинг !
  • 10% скидки на следующий заказ !

Статьи

8 CSS ловушек и способы их обхода

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

1). Стиль для кнопок

Классические кнопки HTML всегда были проблемой визуализации для верстальщиков. Начнем с того, что делая кнопки, к примеру, input type»submit» или же button, нам нужна точность до 1 пиксела, то надо прописывать следующие команды:

/* Удаляем избыточный отступ в сторону для IE */
.button{
overflow: visible;
}

/* Удаляем избыточный отступ внутрь для Firefox */
.button::-moz-focus-inner{
border: 0;
padding: 0;
}

2. Принимаем на вооружение псевдо элементы

Сомнений нет, что вам уже известны псевдо-элементы, в том числе :before и :after, которые могут помочь определять содержание, вставляемое перед (либо после) главного элемента. Но есть такие элементы как img и input, которые не имеют содержания и псевдо элементы не действуют с ними. А элемент hr дает возможность использовать псевдо элементы. Кроме того, надо иметь в виду о разнице между ::before и :before. Браузер IE 8 дозволяет применение лишь одинарного двоеточия.

3. Градиент фона для всего раздела body

В случае если вы пробовали применять CSS3 градиент для тега body то, наверное, давно обнаружили, что сам градиент не растягивается, а повторяется. Дабы поправить положение применяйте последующий код:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

4. В css Отсутствует переход для градиентов

Как не прискорбно говорить, ни 1 из нынешних браузеров не поддерживает переходы градиентов (думаю, в будущем это положение изменится). Хотя применяют следующие трюки: 1. Использовать свойство background-position для :hover, дабы сделать иллюзию перехода градиента. В действительности применяется сдвиг по оси Y.

a{
background: linear-gradient(orange, red) repeat-x;
display: inline-block;
padding: 20px;
}
a:hover{
background-color: red;
background-position: 0 -15px;
transition: background-position .1s linear;
}

2. Трансформация свойства background-color и внедрение изображения градиента, которое будет иметь прозрачность. Эта техника сделает иллюзию перехода градиента.

a{
background-color: orangered;
background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
transition: background-color .1s linear;
display: inline-block;
padding: 20px;
}

a:hover{
background-color: red;
}

5. Промежуток между элементами inline-block

Предположим, вы используете inline-block замес-то float для горизонтального списка. При этом возникает промежуток между вашими элементами inline-block. Дабы ликвидировать зазор нужно применять «грязную» разметку. Другими словами, взамен четкой структуры:

<ul>
<li>один</li>
<li>два</li>
<li>три</li>
</ul>

Нужно прописывать так:

<ul>
<li>один</li><li>два</li><li>три</li>
</ul>

Как видите, все намного проще, чем мы думаем. Скажу пару слов о бирже GoGetlinks, которая как раз имеет такую структуру, которую я выше привел.

6. Когда height: 100% на самом деле действует?

Все довольно просто: когда вы используете height: 100% для составляющего элемента, постоянно думайте о высоте его родителя. Если высота родителя не определяется в файле стилей, то внутренний элемент родителя будет иметь 100 процентов высоты от НИЧЕГО. Вот такой обширно известный пример разметки:

<div id="roditel">
<div id="rebenok">II</div>
</div>

Стили для этого примера:

#parent{
height: 400px;
padding:10px;
background:black;
}

#child{
height: 100%;
background:blue;
}

Синий цвет идентификатора #child при помощи правила height: 100% будет растягиваться на все 400px по вертикали родителя.

7. Как округлить углы для таблиц?

Трюк содержится в установке характеристики border-spacing для таблицы со значением 0. По умолчанию свойство border-collapse имеет значение separate, потому нам необходимо поставить его в значение collapse для браузера IE7 и старше (это нужно для обратной совместимости кода).

table {
*border-collapse: collapse; /* IE7 и старше */
border-spacing: 0;
border-radius: 5px;
}

8. Модель элемента поиска и ввода

Когда пишется составляющее поиска, то в последствии установки схожих значений для свойств height либо width элементов input type="submit" и input type="text", то результатом мы недовольны. Первопричина наших расстройств результатом, содержится в том, что для элемента input type=»submit» применяется модель определения объемов border-box, а для элемента input type=»text» — модель content-box (в FF и IE). Чтобы ликвидировать причину проблемы, необходимо использовать одни и те же модели для элементов ввода. Чтобы достичь желаемого результата применяется свойство CSS3 box-sizing:

box-sizing: content-box | padding-box | border-box;

Статью подготовил Alex Lenk для блога buyhtml.ru

Добавить комментарий