Верстка

Как сделать «Аккордеон» на CSS3

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

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

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

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

1

Как прижать подвал (footer) к низу экрана

footer-down

Всем привет!

Сайт выглядит эстетично, если все его элементы находятся на своих местах. Однако часто бывают случаи, когда все вроде бы нормально, но что-то все-таки не так... Например, если страница короткая, футер не прижат к низу страницы, а находится там, где ему и положено — после основного блока сайта. Это смотрится не очень красиво.

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

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

Комментарии отключены

Clearfix — метод очищения потока с сохранением структурной верстки

clearfix

Всем доброго времени суток. Мы продолжаем серию уроков по блочной верстке.

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

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

Сейчас я дам Вам все в одном месте. Начнем...

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

Комментарии отключены

Использование фонов при оформлении сайта. Часть 2

css_background-2

И снова здравствуйте, дорогие друзья!

Постоянно замечаю, что когда готовлю для Вас какую-нибудь новую статью — сам учусь чему-то новому, или вспоминаю что-то старое (давно забытое). И это здорово!..

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

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

Комментарии отключены

Использование фонов при оформлении сайта. Часть 1

background

Всем привет.

Совсем недавно мы с Вами познакомились со свойствами границ (border) при использовании CSS. Сегодня мы займемся рассмотрением свойств фонов.

Эта тема также очень важна, так как ни один современный сайт не обходится без применения фоновых изображений.

Приступим.

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

3

Что такое DOCTYPE и с чем его едят?

doctype

Каждый, кто имеет дело с html-кодом, верстает или пока еще только учится верстать сайты, просто обязан знать о том, что в начале каждой HTML страницы перед тегом должен стоять тег DOCTYPE.

Именно о нем то мы сегодня и поговорим с Вами.

Тег DOCTYPE (Document Type Definition) в начале HTML страницы указывает на тип документа, который вы будете использовать при написании HTML-кода страницы. Это непарный тег, то есть у него нет закрывающего тега.

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

Комментарии отключены

Свойство border-image — Как сделать графическую границу

border-image-1

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

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

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

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

Комментарии отключены