Шапки для сайта – Бесплатные шапки для сайтов и для блогов

Опубликовано Автор Оставить комментарий

Содержание

Бесплатные шапки для сайтов и для блогов

Здравствуйте, дорогие читатели блога beloweb.ru. Сегодня хочу представить Вам довольно таки полезный пост, а именно подборку бесплатных шапок для сайта и Ваших блогов.

Данная подборка очень поможет начинающим дизайнерам. А некоторые из них вдохновят на новые шедевры в веб дизайне.

Обновлено 19,08,2013

Друзья, теперь все шапки доступны здесь

В общем наслаждайтесь, друзья.

Шапки с огненным шаром, город и другие

Здесь представлены несколько замечательных шапок для сайта и для блогов.

Шапка для сайтов и блогов Cosmosource

Замечательная, современная шапка для стильных сайтов разной тематики.

Шапка Lighthouse

Красивая и бесплатная шапка с очень хорошо прорисованной и качественной графикой. Так же эта шапка может Вас вдохновить на создание нового и креативного шаблона.

[R] Evolution

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

Шапка для блогов и сайтов Mindscape

Стильная шапка с векторными людьми

Шапка для сайтов в ретро стиле

Клёвая шапка с ретро автомобилем посередине.

Типографические шапки

Несколько исходников типографических шапок.

Шапки на грязную и подземную тематику

Здесь Вы сможете скачать несколько шапок грязных и в тоже время стильных шапок для сайта и блога.

A New Day

Замечательная шапка в светлых и красивых тонах.

Красивые шапки Fellowsisters

Очень красивые 2 шапки с замечательными иллюстрациями.

Шапка Inspiration

Lucifix

Уже готовая шапка для блога, с красивыми и приятными тонами.

Тёмная шапка Rocket And Go

Замечательная шапка для сайта в тёмном стиле и с отличным логотипом.

Sublog

2 шапки Elements

Не плохие шапки для блогов с красивой, плавной графикой

Canvas

Большая и красивая красная шапка для сайта.

Ephemeral

Несколько простых светлых шапок.

Monsteck Variketch

Magic Box

Шапка для сайтов Dream

Kultivating

Metamorphosis

Обновлено 19,08,2013

Друзья, теперь все шапки доступны здесь

beloweb.ru

Анимированные шапки для сайта — делаем крутые шапки на сайте

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

Четыре примера вы можете посмотреть по следующей ссылке:

Посмотреть примерСкачать

Как пользоваться? — Анимированные шапки для сайта

HTML часть

В коде страницы всё что нужно вставить, это:

1
2
3

<div>
    <canvas></canvas>
</div>

В блоке <div> с идентификатором и классом large-header находится тег <canvas>, в которм и происходит вся анимация. А блок <div> лишь содержит фоновое изображение.

Javascript часть

Затем в конце страницы необходимо подключить нужные библиотеки. Они находятся в папке js (в архиве с исходниками — ссылка в начале статьи).

Например, для примера №1 нужно подключить следующие библиотеки:

1
2
3
4

<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-1.js"></script>

Для 2-го примера:

1
2

<script src="js/rAF.js"></script>
<script src="js/demo-2.js"></script>

Для 3-го:

1
2
3
4

<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-3.js"></script>

И, наконец, для 4-го:

1
2

<script src="js/rAF.js"></script>
<script src="js/demo-4.js"></script>

Ниже я сделал скриншоты каждого из эффектов:

Вывод

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

Дело в том, что не все мобильные устройства правильно работают с тегом Canvas, поэтому в этом случае будет отображаться просто статическая картинка.

Успехов!

Источник: http://tympanus.net/codrops/2014/09/23/animated-background-headers/

С Уважением, Юрий Немец

Анимированные шапки для сайта — делаем крутые шапки на сайте 5.00/5 (100.00%) 4 голос(ов)

Понравилась статья — расскажи друзьям! 🙂

Facebook

Twitter

Вконтакте

Одноклассники

Google+

www.sitehere.ru

Элементы дизайна. Красивые шапки.