Красиві анімовані вкладки на css

Відео: Виберіть на Jquery # 1

Відео: Виберіть на CSS

CSS3 починає набирати все більшої популярності і все більше браузерів починають підтримувати цю технологію. Те що раніше ми робили за допомогою javascript, легко можна зробити за допомогою CSS3. А сьогодні ми розглянемо як створити анімовані вкладки на CSS3.

Відео: Уроки javascript Практика # 5 Робимо вкладки таби (Tabs)

Приклад анімованих вкладок можна побачити тут:

Подивитися прімерСкачать

HTML частина

Для початку створимо каркас вкладок тільки на HTML:

Відео: jQuery # 4: вкладки (tabs)

1234567891011121314151617181920212223

lt;ul class="Tabs"gt;lt;ligt;lt;input type="Radio" checked name="Tabs" id="Tab1"gt;lt;label for="Tab1"gt; Новиниlt;/labelgt;lt;div id="Tab-content1" class="Tab-content animated fadeIn"gt; ...lt;/divgt;lt;/ligt;lt;ligt;lt;input type="Radio" name="Tabs" id="Tab2"gt;lt;label for="Tab2"gt; Ігриlt;/labelgt;lt;div id="Tab-content2" class="Tab-content animated fadeIn"gt; ...lt;/divgt;lt;/ligt;lt;ligt;lt;input type="Radio" name="Tabs" id="Tab3"gt;lt;label for="Tab3"gt; Сервісиlt;/labelgt;lt;div id="Tab-content3" class="Tab-content animated fadeIn"gt; ...lt;/divgt;lt;/ligt;lt;/ulgt;

CSS частина

І додамо стилів нашим вкладках в CSS:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172

.tabs input[type=radio] {position: absolute-top: -9999px-left: -9999px-}.tabs {width: 650px-float: none-list-style: none-position: relative-padding: 0-margin: 75px auto-}.tabs li {float: left-}.tabs label {display: block-padding: 10px 20px-border-radius: 2px 2px 0 0-color: # 08C-font-size: 24px-font-weight: normal-font-family: `Lily Script One`, helveti-background: rgba(255,255,255,0.2)-cursor: pointer-position: relative-top: 3px--webkit-transition: all 0.2s ease-in-out--moz-transition: all 0.2s ease-in-out--o-transition: all 0.2s ease-in-out-transition: all 0.2s ease-in-out-}.tabs label: hover {background: rgba(255,255,255,0.5)-top: 0-}[id^ =tab]: checked + label {background: # 08C-color: white-top: 0-}[id^ =tab]:checked ~ [id^ =tab-content] {display: block-}.tab-content {z-index: 2-display: none-text-align: left-width: 100%-font-size: 20px-line-height: 140%-padding-top: 10px-background: # 08C-padding: 15px-color: white-position: absolute-top: 53px-left: 0-box-sizing: border-box--webkit-animation-duration: 0.5s--o-animation-duration: 0.5s--moz-animation-duration: 0.5s-animation-duration: 0.5s-}

По-перших, для того щоб зробити таку ж функціональність як в javascript, на необхідно визначити що користувач натиснув на вкладку. Для цього ми скористаємося radio button (це будуть наші вкладки) і перемикати їх. У свою чергу вони пов`язані між собою атрибутом rel. І зараз можемо задавати стилі селектору a: cheked.

У демо прикладі підключена бібліотека animate.css, створена Деном Еден, яка додає цікаве поява тексту у вкладках.

висновок

В результаті зараз у вас красиві анімовані вкладки для вашого сайту. Сміливо їх можете використовувати їх у себе на сайті. Якщо є якісь зауваження або пропозиції, пишіть в коментарях нижче.

Успіхів!

джерело: onextrapixel.com

Поділися в соц мережах: