Сайт для создания шапки – готовые psd баннеры и шапки

Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш премиум-раздел, где вы можете посмотреть уроки по этой технологии.

Поэтому, для создания простейшей шапки достаточно написать в html вот такой код:

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

header{ width: 100%; background: #D8E3AB; height: 70px; }

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

Свойство width: 100% делает так, что наш блок будет растягиваться на всю ширину вне зависимости от размеров экрана. Если же все-таки размеры нужно хоть как-то ограничить, используют дополнительно свойство max-width, где в пикселях записывают абсолютный размер, по достижению которого контейнер больше не будет расширяться.

Сейчас перед нами просто полоска, окрашенная в выбранный цвет. Обычно высоту не задают – она определяется автоматически на основании тех элементов, которые будут в шапке.

<div id = «wrap»> <header></header> </div>

Таким образом, наш верх сайта будет расположен ровно по центру. Остается только наполнить его.

Рис. 1. Пока это только контейнер, в котором будет все содержимое.

Что обычно содержится в шапке?

Обычно там вставлен логотип, название, описание сайта. Также там может находиться какая-то контактная информация, навигация по страницам или даже реклама.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Логотип обычно вставляют как фоновое изображение. Давайте, например, поставим такой:

Для этого достаточно дописать некоторые правила к фону:

background: #D8E3AB url(logo.png) no-repeat 5% 50%;

То есть помимо сплошного цвета даем еще и фоновую картинку (в нашем случае logo.png) и предварительно я ее положил в ту же папку, что и файл стилей. Запрещаем повторение логотипа и определяем его позицию в блоке – немного сместим влево и по центру по вертикали.

Добавим в шапку какое-то содержимое. Например, заголовок и меню.

<div class = «title»>Название сайта</div> <ul class = «menu»> <li><a href = «#»>Контакты</a></li> <li><a href = «#»>О нас</a></li> <li><a href = «#»>Услуги</a></li> </ul>

Теперь все это оформим.

.title{ font-size: 36px; padding-top: 10px; text-align: center; } .menu{ list-style: none; position: absolute; top: 10px; right: 100px; }

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

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

Сместим меню в правый край с помощью абсолютного позиционирования. Чтобы это заработало, нужно также дописать для header такое правило: position: relative;

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

Как зафиксировать блок, чтобы он не исчезал при прокрутке?

Если вы хотите фиксировать шапку в css (такое ее поведение можно увидеть на многих веб-ресурсах), то вам может помочь фиксированное позиционирование. Нужно добавить такие стили:

А также координаты (top, left, right, bottom) какие вам нужны. Обычно фиксацию делают с помощью jQuery, прописывая соответствующий сценарий и привязывая его к событию – вертикальному скроллу страницы.

Если вы хотите научиться верстать сайты, в том числе и шапки, но рассмотренный материал вам непонятен, то нужно начинать с самых азов – изучения основ HTML и CSS. В этом вам может помочь наш премимум-раздел, там есть два соответствующих видеокурса по этим технологиям, в которых все разъясняется по полочкам.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

webformyself.com

Бесплатный онлайн-редактор Twitter-шапок — Создать собственную Twitter-шапку — Crello

Создать интересный фон для Twitter шапки

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

Мы разработали Crello, чтобы дать вам возможность создавать графику для сети или печатных материалов. Благодаря удобному интерфейсу создать уникальную Twitter-шапку можно в считанные минуты. Начать создавать никогда не поздно.

Создать оригинальную Twitter-шапку, которая всем понравится

У вас есть два варианта: либо найти пару изображений для шапки в Интернете, либо создать их самому. Второй вариант намного увлекательнее, ведь у вас есть шанс направить весь свой творческий потенциал на разработку восхитительных дизайнов. Так почему бы не попробовать создать что-то, что обязательно понравится вашим друзьям?

Поскольку Crello очень простой в использовании, вы быстро разберетесь, как он работает. Просто загружайте свои изображения или выбирайте их из коллекции Crello и приступайте к работе над дизайном впечатляющих Twitter-шапок

Создать первоклассные Twitter-шапки с помощью шаблонов Crello

Разве оригинальным быть просто? Конечно! Crello с радостью поможет. Коллекция этого онлайн-редактора насчитывает свыше 10 500 объектов и более 60 000 000 фотографий, которые можно использовать в своих дизайнах! Присоединяйтесь и создавайте!

Считаете, что ваши дизайнерские навыки не на высоком уровне? Не беспокойтесь! Шаблоны Crello разбиты на категории по теме и формату, так что вам нужно лишь выбрать понравившийся и немного его отредактировать по своему вкусу. Это самый простой способ создать классные Twitter-шапки!

crello.com

Как сделать шапку сайта? — UMI

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

Преимущества и содержание

Наличие уникальной шапки (header) дает немало плюсов:

• узнавание фирменного логотипа, символики;
• определение тематики площадки;
• визуальное запоминание красивого фрагмента и заголовка;
• солидность, демонстрация профессионального подхода к созданию ресурса в целом.

Для специалиста вопрос того, как сделать шапку для сайта в короткие сроки, является простым. Новичку же придется изучить приличное количество материала на эту тему. Если вы собираетесь всерьез освоить веб-строительство, создавать контент и графику, вам необходимо разобраться с HTML, CSS, научиться пользоваться Photoshop и другимм программами. На сервисе 1С-UMI эта задача уже решена ― в ассортименте сотни шаблонов с уже готовыми привлекательными шапками, достаточно разместить свой лого, слоган и изображения, можно добавить индивидуальности при помощи стилей.

Верхний блок должен содержать:

• яркий, запоминающийся логотип компании, который будет хорошо заметен;
• слоган с краткой сутью информационного наполнения;
• контактные данные для предприятий и коммерсантов;
• меню навигации;
• рекламные блоки.

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

Как сделать шапку сайта?

Существует три способа выполнить задачу.

1. С помощью специальных сервисов. Этот вариант самый элементарный, не требующий обучения работе с графическими редакторами. Надо отыскать в сети ресурсы, предоставляющие готовые шаблоны, и просто скачать понравившийся. Сервисы бывают платными и бесплатными.

2. Xheader. Если вы — креативный человек, то получить индивидуальный продукт очень даже просто. Здесь предлагается вполне приемлемый набор инструментов или каталог с графическими образцами. В последнем присутствует удобная навигация — все примеры распределены по категориям, выбрать соответствующий тематике проекта не составит труда. Еще Xheader предлагает редактор картинок, где можно менять размеры, применять слои для распределения элементов в нужном порядке. Проекты сохраняются в формате XHF для обеспечения возможности редактирования, окончательный вариант имеет расширение JPG. Xheader обладает достаточными функциями для новичка, но веб-мастеру, решившему заняться разработкой на профессиональном уровне, следует все-таки обратиться к Photoshop.
3. Adobe Photoshop. Эта программа предоставляет большие возможности для работы с графическим контентом. Здесь вы можете создавать полностью уникальные блоки, менять параметры, подбирать тон, обыгрывать контрасты, использовать нулевой градиент (он придаст необычные переливы). В ваших руках расположение элементов, внедрение в графику логотипа, слогана, применение различных шрифтов (только не переусердствуйте, лаконичность в таком случае важна). В общем, это наилучший инструмент в настоящее время для воплощения самых смелых и креативных идей. Как сделать шапку сайта в Фотошопе? Если вы мало работали с такой программой, посмотрите видеоуроки и поищите онлайн-пособия. Необходимо лишь понять, что делают разные инструменты, и приступить к выполнению задачи.

Как разместить блок?

Вы сделали элемент, но это только часть работы. Теперь его нужно интегрировать в структуру ресурса. Если у вас сайт на 1С-UMI, перейдите в режим редактирования и кликните по блоку с шапкой, загрузите и вставьте нужную картинку. При необходимости изменить дизайн поработайте со стилями в CSS.

Пример, как сделать шапку сайта CSS:

• В описании #header удалите имеющиеся значения и обозначьте ширину и высоту вашего изображения.

  #header{
width: ширина px;
height: фон px;
background-color: #25B33f; — фон
margin-bottom: отступ снизу px;
}

• Вставьте картинку.

  #header{
width: ширина px;
height: высота px;
background-color: #25B33f;
margin-bottom: отступ снизу px;
background-image: url(images/имя файла)
}
• Background-color используется, если изображение не отобразится в каком-либо браузере. Фиксация фотографии (во избежание ее смещения) осуществляется путем прописывания position: fixed.

Как сделать шапку сайта HTML:

• В тег body вставьте div, идентифицировав его с двумя заголовками h2 и h4, которые являются названием и описанием соответственно.

  <div>
<h2>название</h2>
<h4>описание</h4>
</div>

• Придайте вид заголовку и тексту — создайте для них два описания и укажите такие свойства:

  h2{
color:#цвет заголовка;
font: размер px шрифт;
margin-left: отступ слева px;
}
h4{
width: ширина px;
color: #цвет;
font-style: стиль шрифта;
margin: расположение px;
}
• Ширина h4 не должна быть большой, иначе текст займет все пространство картинки. Отступы регулируются в зависимости от того, где конкретно планируете расположить текст.

Размещение на WordPress

Поскольку большинство блогов базируются на платформе WordPress, многие веб-мастера интересуются, каким образом установить блок на этой CMS. Движок уже оснащен готовыми темами и блоками. Но есть возможность видоизменить их, добавить логотип, изображение. Как это осуществить?

1. Откройте в консоли вкладку «Записи — Сделать новую».
2. Переведите редактор в формат HTML, загрузите картинку, которую хотите добавить.
3. После загрузки в редакторе появится код изображения. Скопируйте его, «Запись» удалите.
4. Переместитесь во вкладку «Внешний вид — Редактор», откройте файл header.php для редактирования.
5. В header.php найдите <div> и под этой строкой вставьте ранее скопированный код фотографии.
6. Обновите файл и посмотрите, как теперь выглядит ваша шапка вместе со вставленным изображением.
7. Если вам требуется передвинуть картинку, вернитесь в файловый редактор, добавьте в тег img в коде графического элемента запись style со значением margin. Пример:;
8. Подвиньте фото туда, куда вам надо.

Первая страница с верхним блоком готова. После доработки деталей, поправки ошибок и прочего файл можно назвать index.html и выложить его на ваш хостинг. В дальнейшем шаблон пригодится для создания остальных страниц, меню и т.д.

Работа на конструкторе

Не все владельцы ресурсов имеют необходимые навыки для самостоятельного создания сайтов и их элементов. В таких случаях лучше всего создать сайт на конструкторе и доработать готовый шаблон, чтобы сделать его непохожим на типовые сайты. На сервисе 1С-UMI это можно сделать самостоятельно. В библиотеке сервиса предусмотрено более 500 готовых шаблонов, поэтому вам понадобится всего лишь пара минут, чтобы сделать полноценную верхнюю часть ресурса. Обратите внимание: здесь нет возможности рисовать элемент с нуля. Однако в шаблонах доступно изменение текста, шрифта, картинки, а также стилизация готовых элементов через CSS. Преимущества такого исполнения: вы тратите минимальное количество времени, но получаете результат, который полностью подходит и соответствует требованиям.

Если нет возможности дорабатывать дизайн самостоятельно, поручите это специалистам в рамках услуги «Сайт за вас». Они оформят шапку и сайт по вашим желаниями, напишут контент, подберут изображения, наполнят и запустят сайт, настроят для продвижения.

umi.ru

Как сделать шапку для сайта

Здравствуйте друзья! Сегодня будет показано, как сделать шапку для сайта бесплатно и своими руками всего за три шага. Замена шапки сайта под силу любому новичку.

Как заменить шапку сайта

Не секрет, что шапка сайта очень важна для Вашего ресурса, по сути, это визитная карточка любого сайта или блога. Поскольку большинство новичков делают свои блоги на движке WordPress и используют стандартные темы, то часто возникает вопрос, как сделать шапку для сайта, именно свою, индивидуальную. И это правильно, шапка сайта не должна повторяться, это не совсем хорошо для его продвижения. В этой статье мы и рассмотрим, как заменить шапку сайта.

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

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

• находим ту папку на блоге, где хранится картинка нынешней шапки сайта;
• создаём в любом графическом редакторе новую шапку сайта;
• делаем простую замену старой картинки шапки на новую.

Определить адрес папки, где хранится картинка шапки, достаточно просто. Для этого надо навести мышкой на шапку сайта, нажать правой кнопкой мыши на картинку, всплывает окно, в котором нажимаем «Открыть фоновое изображение» (скрин).

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

Не все темы на WordPress позволяют так просто определить адрес папки, где хранится картинка шапки. Например, тема моего тестового блога это не позволяет сделать, при нажатии правой кнопкой мыши по шапке, записи «Открыть фоновое изображение» просто нет. С этом случае надо поступить следующим образом:

• открываем админпанель нашего блога;
• в панели инструментов выбираем «Внешний вид», «Заголовок».

В верхней части окна появляется изображение шапки сайта, теперь нажав правую кнопку мыши, появляется окно и запись «Открыть фоновое изображение» (смотрите скрин),

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

Создание шапки сайта

Теперь переходим ко второму этапу – создание шапки сайта, точнее, изображение для нее. Этот процесс описывать не буду, в прилагаемом видео это показано. Упомяну только важную деталь – новое изображение должно быть точно такого же размера, как и старое и иметь такое же расширение, например, png. Во многих темах нужно дать картинке такое же название, какое было у старой картинки. Почему? Потому, что Вы будете просто подменять старую картинку новой, а в кодах сайта прописаны ссылки именно под название изображения шапки.

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

Теперь в чек-боксе возле нужного изображения ставим точку и нажимаем кнопку «Сохранить изменения».

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

Данная статья и видео дополнили предыдущую статью, Вы узнали, как сделать шапку для сайта бесплатно своими руками. Весь процесс занимает минут 10-15, не считая затрат времени на создание изображения новой шапки. Ведь создание картинок всегда процесс творческий. Обновляйте свои картинки и делайте блог индивидуальным и привлекательным. Удачи Вам!

С уважением, Иван Кунпан.

P.S. Для продвижения Вашего блога Вам пригодятся мои знания и трёхлетний опыт. Можете скачать интеллект карты «Пошаговый алгоритм создания блога для новичков» или «Пошаговый алгоритм написания мощных статей для блога«. Можете посмотреть также мой платный видео-курс «Как написать и оптимизировать статью на блоге. Продвижение блога статьями«. Если этих материалов будет мало, заходите на страницу библиотеки «Создание сайтов и работа с ними» и выбирайте нужный Вам видео-курс.

Просмотров: 1619

Получайте новые статьи блога прямо себе на почту. Заполните форму, нажмите кнопку «Подписаться»

Вы можете почитать:

biz-iskun.ru

Программы для создания шапки для Ютуба

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

Adobe Photoshop CC

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

Скачать Adobe Photoshop CC

GIMP

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

Скачать GIMP

Paint.NET

Этот софт представляет собой расширенную версию Paint, входящего в состав операционных систем Windows. Он обладает более богатым функционалом и позволяет, на любительском уровне, обрабатывать изображения, загруженные с жесткого диска, напрямую с камеры или сканера. Программа проста в освоении и распространяется совершенно бесплатно.

Скачать Paint.NET

CorelDraw

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

Скачать CorelDraw

Программы, описанные выше, отличаются по функционалу, стоимости лицензии и сложности освоения. Если вы — новичок в работе с изображениями, то начните с Paint.NET, а если имеется опыт, то обратите внимание на Фотошоп или КорелДро. Не забудьте и про бесплатный GIMP, который также может стать отличным инструментом для оформления ресурсов в интернете.

Читайте также: Как создать шапку для канала на YouTube

Помогла ли вам эта статья?

lumpics.ru

Создание шапки сайта с использованием CSS3

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

Перед тем, как начать, посмотрите, что именно мы будем создавать:

Демонстрация работы

Посмотрите пример, и приступим к программированию.

Шаг 1. Код HTML 

Вначале нужно создать нашу шапку со всеми вышеупомянутыми элементами:

index.html

<div>
    <!-- логотип -->
    <a href="#"><img src="images/logo.png"></a>

    <!-- дополнительные ссылки сверху -->
    <div>
        <a href="#">About us</a>
        <a href="#">Help</a>
        <a href="#">Contact Us</a>
    </div>

    <!-- меню -->
    <div>
        <nav>
            <ul>
                <li><a href="index.php">Home</a>
                    <ul>
                        <li><a href="#"><span></span>Facebook</a></li>
                        <li><a href="#"><span></span>Google</a></li>
                        <li><a href="#"><span></span>RSS</a></li>
                        <li><a href="#"><span></span>Skype</a></li>
                        <li><a href="#"><span></span>Stumbleupon</a></li>
                    </ul>
                </li>
                <li><a href="#">Faces</a>
                    <ul>
                        <li><a href="#"><span></span>menu element 1</a></li>
                        <li><a href="#"><span></span>menu element 2</a></li>
                        <li><a href="#"><span></span>menu element 3</a></li>
                        <li><a href="#"><span></span>menu element 4</a></li>
                        <li><a href="#"><span></span>menu element 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Clubs</a>
                    <ul>
                        <li><a href="#"><span></span>menu element 1</a></li>
                        <li><a href="#"><span></span>menu element 2</a></li>
                        <li><a href="#"><span></span>menu element 3</a></li>
                        <li><a href="#"><span></span>menu element 4</a></li>
                        <li><a href="#"><span></span>menu element 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Photos</a>
                    <ul>
                        <li><a href="#"><span></span>menu element 1</a></li>
                        <li><a href="#"><span></span>menu element 2</a></li>
                        <li><a href="#"><span></span>menu element 3</a></li>
                        <li><a href="#"><span></span>menu element 4</a></li>
                        <li><a href="#"><span></span>menu element 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Videos</a></li>
                <li><a href="#">Games</a></li>
                <li><a href="#">Blog</a>
                    <ul>
                        <li><a href="#"><span></span>menu element 1</a></li>
                        <li><a href="#"><span></span>menu element 2</a></li>
                        <li><a href="#"><span></span>menu element 3</a></li>
                        <li><a href="#"><span></span>menu element 4</a></li>
                        <li><a href="#"><span></span>menu element 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Classifieds</a></li>
            </ul>
        </nav>
        <!-- форма поиска -->
        <div>
            <form role="search" method="get">
                <input type="text" placeholder="search..." name="s" value="" autocomplete="off" />
            </form>
        </div>
    </div>
</div>

В этом коде легко разобраться. Здесь меню на обычной структуре ul – li и простая форма поиска.

Шаг 2. Код CSS 

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

/* стили шапки */
#header {
    border:1px solid;
    border-color:rgba(0,0,0,0.1);
    border-bottom-color:rgba(0,0,0,0.2);
    border-top:none;
    background:#f7f7f7;
    background:-webkit-linear-gradient(top, #f7f7f7, #f4f4f4);
    background:-moz-linear-gradient(top, #f7f7f7, #f4f4f4);
    background:-o-linear-gradient(top, #f7f7f7, #f4f4f4);
    background:linear-gradient(to bottom, #f7f7f7, #f4f4f4);
    background-clip:padding-box;
    border-radius:0 0 5px 5px;
    margin: auto;
    position: relative;
    width: 1000px;
}
#header a {
    color: #4C9FEB;
}
#header a:hover {
    color: #FF7D4C;
}
#logo {
    float: left;
    margin: 15px 10px;
}
#logo img {
    border: 0;
}
#links {
    float: right;
    font-size: 12px;
    margin: 10px 20px 0;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
}
#links a {
    border-left: 1px solid #DEDEDE;
    margin-left: 7px;
    padding-left: 8px;
    text-decoration: none;
}
#links a:first-child {
    border-width: 0;
}

Теперь зададим следующие стили для выпадающего меню на чистом CSS3:

/* стили меню */
#navmenu {
    background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
    border-radius: 0 0 4px 4px;
    border-top: 1px solid #D1D1D1;
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    clear: both;
    height: 51px;
    padding-top: 1px;
}
#menu {
    float: left;
}
#menu a {
    text-decoration: none;
}
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu > ul > li {
    float: left;
    padding-bottom: 12px;
}
#menu ul li a {
    border-color: #D1D1D1;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 0 0;
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    color: #333333;
    display: block;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 11px 15px 10px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#menu ul li a:hover {
    background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#menu > ul > li.active > a {
    background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-bottom: 1px solid #2D81CC;
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    margin: -1px 0 -1px -1px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#menu > ul > li.active > a:hover {
    background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#menu > ul > li:first-child > a {
    border-radius: 0 0 0 5px;
}

И, наконец, все, что нам осталось, — создать выпадение подпунктов меню. Эти стили создадут плавно выезжающий вложенный уровень меню:

/* выпадающее меню */
#menu ul ul {
    background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );

    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 0 #FFFFFF inset;
    height: 0;
    margin-top: 10px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    visibility: hidden;
    width: 250px;
    z-index: 1;

    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#menu ul  li:hover ul  {
    height: 195px;
    margin-top: 0\9;
    opacity: 1;
    visibility: visible;
}
#menu ul ul a {
    border-right-width: 0;
    border-top: 1px solid #D1D1D1;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #444444;
    height: 24px;
    line-height: 24px;
    padding: 7px 12px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#menu ul ul li:first-child a {
    border-top-width: 0;
}
#menu ul ul a .icon {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 24px;
    margin-right: 10px;
    width: 24px;
}
#menu ul ul a .icon.elem0 {
    background-image: url("../images/elem.png");
}
#menu ul ul a .icon.elem1 {
    background-image: url("../images/fb.png");
}
#menu ul ul a .icon.elem2 {
    background-image: url("../images/go.png");
}
#menu ul ul a .icon.elem3 {
    background-image: url("../images/rs.png");
}
#menu ul ul a .icon.elem4 {
    background-image: url("../images/sk.png");
}
#menu ul ul a .icon.elem5 {
    background-image: url("../images/su.png");
}
/* поисковая форма */
#search {
    margin:13px 10px 0 0;
    float: right;
}
#search form {
    background: url("../images/search.gif") no-repeat scroll 5% 50% transparent;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
    height: 26px;
    padding: 0 25px;
    position: relative;
    width: 130px;
}
#search form:hover {
    background-color: #F9F9F9;
}
#search form input {
    color: #999999;
    font-size: 13px;
    height: 26px;
    text-shadow: 0 1px 0 #FFFFFF;
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: left;
    outline: medium none;
    padding: 0;
    width: 100%;
}
#search form input.placeholder, #search form input:-moz-placeholder {
    color: #C4C4C4;
}

Демонстрация работы 

Заключение 

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

Автор урока Andrew Prikaznov

Перевод — Дежурка

Смотрите также:

www.dejurka.ru