Тоже самое обстоит и с файлом стилей. Он также большой но там всё прокомментировано, поэтому проблем возникнуть не должно.

Если кто-то до сих пор не посмотрел демо, то для вас я сделал несколько скриншотов 🙂 :

Вывод

Неплохая подборка вкладок с нестандартными эффектами и переходами. Уделите несколько минут своего времени и посмотрите все вкладки. Бывает так, что смотришь и думаешь: «Ну обычные вкладки, что тут такого. Да и не очень и нужны они мне.». Но один, какой-нибудь необычный, дизайн настолько сильно запоминается, что когда нужно реализовать вкладки на сайте, именно таким образом и хочется их сделать. А где их видел даже и не вспомнишь!

Поэтому не забываем добавлять мой сайт в закладки в браузере (делается это сочетанием клавиш CTRL+D ) 😉 .

Хотя основа основ дизайна — это творчество, всё-таки некоторые элементы интерфейса сайта будет полезно иметь в запасе. В этой статье я покажу 15+ самых важных деталей пользовательского интерфейса сайта , которые пригодятся каждому. Используя эти небольшие подсказки, вы сможете получить красивый и практичный дизайн , используя меньше сил и времени.

1. Сетка

Страница, кроме авторского контента, обычно содержит в себе ещё и место под баннер, место под рекламу, под ссылки и прочее… Важно, чтобы эти места не портили общий вид сайта , и были в то же время удобно расположены. Поэтому удобно использовать разметку страницы. Классическая разметка страницы вот такая:

Бренд (логотип, слоган и т.д.), в левом верхнем углу

Навигация — в верхней части сайта, а также желательно слева

Основное содержание — центр страницы

Объявления — справа страницы

Footer не содержит в себе важной информации (либо содержит её дубликат), обычно это ссылки на внутренние страницы и контактные данные.

На этом примере я нарисовал воображаемую сетку

Чтобы увидеть сетку, достаточно мысленно поделить изображение прямыми линиями.

И ещё один пример использования сетки в дизайне.

2. Вертикальная навигация

Мы встречаем левую и правую панель навигации всё реже, т.к. сейчас наметилась тенденция в упрощении меню и перехода на горизонтальный вариант. Однако, вертикальная навигация не исчезнет просто потому, что не всегда горизонтальный вариант так уж универсален. Так, вертикальный вариант удобней для меню со сложной или длинной структурой дерева . Возьмём, к примеру, molotok.ru.

Трудно представить, как все его категории уместятся в горизонтальном меню.
Впрочем, ничто не мешает использовать его и для маленьких сайтов. Если разместить его прямо под лого, оно может неплохо заполнить пустоту.

Хороший простой пример вертикальной навигации

Вертикальное меню расположено слева, под логотипом

3. Горизонтальная навигация

Горизонтальная навигация обычно используется для несложных и не длинных списков ссылок. Очень удобно разместить её над или под логотипом. Кроме своей заметности , горизонтальное меню имеет и ещё один плюс — это экономия места . Вертикальное меню забирает пространство, исходя из длины самого длинного слова. А вот горизонтальное меню «растёт» разве что немного в высоту, да и то всегда можно поиграть margin’ами и padding’ами.

Обычное (с хорошим дизайном) горизонтальное меню

Ещё один пример хорошего оформления горизонтального меню

4. Выпадающие списки

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

Элегантное выпадающее меню

Модифицированное меню, добавлено оформление картинками

Выпадающее меню бывает не только горизонтальным, но и вертикальным

5. Хлебные крошки

Хлебные крошки являются визуальным представлением постраничной иерархии сайта. Пользователь должен понимать, в каком разделе сайта он находится, и к какой категории относится страница. Очень удобная вещь, как в плане навигации по сайту , так и как источник дополнительной перелинковки страниц (что любят поисковики , так что популярность этого элемента всё время растёт). Располагают их выше содержимого страницы, слева направо.

Текущая страница выделяется цветом

Текущая страница никак не выделяется. Авторы сыграли на логике посетителя)

Текущая страница никак не выделяется. Зато выделены корневые страницы

6. Список записей

Блоги всё популярней, и у каждого есть список постов, что логично. Каждый такой список состоит из «превьюшек» постов . А «превьюшки» , в свою очередь, из заголовка статьи, краткого содержания, количества комментариев и тому подобной общей информации. Главный акцент мы всегда делаем на названии. Оно должно быть крупным, раскрывающим тему, без лишних слов и содержаться в тегах h1 или h2. «Превьюшка» должна заинтриговать читателя, чтобы у него появился интерес посмотреть пост, полазить по сайту.

В развёрнутом виде отображается только последняя запись, остальные — в виде небольших «превьюшек». Такой вариант экономит место.

Каждая запись оформлена в виде страницы блокнота

7. Архивы

Архивы — очень хороший способ обеспечить доступ к старым записям в блоге. Хороший архив должен содержать сортировку не только по датам, но и по категориям, ведь часто пользователям интересна только одна рубрика блога. К сожалению, не все авторы уделяют этому элементу должного внимания, а зря — архив здорово повышает юзабилити страницы .

Подробный архив, где есть сортировка записей по категориям и тегам

Этот архив включает удобную временную навигацию

Отличный пример, где сочетается архив по датам и по записям

8. Футер с контентом

Времена простеньких футеров, похоже, уходят, и в моду входят футеры красивые и полезные . Туда можно поместить те же архивы, контакты, информацию об авторе (владельце) блога, меню и ещё кучу разной полезной информации. В функции футера вполне может входить привлечение посетителей для просмотра других страниц сайта. Конечно, желательно его красиво оформить. Как вариант, многие используют 3-4 колонки , в которых содержаться внутренние ссылки и информация, а так же подписки на RSS и Email .

Трехколоночный информативный футер

Пример отличного графического оформления футера сайта

Футер с интересным элегантным дизайном

9. Нумерация страниц

Когда на сайте много контента, и это нужно хоть как-то организовать, то нумерация страниц — первое, что приходит в голову. Она позволяет быстро пролистывать контент сайта, заодно снижая время загрузки страницы . Лучший пример навигации страниц, на мой взгляд, реализован примерно следующим образом:

Тут я, наверное, никого не удивил, т.к. эта схема довольно распространена. Здесь чётко выражена текущая страница, её соседи, а также есть доступ сразу к последним (и первым) записям.

Один из самых часто-встречающихся вариантов оформления прокрутки страниц

А вот более интересный вариант оформления

10. Модальные вкладки

Модальные вкладки в компактном виде содержат дополнительный контент, который становится открытым только тогда, когда этого захочет пользователь. Когда возраст блога позволяет ему, например, иметь большой архив с большим количеством тегов и категорий, можно распределить их в несколько вкладок, чтобы они не занимали много места . Разумеется, выводить таким способом можно всё, что угодно, и способы оформления могут быть самыми разными.

На этом примере на каждой новой вкладке — разный тип блюд ресторана

Журнал предлагает выбрать посетителю тот контент, который ему нужен

11. Участвуйте в системе оценок.

Большинство современных сайтов/блогов направлены на взаимодействие с пользователем. И многие стремятся сделать свои странички всё более интерактивными .
Помещайте на сайт кнопки Stumbleupon / Twitter / Vkontake и т.д. — и вы увидите, как страницы оживут.

Один из популярных вариантов — массовое добавление иконок социальных закладок в конце статьи

12. Информационная панель

Не столь часто (пока!) встречающаяся вещь, но тоже имеющая право на место в этой статье. Интернет-магазины, интернет-банки, аналитические центры — все эти сервисы имеют на своих сайтах страницы статистической информации. На таких страницах особенно важно донести до посетителя то, что он хочет найти . Дизайн их должен быть простым, хорошо организованным и доходчивым.

Google Analytics — один из самых ярких примеров хорошо сделанной информационной панели.

Ещё один пример хорошего дизайна и юзабилити при работе с данными.

Графики используются и в отображении котировок акций. Это — один из примеров оформления.

13. Простая регистрация

Все мы встречаемся с формой регистрации на сайтах, и многие из нас вынуждены по тем или иным причинам регистрироваться часто. Думаю, все согласятся, что предложение ввести подтверждение e-mail или сложный непонятный текст защиты на 3-й странице формы регистрации нагоняет тоску. Все эти излишества совсем не упрощают жизнь посетителей. Вот почему важна максимально простая форма регистрации . Пользователь не должен думать, что он что-то забыл вписать, или вглядываться в символы. Если же вам хочется вытянуть максимум информации из пользователя, сделайте так:
Чтобы зарегистрироваться он должен ввести логин, почту и пароль. А после регистрации предложите ему заполнить другие поля анкеты.

Отличный пример просто формы регистрации, хотя и не максимально короткий

На Vimeo размещён вариант самой короткой формы регистрации — всего три(!) поля

Facebook — ещё один пример хорошего исполнения формы

14. Акценты

Оживите свою страницу. Акцентируйте важные слова/фразы. Играйте размером, шрифтом, цветом, оформлением. Ведь первым делом посетитель должен увидеть то, на что вы ему укажите . Правда, немного сложнее заставить его увидеть части страницы в нужном ПОРЯДКЕ. Но и это решаемо.

Важные фрагменты текста выделены бирюзовым цветом

Главная надпись страницы максимально увеличена и написана другим шрифтом

Каждая новая строка «затухает» относительно предыдущей

15. Отображение Коллекций

Многие из нас любят похвастаться своими друзьями, коллекциями картинок, ресурсами, фотографиями и т.д. Чтобы отобразить эти коллекции, используются несколько разных способов.
Кто-то использует сетку из «превьюшек», а кто-то — некий список из картинок.

На этом примере мы видим такое своеобразное отображение дружеских ссылок

Простое и стильное отображение последних работ дизайнера

16. Поиск

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

Простая и мягкая по тонам форма поиска

Пример необычного оформления формы поиска

И ещё один пример нестандартного оформления нашей формы

17. Формы

Формы на сайтах требуются для того, чтобы оставить комментарий, или чтобы совершить некий платёж. Как и в примере с регистрацией, здесь тоже важна максимальная простота . Ведь пользователи не любят долго копаться с забиванием символов и думать, что куда вписать.

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

На этой странице вы можете наблюдать процесс поэтапного заполнения формы

Ещё один пример поэтапного заполнения формы. Активная стадия выделяется цветом

Другой вариант оформления — активный процесс открывается в новой вкладке

18. Подписки

В то время как блоги и социальные сети набирают популярность, появилась тенденция размещать несколько кнопок подписки. Как правило, минимум это RSS и Twitter. Люди стараются сделать страницы более живыми и коммуникативным, максимально облегчая читателям возможность следить за новостями.

Вместе с кнопками подписки сразу же указано и количество подписчиков

Когда я увидел этот вариант — мне сразу бросился в глаза элегантный дизайн

Максимально простой вариант — лишь кнопки подписки, плюс ссылки на социальные сети

19. Слайдеры

Каждый мало-мальски опытный верстальщик может взять готовый jQuery-слайдер в интернете, и вставить его на свою страницу. И выглядит это весьма эффектно . Именно поэтому слайдеры всё чаще встречаются на страницах. Как правило, их размещают как биллборд с лучшими материалами (или товарами) сайта, в самом видном месте.

Отличный, простой, стильный слайдер.

А это — довольно распространённый пример слайдера

Хороший необычный пример оформления слайдера

На этом, разумеется, элементы не кончаются — ведь их намного больше. Я рассказал лишь о самых трендовых и ходовых. Хочется пожелать всем отнестись к информации серьезно, проанализировать и обдумать. Делайте красивые сайты. Делайте удобные сайты.

С уважением Найко Михайл.

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

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

Так же, табы, которые мы будем делать, красивого дезайна, они существенно украсят Ваш сайт. Во как:-) красиво и полезно, мне кажется редкое совпадение. Тем более делаются они только при помощи , соответственно: быстро загружаются, и не несут никакой нагрузки на сервер.

JQuery

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

Совместимость с браузерами

Эти табы поддерживают практически все браузеры, только в некоторых они будут выглядеть чуть по другому, потому что многие, ещё пока, не поддерживают CSS3.

Вот и всё, надеюсь Вам понравилось:-) Если что то Вам будет не понятно обязательно спрашивайте в комментариях. До скорых встреч.

Добрый вечер! Сегодня я вам расскажу, каким образом можно сделать табы (вкладки) на чистом css3 без какого-либо использования jquery или других скриптов. Как вы уже знаете, чем меньше вы будете использовать скриптов, тем лучше для вашего сайта, и тем быстрее он будет работать. А скорость сайта сегодня один из самых важных показателей его ранжирования в поисковых системах.

Итак, начнем

Адаптивные вкладки (табы) на чистом css и без скриптов

Сегодня табы есть практически на любом сайте. Они необходимы для того, чтобы отображать несколько областей контента без перехода пользователя на другие страницы. Например, на одном из моих проектов по разработке интернет-магазина на Joomla было добавление двух табов, которые будут отображать по 3 товара двух типов: «хиты продаж» и «последние». Принято решение делать их на чистом css без перезагрузки сайта ненужными скриптами.

Итак, приступим.

HTML код для табов с использованием css3 по пунктам

1. В первую очередь нам необходимо создать div с классом «tabs» .

2. Добавляем непосредственно кнопки-переключали с именем «tabs», при нажатии на которые они будут включать содержимое наших табов.

3. Добавляем их название через label

4. Под кнопками, которые мы с Вами сделали в пунктах 1-3, мы добавляем уже непосредственно контент, который нам нужно выводить. В моем случае это три последних товара и три лучших товара.

Каждый блок у нас имеет класс tab-content и идентификаторы tab-content-1 и tab-content-2.

Итоговый HTML наших будущих табов

На этом мы закончили с написанием нашего html. Согласитесь, ничего сложного тут не было. Итак, идем дальше.

CSS стили для табов с использованием css3 по пунктам

Теперь самое интересное и сложное. Нам нужно наши табы сделать табами, которые будут переключаться при клике 🙂

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

Также, обратите внимание, что по умолчанию, мы делаем наши кнопки-переключатели невидимыми

Tabs { max-width: 90%; float: none; list-style: none; padding: 0; margin: 75px auto; border-bottom: 4px solid #ccc; } .tabs:after { content: ""; display: table; clear: both; } .tabs input { display:none; } .tabs label p { padding: 5px; margin-right: 0; } .tabs label { display: block; float: left; width: 50%; color: #ccc; font-size: 30px; font-weight: normal; text-decoration: none; text-align: center; line-height: 2; cursor: pointer; box-shadow: inset 0 4px #ccc; border-bottom: 4px solid #ccc; -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */ transition: all 0.5s; } .tabs label span { display: none; } .tabs label:hover { color: #3498db; box-shadow: inset 0 4px #3498db; border-bottom: 4px solid #3498db; } .tab-content { display: none; width: 100%; float: left; padding: 15px; box-sizing: border-box; background-color:#ffffff; }

Как заставить это работать

А тут все просто.

Добавляем следующий css код

Tabs :checked + label { background: #FFF; box-shadow: inset 0 4px #3498db; border-bottom: 4px solid #3498db; color: #3498db; } #tab-first:checked ~ #tab-content-1, #tab-second:checked ~ #tab-content-2 { display: block; }

Строками выше мы добавляем особы стиль для активного таба используя :checked + label

#tab-first:checked ~ #tab-content-1 — данная строка говорит о том, что нам нужно отобразить контент, который имеет id=»tab-content-1″ , если tab-first имеет статус checked.

Делаем наши табы адаптивными

Ну вот по сути и все. Наши табы готовы:). Вы их можете менять как угодно, добавлять-удалять. Спасибо за внимание 🙂