Codepal

Posts Tagged 'sprite'

Spice Up Your Box Twitter RSS Afficher L'utilisation de CSS

Friday, Octobre 23rd, 2009

Pour un temps très long maintenant, il a été cette tendance de tweets affichage sur la barre latérale du site, pied de page ou l'en-tête. De nombreux designers ont conçu des moyens ingénieux d'afficher les tweets en créant accrocheur belles illustrations qui les contiennent. Le but principal de les rendre visuellement attrayant est pour que les visiteurs peuvent s'y intéresser et de lire les nouvelles mises à jour que le propriétaire du site est de fournir. Qu'est ce tutoriel va faire est d'activer à vous de faire votre boîte twitter nourrissent d'affichage interactifs afin 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 alimenter votre compte Twitter dans votre site web peut devenir délicat. C'est une bonne chose il ya des tutoriels tant là-bas qui vous fournira les connaissances de l'insertion de ces nourrit facilement. Voici quelques ressources qui vous permettront d'obtenir les flux de Twitter sur votre propre site:

1. Conception d'une page unique pour les Mises à jour Twitter
2. 10 façons génial pour intégrer Twitter avec votre site Web
3. Tweet!

Utilisateurs de WordPress peuvent utiliser certains plugins impressionnante pour obtenir leur flux Twitter sur leur site:

1. 35 Super Plugins Twitter pour WordPress
2. Juitter
3. plugin jQuery pour Twitter

Étape 2. Création du sprite image.

Maintenant que vous avez avec succès appris comment importer les flux Twitter, il est temps de configurer la zone d'affichage. Pour ce tutoriel, je vais utiliser le même design pour la boîte de Twitter comme je l'ai utilisé en bas de page sur ce site soit un oiseau Twitter à regarder les tweets.

Ce que notre principal objectif est que chaque fois que l'utilisateur planent sur la boîte Twitter, une action qui va avoir lieu. Dans notre cas, l'oiseau Twitter va se tourner vers l'utilisateur.

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

100 + Remarquablement icônes Twitter Belle Et Boutons (N'oubliez pas de demander au premier créateur avant d'utiliser ces icônes.)
Icônes vectorielles gratuites fixées par ProductiveDreams.com

J'ai utilisé les icônes faites par ProductiveDreams. Après la création d'une simple boîte dans photoshop. Placez la normale oiseaux twitter icone c'est à dire celui avec la vue en coupe transversale de l'oiseau, sur le côté inférieur droit de la zone tels que l'oiseau semble regarder dans la boîte. Maintenant collez l'autre twitter oiseau icône, celle qui semble regarder vers le spectateur.

Ensuite, poussez l'icône d'oiseau inclinée au-dessus du vieux icône qui vous avez placé dans le coin inférieur droit de la zone telle qu'elle apparaît comme un deux oiseaux twitter dirigé comme ci-dessous

Maintenant masquer l'icône d'oiseau inclinée twitter et bien marquer un carré contenant l'oiseau normal twitter en utilisant des lignes guide. Assurez-vous que l'inclinaison et l'oiseau normal bien ajusté sur la même place faite par les directives.

Recadrer l'image avec l'icône twitter oiseau normal 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 de la toile de ce montant à la verticale. Ceci est fait de sorte que vous pouvez coller la version inclinée oiseaux twitter sur la même toile de donner la touche finale au sprite image.

Masquer l'icône d'oiseaux twitter normale et de faire l'autre oiseau inclinée visibles. Puis recadrer l'image à nouveau le long des lignes guide juste que vous avez fait pour l'image précédente. Copiez l'image et la coller sur la toile nouvellement créé où vous avez collé l'image d'autres. Ajuster les images afin qu'elles s'adapter correctement toute la toile. Votre sprite image est prête à l'emploi et devrait ressembler à ceci:

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

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

 < div id = " " > twitter
	 < a href = " http://twitter.com/SumeetChawla"! id = " " twitter-link > < Follow Me / a & gt ;
	 < div id = " " twitter-bird > < / div >
	 < - votre flux Twitter Here Comes - >
 < / div >

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

Le div oiseaux twitter devrait être flotté sur la droite et une marge négative devrait être attribué à en sorte que l'oiseau semble être quelque peu en dehors de la div conteneur. Faire 'top' de la position de fond de sorte que l'oiseau normal Twitter est affiché. Pour donner la touche finale à notre boîte de Twitter, il suffit de changer la position de l'image de fond du div "twitter-bird» à «bas» quand jamais l'utilisateur survole le div conteneur.

 # Twitter {color: # 658097; position: relative; largeur: 332px; height: 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; height: 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 partir ProductiveDreams a fait son fil Twitter look très vive. L'oiseau Twitter est interactive d'une manière très amicale et décontractée. Il cligne de l'œil et affiche le nombre total de partisans qu'il a fait.

Avant de Planer:

Après Hover:

Ce fut le seul site que j'ai pu trouver qui a fait la boîte d'alimentation twitter interactif. Si vous les gars trouvent un autre site qui suit cette tendance tout post à ce sujet dans le commentaire et je vais m'assurer de l'ajouter ici.

Tags: CSS , l'alimentation d'affichage , l'alimentation , comment , sprite , Twitter
Publié dans Blog , Tutoriels | 15 commentaires »