Codepal

Записи с меткой «Лента»

Spice Up Your Twitter Feed Display Box с помощью CSS

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

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

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

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

1. Разработка уникальных страницу обновлений Twitter
2. 10 Удивительный пути интеграции Twitter с вашего сайта
3. Tweet!

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

1. 35 Высокий плагинов Twitter для WordPress
2. Juitter
3. JQuery плагин для Twitter

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

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

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

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

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

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

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

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

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

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

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

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

 < DIV ID = " " > Twitter
	 < HREF = " http://twitter.com/SumeetChawla"! ID = " твиттер-ссылку " > < Следуй за мной / и GT ;
	 < DIV ID = " щебет птицы " > < / DIV >
	 < - Ваш Twitter поток приходит сюда - >
 < / DIV >

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

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

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

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

Примеры

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

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

После Hover:

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

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