Codepal

Pour très longtemps il n'y a eu cette tendance d'afficher tweets sur la barre latérale du site, le pied ou la tête. De nombreux designers ont conçu des moyens ingénieux d'afficher les tweets par la création de belles illustrations attrayantes les contenant. Le principal objectif de les rendre visuellement attrayant est pour que les visiteurs peuvent s'y intéresser et de lire les mises à jour frais que le propriétaire du site est de fournir. Qu'est-ce tutoriel va faire est de permettre à vous de faire votre boîte d'affichage de flux twitter interactive pour que vos visiteurs peuvent aller «wow! C'est plutôt cool »quand ils visitent votre site ou lire vos flux. Alors voilà:

Étape 1. Comment puis-je insérer le flux dans mon site Web?

Insertion d'alimenter votre compte Twitter dans votre site web peut devenir difficile. C'est une bonne chose il ya des tutoriels tant là-bas qui vous fournira les connaissances de l'insertion de ces aliments facilement. Voici quelques ressources qui vous permettront d'obtenir les flux de Twitter sur votre propre site:

1. Conception d'une page unique pour Mises à jour Twitter
2. Awesome 10 façons d'intégrer Twitter dans votre site web
3. Tweet!

les utilisateurs de Wordpress pouvez utiliser certains plugins impressionnant pour obtenir leur compte Twitter sur leur site:

1. 35 Plugins Twitter Awesome pour Wordpress
2. Juitter
3. jQuery Plugin pour Twitter

Étape 2. Création de l'image-objet sur l'image.

Maintenant que vous avez réussi à apprendre comment importer des flux twitter, il est temps de configurer la zone d'affichage. Pour ce tutoriel, je vais utiliser la même conception de la boîte de twitter comme je l'ai utilisé en bas de page de ce site soit un oiseau de twitter à regarder les tweets.

Ce que notre objectif principal est que chaque fois que le vol stationnaire de l'utilisateur sur la boîte de Twitter, une action qui va avoir lieu. Dans notre cas, l'oiseau de twitter se tourneront vers l'utilisateur.

Vous pouvez créer des modèles comme celui-ci en utilisant des icônes Twitter diverses faites par certains designers formidables qui aiment partager leur travail avec la communauté web. Voici une source ultime de ces icônes.

100 + une beauté remarquable des icônes et des boutons Twitter (N'oubliez pas de demander le premier designer avant d'utiliser ces icônes.)
icône vecteur libre fixé par ProductiveDreams.com

J'ai utilisé les icônes faites par ProductiveDreams. Après avoir créé une boîte simple dans photoshop. Place l'icône twitter normale d'oiseaux à-dire celui avec la vue en coupe de l'oiseau, sur le côté en bas à droite de la boîte de telle sorte que l'oiseau semble regarder à l'intérieur de la boîte. Maintenant, copier l'icône twitter autre oiseau, celui qui semble être tournée vers le spectateur.

Appuyez ensuite sur l'icône d'oiseaux inclinée au-dessus du plus icône que vous avez placé dans le coin en bas à droite de la boîte de sorte qu'il apparaît comme un oiseau deux twitter tête comme indiqué ci-dessous

Maintenant masquer l'icône twitter inclinée d'oiseaux et de marquer un carré contenant l'oiseau Twitter normale en utilisant des lignes de guidage. Assurez-vous que l'inclinaison et l'ajustement des oiseaux normale correctement dans la même place faite par les lignes directrices.

Recadrer l'image avec l'icône d'oiseaux twitter normale selon les lignes directrices et d'ouvrir un nouveau fichier et collez-là. Ensuite, vérifiez la hauteur de l'image recadrée et d'augmenter la taille du canevas de ce montant à la verticale. Ceci est fait de sorte que vous pouvez coller la version twitter inclinée oiseau sur la même toile pour donner la touche finale à l'image du sprite.

Masquer l'icône d'oiseaux twitter normale et de faire l'oiseau autres inclinée visible. Ensuite, la récolte de l'image à nouveau le long des lignes guide comme vous le faisiez pour l'image précédente. Copiez l'image et le coller sur la toile récemment créés, dont vous avez collé l'image d'autres. Ajuster les images afin qu'elles s'ajustent convenablement toute la toile. Votre image sprite est prêt à fonctionner et devrait ressembler à ceci:

Étape 3. Codage de l'oiseau à la vie!

Le squelette HTML de la boîte de Twitter va être simple. Il y aurait un div conteneur principal contenant le flux twitter, l'oiseau et une option "Follow Me" lien.

 div id = " > > twitter "
	 < a href = " http://twitter.com/SumeetChawla" id = " " > twitter-link Suivez-moi! < / a & gt ;
	 div id = > < " twitter-oiseau " > < / div>
	 <! - Votre compte Twitter Here Comes - >
 > < / div>

div contenant le CSS pour le «twitter # 'est très simple. Le 'div # twitter-bird "va contenir l'oiseau. Il devrait avoir la moitié de la hauteur du sprite d'origine parce que nous avons fait une seule des deux images dans le sprite sera affichée. Utilisation de sprites CSS est une bonne pratique car elle réduit la demande du serveur, diminue donc le temps de chargement et empêche les éclairs soudains de l'image lorsque planait sur pour la première fois.

Les oiseaux div Twitter devrait être remonté à la droite et une marge négative doit être attribué à telle sorte que l'oiseau semble avoir une certaine ce que l'extérieur de la div conteneur. Faire la position d'arrière-plan "top" de sorte que l'oiseau de twitter normal est affiché. Pour donner la touche finale à notre boîte de Twitter, il suffit de changer la position de l'image d'arrière-plan de la «twitter-bird 'div pour' bottom 'à chaque fois que l'utilisateur survole la div conteneur.

 Twitter # (
	 color: # 658097;
	 position: relative;
	 largeur: 332px;
	 Hauteur: 122px;
	 background-color: # 1f1f1f;
	 border: 1px solid # 414040;
	 background-position: en bas à gauche;
	 background-repeat: no-repeat;
	 padding-left: 10px;
	 padding-top: 10px;
 )
 # Twitter-bird (
	 background-image: url ('images / twitter.jpg');
	 background-position: top;
	 position: relative;
	 float: right;
	 margin-top: 32px;
	 margin-right: 75px-;
	 largeur: 101px;
	 Hauteur: 100px;
	 background-repeat: no-repeat;
 )
 # twitter: hover # twitter-bird (
	 background-position: bottom;
 )

Pour voir comment le résultat final devrait ressembler, descendez au pied de page au bas de cette page.

Exemples

Gopal Raju de ProductiveDreams a fait son compte Twitter l'air très vif et brillant. L'oiseau Twitter est interactive d'une manière très conviviale et décontractée. Il clins d'œil et affiche le nombre total d'adeptes qu'il a.

Avant de Planer:

Après Hover:

Ce site était le seul que j'ai pu trouver qui a fait la boîte de Twitter interactive. Si vous les gars trouver un autre site qui suit cette tendance vient post à ce sujet dans le commentaire et je ferai en sorte de l'ajouter ici.

Tags: CSS , flux d'affichage , l'alimentation , comment , sprite , Twitter

A propos de l'auteur

Sumeet est le fondateur de Code-pal. Il travaille en tant que développeur web, est un programmeur hardcore, bourreau de travail, Guy fun et qui aime sa famille. le suivre sur Twitter et Facebook.

Vous pouvez suivre les réponses à cette entrée par RSS 2.0 flux. Vous pouvez laisser une réponse , ou trackback depuis votre propre site.

Partager les connaissances

Tweet

Part

D'autres postes qui pourraient vous plaire

• Business Template
• Comment faire pour créer une diapositive Cool Out Groupe avec CSS3 seulement
• Orange
• Assistant ordinateur personnel