Октябрь 25, 2019 Запись была обновлена
Красивые анимированные вкладки на CSS
CSS3 начинает набирать всё большую популярность и всё больше браузеров начинают поддерживать данную технологию. То что раньше мы делали с помощью Javascript, легко можно сделать при помощи CSS3. А сегодня мы рассмотрим как создать анимированные вкладки на CSS3.
Пример анимированных вкладок можно увидеть здесь:
Посмотреть примерСкачать
HTML часть
Для начала создадим каркас вкладок только на HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <ul class="tabs"> <li> <input type="radio" checked name="tabs" id="tab1"> <label for="tab1">Новости</label> <div id="tab-content1" class="tab-content animated fadeIn"> ... </div> </li> <li> <input type="radio" name="tabs" id="tab2"> <label for="tab2">Игры</label> <div id="tab-content2" class="tab-content animated fadeIn"> ... </div> </li> <li> <input type="radio" name="tabs" id="tab3"> <label for="tab3">Сервисы</label> <div id="tab-content3" class="tab-content animated fadeIn"> ... </div> </li> </ul> |
CSS часть
И добавим стилей нашим вкладкам в CSS:
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 | .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, созданная Дэном Эденом, которая добавляет интересное появление текста во вкладках.
Вывод
В итоге сейчас у вас красивые анимированные вкладки для вашего сайта. Смело их можете использовать их у себя на сайте. Если есть какие-то замечания или предложения, пишите в комментариях ниже.
Успехов!
Источник: www.onextrapixel.com
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Юрий спасибо за хорошие варианты использования CSS,по интернету больно времени нет бегать искать а к вам проще заходить время от времени.
Вячеслав, я очень рад что вам понравилось.
Если честно я в приятном шоке 😎 единственное не хватает больше пояснений к коду. В общем удачи в достижении мастерства, ты супер 😮
Спасибо) Буду стараться писать более подробно!
Подскажите как убрать еффект при нажатии на вкладку «выкидывает на верх страницы»
Олег, он перемещается вверх страницы, потому что там ведь находятся выбор вкладок. А как вы бы хотели сделать?
Юрий а как мне вставить HTML часть в виджет так, что б она отображалась правильно? На данный момент все обстоит таким образом http://s019.radikal.ru/i632/1503/9b/c48e7cbe2ad1.png
Сергей, значит у Вас стандартные стили из файла style.css Вашей темы перекрывают стили вкладок.
а как сие под выгрузку циклом привинтить? т.е несколько пенелек будет на одной странице с одинаковой структурой вот только переключатся то должны каждая для своего контейнера
В чем конкретно проблема?