Блок Аккордеон на CSS3Пример создания блоков в стиле "Аккордеон" исключительно средствами CSS3,
без использования javascript и дополнительных изображений.

Существует много интересных решений и возможностей для создания эффектных, и компактных блоков с содержанием, выполненных в стиле "Аккордеон". Посмотрите пример работы такого "Аккордеона" разработанного исключительно средствами CSS3. Попробуйте изменять размер окна браузера и убедитесь, что этот "аккордеон" отлично вписывается в любые размеры экранов пользовательских устройств:)

Вариант №1

Блоки аккордеона закрыты при загрузке

 
HTML — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме..
CSS - Cascading Style Sheets — каскадные таблицы стилей — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
Dobrovoimaster - В состоянии постоянного подключения. Ненавязчивые размышления на тему, как стать причастным к искусству сайтостроения. Интересные решения, наглядные примеры использования CSS3, HTML5 и jQuery. Понятные и доходчивые пояснения, без лишней воды и никому ненужной распальцовки.
 

Вариант №2

Один из блоков раскрыт при загрузке

 
HTML — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме..
CSS - Cascading Style Sheets — каскадные таблицы стилей — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
Dobrovoimaster - В состоянии постоянного подключения. Ненавязчивые размышления на тему как стать причастным к искусству сайтостроения. Интересные решения, наглядные примеры использования свойств CSS3, стандартов HTML5 и функций jQuery, понятные и доходчивые пояснения, без лишней воды и никому ненужной распальцовки.
Вверх