» »

Стильные адаптивные вкладки (табы) на CSS3

Стильные адаптивные вкладки (табы) на CSS3

Здесь представлены адаптивные вкладки, которые на любом сайте можно встретить или как их еще называют табы на переключение. Теперь к ним мы еще поставим шрифтовые иконки, чтоб сами кнопки смотрелись куда красивее и понятнее. Вы можете использовать эти вкладки как на форме ответа, где поставить несколько от социальных ресурсов. Также можно поставить на информер, и переключать и безусловно портал станет более информирован и функционален.

Но этот материал более интересен стал и по своему обновлению компактного блока вкладок, где уже будет использоваться CSS3 и это значит будет присутствовать адаптация под мобильные аппараты. Это уже означает, как можно меньше кода и стилей, что работа его более будет лучше и корректнее. Куда ставить, здесь вы можете решить сами, это будь то отдельное личное сообщение, на сайте также есть боковая колонка, но и не обойтись без модального окна.

Подробно по шрифтовым иконкам создана статья, где вы можете узнать как они работают, где их брать и как можно выставить ширину и высоту, так как когда их ставят, основном они деформируются под ширину шрифта название.

Можно просто их поставить под информационный блок:

Табы на ваш сайт

Для начало подключим шрифтовые иконки:

Код
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

Сами стили и основной код, вы можете скачать, они представлены в документе текстовом, где копируем и устанавливаем по указанию, что прописано.

Источник: dbmast.ru
Доработал под конструктор: ucozz.pro
08.03.2017 Загрузок: 22 Просмотров: 845 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
maniacvn
maniacvn 08.03.2017 13:431
0
Для того что бы сменить иконку просто в CSS поменяйте Юникод иконки на тот что вам нужен 11a
Kosten
Kosten 08.03.2017 13:492
0
Все правильно, ссылку поставил в материал, как нужно работать с шрифтовыми иконками, и можно стиль не прописывать а просто в корень сайта закинуть пару файлов.
Kolinkor
Kolinkor 08.03.2017 13:533
0
Уже были на сайте, но если эти сделаны как на скрине, то это готовый материл.
Kosten
Kosten 08.03.2017 14:164
0
Все правильно, такой материал для веб мастере в разделе заливал, но здесь maniacvn уже установил на своем сайте и предоставил материал, так что проверенный.
ucozmental
ucozmental 08.03.2017 14:305
0
Просто не думал, что можно под информеры, хотя видел, но больше делают на ответы в комментариях.
avatar