CSS-Tricks по-русски

Свойство z-index: детальный обзор

Wed, 04 Apr 2012 00:00:00 GMT

Большинство CSS свойств просты для понимания. Зачастую, применения какого-либо из них к элементу разметки даёт немедленный результат - стоит только обновить страницу, как видно эффект применения. Однако, есть некоторые свойства, которые сложнее и будут работать только в случае определённых обстоятельств.

Свойство z-index относится ко второй группе, которое несомненно вызывает больше смятения, чем любое другое. По иронии, однако, при полном понимании того, что такое z-index, он очень прост в использовании и часто является эффективным способом преодоления многих проблем макета.

В этой статье, мы расстмотрим что такое z-index, какие есть проблемы в его понимании, а также обсудим некоторые примеры его использования. Также рассмотрим разницу его обработки браузерами, особенно в предыдущих версиях Internet Explorer и FireFox.

Cheat-sheet jQuery 1.7.1

Wed, 14 Dec 2011 00:00:00 GMT

Cheat-sheet последней версии jQuery (1.7.1). Далее

Поговорим о свойстве white-space

Sun, 23 Oct 2011 00:00:00 GMT

В CSS есть такое полезное свойство, как white-space, которое остаётся без внимания у начинающих верстальщиков. Возможно, вы обходились без него довольно долго, но однажды узнав, что это такое, и как его использовать, вы поймёте как много вы потеряли.

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

Чем удобен селектор :any()

Tue, 12 Apr 2011 00:00:00 GMT

Недавно я наткнулся на селектор, который появился в новой версии браузера FireFox (а также в ночных билдах движка webkit). Называется этот селектор :any(). В этой статье мы рассмотрим для чего он предназначен и чем он может быть нам полезен.

Метод data в jQuery

Tue, 16 Nov 2010 00:00:00 GMT

Метод data в jQuery даёт нам возможность связать произвольные данные с любым объектом документа или javaScript, что позволяет сделать ваш код более кратким и читаемым. Начиная с версии jQuery 1.4.3 появилась возможность использовать этот метод для объектов javaScript, а также отслеживать изменения этих данных.

Что такое border-image?

Fri, 23 Jul 2010 00:00:00 GMT

В CSS3 появилось новое свойство border-image, которое выглядит немного запутанным. Это свойство позволит вам создавать элементы с границей, сформированной из картинки. В этой статье я расскажу как свойство border-image работает с сегодняшними браузерами.

Трюки с textarea

Tue, 20 Jul 2010 00:00:00 GMT

В статье представлено несколько трюков, которые вы, возможно, не знали и которые вы найдёте полезными в своих разработках.

CSS и прозрачность элементов.

Fri, 09 Apr 2010 00:00:00 GMT

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

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

Селекторы по атрибутам в CSS

Sat, 20 Mar 2010 00:00:00 GMT

В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. Вы, конечно, уже знаете про ID и классы. Давайте взглянем на следующий html:

<h2 id="first-title" class="magical" rel="friend">David Walsh</h2>

У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы можете либо по его идентификатору (#first-title), либо по имени класса (.magical). Однако знали ли вы, что вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:

h2[rel=friend] {
	/* woohoo! */
}

Существует множество вариантов их использования. Давайте разберёмся более детально с различными опциями и попытаемся придумать сценарии использования атрибутов в реальной жизни.

CSS3: Flexible Box Model

Thu, 04 Mar 2010 00:00:00 GMT

Flexible Box Model - часть спецификации CSS3, которая не получила широкого внимания. Давайте исправим это упущение и рассмотрим как эта возможность может повлиять на дизайн сайтов.