Типичный аккордеон, но реализованный только с помощью CSS3 свойств.

Есть разные варианты аккордеона построенного только на CSS, но все они используют, как правило, псевдо класс :target, у которого есть недостатки, такие как невозможность закрытия контента после раскрытия и одновременного открытия нескольких скрытых элементов.

А вот с помощью скрытых чекбоксов (флажков) мы можем управлять открытием и закрытием. А для того, чтобы одновременно был открыт только один пункт аккордеона используются radio кнопки.

Читать полностью

Итак, мы продолжаем серию статей по CSS. В предыдущей статье мы с Вами рассмотрели применение CSS свойств границы (border) элементов страницы. И я обещал Вам, что расскажу о том, как использовать для прорисовки границ — картинки. Об этом и пойдет сегодня речь.

Чтобы использовать изображения для построения границ будем использовать CSS cвойство border-image.

Толщина границ задается свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.

Читать полностью

Всем привет!

Сегодня я хочу поговорить с Вами об одном очень эффективном инструменте, который очень прост, но в то же время позволяет придать элементам Вашего сайта неповторимости.
Мы будем говорить о границах (border).

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

Но давайте обо всем по порядку.

Читать полностью

Одним из наиболее часто используемых при верстке сайтов css-свойств является свойство фона элемента страницы (background). Сегодня мы поговорим с Вами о том, как можно изменять размеры фонового изображения при помощи CSS.

В более старой версии CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняла свои фиксированные размеры. Изменить размеры фоновой картинки было нельзя. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат.

Читать полностью