Сьогодні я починаю викладати приклади роботи з css3, які можуть стати в нагоді при його вивченні. Нещодавно ризика в Інтернет я натрапив на такий нехитрий приклад спойлера створеного на css3 і вирішив поділитися ним з вами.

Приклад роботи дивіться тут.

Створюємо структуру для майбутнього спойлера

<клас div="ас-контейнер">
    <див.>
        
        <ідентифікатор введення="АС-1" ім'я="акордеон-1" type="Прапорець" />
        <клас розділу="ас-малий">
            <стор>Мне очень нравиться учиться с сайтом wp-admin.com.ua, он научил меня делать такие классные спойлеры  </стор>
        </розділ>
        <мітка для="АС-1">Первая вкладка спойлера</label>
        
    </див.>    

<див.>    
        <ідентифікатор введення="АС-2" ім'я="акордеон-2" type="Прапорець" />
        <клас розділу="ас-малий">
            <стор>Вы нажали на вкладку... </стор>
        </розділ>
        <мітка для="АС-2">Вторая вкладка спойлера</label>
</див.>
</див.>

Ось структура і готова, далі думаю, буде правильно створити та підключити стилі для нашого спойлера. Як я й казав, наші вкладки, працюватиму на чистому css3 і без жодних скриптів.

Стилі для спойлера

.ас-контейнер{
    width: 400px;
    margin: 10px авто 30px авто;
    вирівнювання тексту: Ліворуч;
}
.Етикетка ac-контейнера{
    Гарнітура: 'BebasNeueRegular', 'Аріальний вузький', Аріал, sans-serif;
    Заповнення: 5px 20px;
    позиція: відносний;
    z-індекс: 20;
    Відображення: блокувати;
    height: 30px;
    Курсор: Вказівник;
    колір: #777;
    текст-тінь: 1px 1px 1px rgba(255,255,255,0.8);
    висота лінії: 33px;
    розмір шрифту: 19px;
    тло: #ФФФФФФ;
    тло: -moz-лінійно-градієнтний(верх, #ФФФФФФ 1%, #eaeaea 100%);
    тло: -вебкіт-градієнт(Лінійних, лівий верх, ліве дно, Контрольна точка кольору(1%,#ФФФФФФ), Контрольна точка кольору(100%,#eaeaea));
    тло: -webkit-linear-gradient(верх, #ffffff 1%,#eaeaea 100%);
    тло: -О-лінійно-градієнтний(верх, #ffffff 1%,#eaeaea 100%);
    тло: -MS-лінійно-градієнтний(верх, #ffffff 1%,#eaeaea 100%);
    тло: лінійно-градієнтний(верх, #ffffff 1%,#eaeaea 100%);
    фільтр: прогід:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',ГрадієнтТип=0 );
    коробка-тінь: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) Вставленого, 
        0px 2px 2px rgba(0,0,0,0.1);
}
.Етикетка ac-контейнера:Наведіть{
    тло: #ФФФ;
}
.ac-контейнер введення:перевірено + label,
.ac-контейнер введення:перевірено + label:Наведіть{
    тло: #C6E1EC;
    колір: #3d7489;
    текст-тінь: 0px 1px 1px rgba(255,255,255, 0.6);
    коробка-тінь: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        0px 2px 2px rgba(0,0,0,0.1);
}

.ac-контейнер введення{
    Відображення: Ніхто;
}
.секція ac-контейнера{
    тло: РГБА(255, 255, 255, 0.5);
    поля-топ: -1px;
    Переповнення: hidden;
    максимальна висота: 0px;
    позиція: відносний;
    z-індекс: 10;
    -вебкіт-перехід: максимальна висота 0.3 с легкість у виході, рамка-тінь 0,6с лінійна;
    -moz-перехід: максимальна висота 0.3 с легкість у виході, рамка-тінь 0,6с лінійна;
    -О-перехід: максимальна висота 0.3 с легкість у виході, рамка-тінь 0,6с лінійна;
    -MS-перехід: максимальна висота 0.3 с легкість у виході, рамка-тінь 0,6с лінійна;
    Перехід: максимальна висота 0.3 с легкість у виході, рамка-тінь 0,6с лінійна;
}
.ас-контейнер секції p{
    стиль шрифту: Курсив;
    колір: #777;
    висота лінії: 23px;
    розмір шрифту: 14px;
    Заповнення: 20px;
    текст-тінь: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-контейнер введення:перевірено ~ розділ{
    -вебкіт-перехід: максимальна висота 0.5 с легкість у виході, рамка-тінь 0.1с лінійна;
    -moz-перехід: максимальна висота 0.5 с легкість у виході, рамка-тінь 0.1с лінійна;
    -О-перехід: максимальна висота 0.5 с легкість у виході, рамка-тінь 0.1с лінійна;
    -MS-перехід: максимальна висота 0.5 с легкість у виході, рамка-тінь 0.1с лінійна;
    Перехід: максимальна висота 0.5 с легкість у виході, рамка-тінь 0.1с лінійна;
    коробка-тінь: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-контейнер введення:перевірено ~ section.ac-малий{
    максимальна висота: 500px; /*Автоматичного*/
}

Щоб зрозуміти, як усе працює, треба спочатку зрозуміти, що робить атрибут for у тезі <label>. Атрибут for вказує відношення мітки Label до потрібного чекбоксу. Ця особливість дозволяє писати тег label окремо від input, а при клацанні на label відбуватиметься імітація клацання по самому чекбоксу.

Чималу та ключову роль у цьому коді відіграють самі стилі, які дозволяють тримати спойлер відкритим або закривати при різному стані чекбоксу.

Стиль, що закриває всі спойлери при завантаженні

.секція ac-контейнера{
    тло: РГБА(255, 255, 255, 0.5);
    поля-топ: -1px;
    Переповнення: hidden;
    максимальна висота: 0px;
    позиція: відносний;
    z-індекс: 10;
    -вебкіт-перехід: максимальна висота 0.3 с легкість у виході, рамка-тінь 0,6с лінійна;
    -moz-перехід: максимальна висота 0.3 с легкість у виході, рамка-тінь 0,6с лінійна;
    -О-перехід: максимальна висота 0.3 с легкість у виході, рамка-тінь 0,6с лінійна;
    -MS-перехід: максимальна висота 0.3 с легкість у виході, рамка-тінь 0,6с лінійна;
    Перехід: максимальна висота 0.3 с легкість у виході, рамка-тінь 0,6с лінійна;
}

Стиль, що дозволяє відкрити спойлер, чекбокс що спроможний checked

.ac-контейнер введення:перевірено ~ section.ac-малий{
    максимальна висота: 500px; /*Автоматичного*/
}

Приклад сам по собі цікавий, у найближчому майбутньому коли всі браузер будуть добре працювати з CSS3, його можна буде використовувати і тим самим прискорювати роботу вашого сайту.. Поки що я протестував у браузерах FF, Opera, IE, Chrome, Safari, Yandex і приклад показав себе цілком непогано, крім дрібних нюансів, думаю використовувати починати вже можна.

Ми з вами розглянули основні моменти роботи, що стосуються цього прикладу. Якщо є питання чи виправлення, пишіть у коментарях, подяки теж приймаються. З питань CSS та HTML можу порадити почитати сайт htmlbook.ru, мені він служить чудовим довідником.

Переглянути роботу спойлера можна на сайті jsfiddle.net. На цьому мій урок з css3 добіг кінця, пропонуйте нові скрипти на огляд.