Спойлер css3 без jquery
Сьогодні я починаю викладати приклади роботи з css3, які можуть стати в нагоді при його вивченні. Нещодавно ризика в Інтернет я натрапив на такий нехитрий приклад спойлера створеного на css3 і вирішив поділитися ним з вами.
Приклад роботи дивіться тут.
Створюємо структуру для майбутнього спойлера
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <section class="ac-small"> <p>Мне очень нравиться учиться с сайтом wp-admin.com.ua, он научил меня делать такие классные спойлеры </p> </section> <label for="ac-1">Первая вкладка спойлера</label> </div> <div> <input id="ac-2" name="accordion-2" type="checkbox" /> <section class="ac-small"> <p>Вы нажали на вкладку... </p> </section> <label for="ac-2">Вторая вкладка спойлера</label> </div> </div> |
Стилі для спойлера
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
.ac-container{ width: 400px; margin: 10px auto 30px auto; text-align: left; } .ac-container label{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); } .ac-container label:hover{ background: #fff; } .ac-container input:checked + label, .ac-container input:checked + label:hover{ background: #c6e1ec; color: #3d7489; text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1); } .ac-container input{ display: none; } .ac-container section{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; max-height: 0px; position: relative; z-index: 10; -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container section p{ font-style: italic; color: #777; line-height: 23px; font-size: 14px; padding: 20px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); } .ac-container input:checked ~ section{ -webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); } .ac-container input:checked ~ section.ac-small{ max-height: 500px; /*auto*/ } |
Чималу та ключову роль у цьому коді відіграють самі стилі, які дозволяють тримати спойлер відкритим або закривати при різному стані чекбоксу.
Стиль, що закриває всі спойлери при завантаженні
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.ac-container section{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; max-height: 0px; position: relative; z-index: 10; -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; } |
Стиль, що дозволяє відкрити спойлер, чекбокс що спроможний checked
1 2 3 |
.ac-container input:checked ~ section.ac-small{ max-height: 500px; /*auto*/ } |
Ми з вами розглянули основні моменти роботи, що стосуються цього прикладу. Якщо є питання чи виправлення, пишіть у коментарях, подяки теж приймаються. З питань CSS та HTML можу порадити почитати сайт htmlbook.ru, мені він служить чудовим довідником.
Переглянути роботу спойлера можна на сайті jsfiddle.net. На цьому мій урок з css3 добіг кінця, пропонуйте нові скрипти на огляд.
/*
- Базовий курс з веб-дизайну;
- Верстка сайтів;
- Загальний курс CMS WordPress та продовження курсу з розробки шаблонів;
- Розробка сайтів на PHP.