Codepal

Архив за Октябрь, 2009

Оживить Ваш Twitter Feed Показать Box с помощью CSS

Пятнице, 23 октября 2009

В течение очень длительного времени наблюдается эта тенденция отображения твитов на боковой панели сайта и нижний колонтитулы или заголовка. Многие дизайнеры разработали нестандартные способы показа твитов, создавая красивые привлекательные иллюстрации, их содержащих. Основной целью сделать их визуально привлекательным, так что посетители могут заинтересоваться и читать свежие обновления, что владелец сайта является предоставление. Что это руководство собирается сделать, это позволит вам сделать ваш щебет корма дисплей окно интерактивной, чтобы ваши посетители могут пойти "вау! Это очень здорово, когда они посещают ваш сайт или читать новости. Таким образом здесь идет:

Шаг 1. Как вставить корма в моем сайте?

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

1. Проектирование Уникальные Страница Обновления Twitterа
2. 10 Высокий пути интеграции щебетать с вашего сайта
3. Tweet!

WordPress пользователи могут использовать некоторые удивительные плагинов, чтобы получить их щебет корма на своем сайте:

1. 35 Высокий щебетать Плагины для WordPress
2. Juitter
3. JQuery плагин для Твиттера

Шаг 2. Создание изображения спрайта.

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

Что наша главная цель в том, что когда когда-либо пользователь парят над кормушке щебет, какое-то действие будет иметь место. В нашем случае птица щебета будут обращаться к пользователю.

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

100 + Удивительно красивые иконки и кнопки щебетать (Никогда не забывайте спрашивать дизайнера, прежде чем использовать эти значки.)
Бесплатные иконки вектор установленных ProductiveDreams.com

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

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

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

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

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

Шаг 3. Кодирование птицу к жизни!

HTML скелет кормушке щебет собирается быть простым. Там будет основной дел контейнер, содержащий щебет корма, птицы и дополнительно "Follow Me" ссылки.

 < дел ID = " " > щебет < HREF = " http://twitter.com/SumeetChawla" ID = " Twitter- " > ссылки Следуйте за мной! < / > < дел ID = " щебет птицы " > < / дел > < -! Ваш Twitter Feed Comes здесь - > < / дел > 

CSS для контейнерных дел '# щебет "очень прост. Дел '# щебетать птицы "будет содержать птицу. Он должен иметь половину высоты оригинальных спрайтов мы сделали, потому что только одно из двух изображений в спрайт будет отображаться. Используя CSS спрайтов является хорошей практикой, поскольку это снижает запросы к серверу, а значит уменьшается время загрузки и предотвращает внезапные вспышки изображение, когда завис на в первый раз.

Щебет птиц дел должно быть всплыл на правой и отрицательные поля должны быть возложены на него так, что птица, как представляется, некоторые, что за пределами контейнера дел. Make 'сверху' фоне положение так, чтобы нормальные птицы щебет не отображается. Чтобы дать штрихи к нашей кормушке щебет, просто измените положение фонового изображения дел "щебет птицы» до «дна», когда все наведении указателя мыши на контейнере дел.

 # {Щебет
	 цвет: # 658097;
	 положение: родственника;
	 Ширина: 332px;
	 высота: 122px;
	 фонового цвета: # 1f1f1f;
	 границы: 1px твердых # 414040;
	 фон-позиции: слева внизу;
	 фон-повторить: не повторять;
	 обивка налево: 10px;
	 вершина дополнения: 10px;
 }
 # Щебет птицы {
	 фонового изображения: URL ('изображений / twitter.jpg');
	 фон-позиции: сверху;
	 положение: родственника;
	 плавать: право;
	 разницы-топ: 32px;
	 разницы-направо:-75px;
	 Ширина: 101px;
	 высота: 100px;
	 фон-повторить: не повторять;
 }
 # Щебетать: наведите # щебет птицы {
	 фона положение: внизу;
 }

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

Примеры

Гопал Радж из ProductiveDreams сделал свой ​​Twitter Feed выглядят очень живо и ярко. Птицы щебет интерактивных в очень дружественной и случайным образом. Он подмигивает и отображает общее количество последователей, что у него есть.

Перед наведении:

После Hover:

Это был единственный участок, который я смог найти что сделало окно Twitter Feed интерактивным. Если вы, ребята, найти любой другой сайт, который следует этой тенденции только сообщение об этом в комментариях, и я буду не забудьте добавить его здесь.

Теги: CSS , дисплей кормить , кормить , как , спрайт , щебетать
Опубликовано в блог , учебники | 15 Комментариев »

Как кодекса Перекрытие вкладок главного меню

Среда, 14 Октябрь 2009

Существуют различные стили и методы создания вкладок меню навигации и одна из них с вкладками или наложение перекрывающихся стиль, в котором каждая вкладка, как представляется, лежащих над другими и, следовательно, дает все меню очень реалистичный вид. При проектировании мой сайт, я прошел через много вдохновения и учебные пособия. Один из них был этот учебник называется Photoshop Фактура бумаги на пустом месте, то Создать Grungy веб-дизайна с ним! Автор Коллис от NetTuts.com Это заканчивало тем, что главным вдохновением для моего сайта и в то время за учебником, я обнаружил, Коллис говорит, что:

"Теперь, если я действительно говорю так самостоятельно эти вкладки выглядят удивительными, и поэтому они делают это потому, что они перекрывают друг друга. К сожалению, это также делает их сложнее работать в формате HTML. Однако вы можете делать множество вещей с прозрачными PNG, или поочередно просто сделать цвет текста изменений опрокидывания и не беспокоиться об изменении вкладку цветов. Так или иначе все это несколько выходит за рамки этого руководства. Достаточно сказать, меню может быть немного сложнее построить. "

Так что я пытался писать ее в HTML и после того, как последующие мысли делиться своим опытом со всеми вами.

Шаг 1.Gearing Up

Так, прежде чем начать код такой вкладок навигации в HTML / CSS код, вы должны сначала узнать, как создать в Photoshop в первую очередь. Выше учебнике очень подробно и Коллис делает большую работу в обучении, как построить такое меню в фотошопе. Я построил один простой, специально для этого урока.

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

Шаг 2. Нарезки вкладок из PSD

Совместите выступы вертикально с помощью сеток, как показано на рисунке выше. Вы также можете выровнять вкладки горизонтально, а не вертикально, а затем изображение CSS фон позиция будет доступен по-другому. Выбор зависит от человека к человеку, но оба работают отлично. Хотя обрезка изображения следовать указаниям должным образом, и обратите внимание, что я сделал фон прозрачным, потому что мы будем нуждающихся прозрачным фоном, если мы должны перекрываться вкладок. Кадрировать изображение и сохранить его для веб-PNG24 в формате. Еще один момент отметить, в то время как нарезка изображений является то, что первой вкладке есть "Home" закладка не должны иметь какой-либо тень на ее левый край в неактивном состоянии. Таким образом, для этой конкретной вкладке мы должны создать другой спрайт без теней в нем.

Шаг 3. Кодекс гостях

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

 <DOCTYPE HTML PUBLIC! "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 <link href="css/styles.css" rel="stylesheet" type="text/css" />
 </ HEAD>

 <body>
	 <div id="page-wrap">
		 <ul id="main-nav">
			 <li class="current"> <a href="index.html"> Главная страница </ A> </ LI>
			 <li class="portfolio"> <a href="portfolio.html"> Портфолио </> </ LI>
			 <li class="services"> <a href="services.html"> Услуги </ A> </ LI>
			 <li class="about"> <a href="about.html"> О нас </> </ LI>
			 <li class="contact"> <a href="contact.html"> Свяжитесь </ A> </ LI>
		 </ UL>
		 <div class="clear"> </ P>
		 <div id="featured">
			 <div id="featured-content">
			 </ P>
		 </ P>
	 </ P>
 </ Body>

 </ HTML>

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

 <ul id="main-nav">
	 <li class="current"> <a href="index.html"> Главная страница </ A> </ LI>
	 <li class="portfolio"> <a href="portfolio.html"> Портфолио </> </ LI>
	 <li class="services"> <a href="services.html"> Услуги </ A> </ LI>
	 <li class="about"> <a href="about.html"> О нас </> </ LI>
	 <li class="contact"> <a href="contact.html"> Свяжитесь </ A> </ LI>
 </ UL>

 ул # главной навигационной ли {
	 плавать: слева;
	 положение: родственника;
	 дисплей: встроенный;
 }

Помните, что мы используем изображение спрайта для вкладок, в которых самый верхний вкладка представляет активном состоянии, средний представляет неактивном состоянии, а нижняя представляет состояние при наведении курсора. Таким образом, мы будем использовать свойство 'фона позицию ", чтобы правильно разместить изображения в соответствующие состояние следующим образом:

 ул # главной навигационной ли {
	 положение: родственника;
	 Ширина: 110px;
	 высота: 29px;
	 Дисплей: блок;
	 фонового изображения: URL ('../ изображений / tabs.png ');
	 фона положение: центр-центр;
	 цвет: # 44403b;
	 текст-отделка: нет;
	 размер шрифта: 14px;
	 вершина дополнения: 12px;
	 выравнивания текста: влево;
	 обивка левый: 30px;
	 начертание шрифта: жирный;
 }
 ул # главной навигационной li.home {
	 фонового изображения: URL ('../ изображений / табуляции home.png ');
 }
 ул # главной навигационной li.current {
	 фон-позиции: сверху;
	 цвет: # FFFFFF;
 }
 ул # главной навигационной ли: наведите {
	 фона положение: внизу;
	 цвет: # FFFFFF;
 }
 ул # главной навигационной li.current: наведите {
	 фон-позиции: сверху / *, чтобы предотвратить текущий вкладке изменять цвет при наведении * /
	 цвет: # FFFFFF;
 }

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

 ул # главной навигационной li.current {
	 г-индекс: 100;
 }
 ул # главной навигационной li.home {
	 г-индекс: 100;
 }
 ул # главной навигационной li.portfolio {
	 г-индекс: 99;
 }
 ул # главной навигационной li.services {
	 г-индекс: 98;
 }
 ул # главной навигационной li.about {
	 г-индекс: 97;
 }
 ул # главной навигационной li.contact {
	 г-индекс: 96;
 }

Хотя у нас есть присвоены различные Z-значения индекса к вкладкам, они до сих пор не появляться над внахлест и будет выглядеть следующим образом:

Чтобы дать штрихи к нашей навигационной панели, мы должны выдвинуть каждой вкладки в верхней части другой. Мы назначили г-индекс значения в убывающем порядке слева направо. Таким образом, мы будем просто нажать на каждой вкладке, начиная с правого около 20px слева от него, добавляя негативные »разницы-левой" свойства "ул # главной навигационной LI 'и нажмите целом панель навигации неупорядоченный список влево на добавив 'разницы-налево »положительные 20px, чтобы свести на нет левого движения палатах бар.

 ул # главной навигационной {
	 разницы-налево: 20px;
 }
 ул # главной навигационной ли {
	 плавать: слева;
	 положение: родственника;
	 разницы-налево:-20px;
	 дисплей: встроенный;
 }

Миссия выполнена

После сборки всех CSS и XHTML вместе, у нас будет перекрыт вкладок главного меню навигации готов к использованию. Это была моя взять на себя, как создать такое меню, и я уверен, что Есть много более эффективных способов сделать то же самое. Я был бы рад, если вы могли бы поделиться любой другой способ сделать это, или просто обсудить некоторые улучшения в этой самой процедуры.
Вот несколько сайтов, которые используют более притирки вкладок в качестве основного навигационного меню:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Теги: CSS , как , меню , навигация , более внахлест
Опубликовано в блог , учебники | 47 Комментариев »

Оранжевый

Вторника, 6 Октябрь 2009

PSDTemplate.com большой сайт, содержащий некоторые действительно классный сайт шаблоны, созданные в Photoshop. У них есть раздел премиум PSD макетов, где они выпускают макета каждый день. Они также имеют свободный раздел PSD макет, где они выпускают хорошие макеты качества доступны бесплатно. Они выпустили оранжевой как одно из свободных PSD шаблонов и у нас есть закодированный так, чтобы люди, которые хотят иметь XHTML / CSS версии этот удивительный шаблон может иметь это тоже!

Теги: CSS , бесплатно , PSD , Шаблон , XHTML
Опубликовано в блог , загрузки , Портфолио | 4 Комментария »