Comment-8-Bit Les survols - Lumineux Lumineux Grand - Web Design, développement, stratégie de marque
Pour la refonte de Yetee, nous voulions trouver des styles de vol stationnaire qui étaient uniques et conservés avec une sensation ludique de la marque.
Nous avons joué avec quelques options différentes, mais finalement installés sur ces deux effets hover inspirés 8 bits.
Marchons à la façon dont ils sont mis ensemble.
Boutons 8 bits
L'idée derrière ces boutons est un effet secondaire swipe pixélisée. Lorsque vous passez, 5 barres empilées coulisser verticalement en quinconce depuis le côté gauche. Chaque bar dispose également d'une place à la fin de celui-ci, que le flash entre les plus sombres / tons plus clairs.
Remarque: Dans le code ci-dessous, mes couleurs ont été enregistrés en tant que variables, et je ne montrant que les styles pour les médias de bureau requête pour des raisons de concision. Tous les styles de la requête des médias se trouvent sur CodePen.
Tout d'abord, nous allons mettre en place nos éléments. Ces styles peuvent travailler sur des ancres régulières ou des boutons, mais nous allons utiliser des ancres pour l'instant.
Ensuite, nous allons obtenir des styles de base pour ce bouton. Assurez-vous d'ajouter z-index: 1 afin que nous puissions définir un z-index négatif sur notre panel de vol stationnaire. Cela fera en sorte qu'il se trouve derrière le texte au lieu de devant, et que ce n'est pas caché derrière la couleur d'arrière-plan du bouton.
Maintenant, puisque nous avons besoin de cinq barres + cinq places pour le vol stationnaire, nous avons besoin de plus d'éléments que les pseudo-éléments pourraient fournir. Ma stratégie était d'utiliser un div wrapper pour tout vol stationnaire, et une durée pour chaque barre, en utilisant des pseudo-éléments pour les places. Je aurais pu accomplir l'effet désiré en utilisant moins d'éléments, mais en utilisant une enveloppe et un élément pour chaque barre rend le CSS beaucoup plus simple.
Maintenant, voici où les choses compliquées commence à se produire. Faisons le style du tableau de vol stationnaire et ses enfants. Nous voulons simplement que le panneau de vol stationnaire à positionner absolument dans tout l'espace du bouton. Portées vont être les barres verticales, avec de chaque travée: après avoir été utilisé en tant que carré.
Chaque barre verticale commence avec un décalage différent par rapport au bord de la touche, et a une durée de transition différent. Pour capturer plus de cette saveur 8 bits, nous utilisons les étapes de la transition pour le rendre moins lisse.
La seule autre chose en cours est les petits carrés clignotants couleur. Nous avons une animation, en cours d'exécution dans des directions alternatives pour les places alternatives (sans préfixes pour la santé mentale). Ils courent pour la même durée, mais à partir de différents décalages.
Et qu'il est pour les boutons!
8 bits Icônes sociales
Commençons avec quelques points d'ancrage. J'utilise une police d'icônes pour les icônes, donc nous avons juste besoin d'utiliser les classes appropriées.
styles de base. Nous voulons juste un grand vieux cercle et quelques jolies couleurs pour les icônes.
Comme avec les boutons, je besoin de plus d'éléments que moi. Pour obtenir l'effet 8 bits, nous allons essentiellement à « tracer » le cercle avec des carrés et des rectangles pour créer le look pixélisé que nous voulons. Pour chaque « côté », nous voulons trois éléments: un rectangle pour tracer le contour principal et deux places de « courbe » vers le bas. Pour garder tout propre, je vais utiliser jQuery pour générer 4 travées, un pour chaque côté.
Maintenant, nous allons leur style! Ils vont commencer sans opacité et réduite à zéro. Lorsque vous passez la souris, ils l'échelle retour à la normale.
Nous sommes en train de faire assez sur ce plan pixélisé grande que toutes les pièces se ensemble et définissent le cercle bien. Je suis allé pour un diamètre de 108, 12 pixels plus grand que le cercle de 96px. Le nombre avait l'air bien et était divisible par 2. Je savais que je voulais 10px pièces d'angle, donc à partir de là que je viens d'avoir à faire le calcul pour savoir quelle taille les longues pièces doivent être. Chaque rectangle va être 48px sur son côté long et 10px sur le côté court. Les places sont en fait 10px par 16px ou vice versa - plus large pour les haut / bas côtés, plus grand pour les côtés gauche / droite. Ils sont toujours visuellement 10px, nous avons juste besoin pour compenser ce 12px supplémentaire pour couvrir les lacunes où les parties se rencontrent le cercle.
Lors des essais, ils étaient un peu nerveux et avait des problèmes de peinture. Rejetant à la fois face arrière-visibility: hidden; et une perspective sur les a aidés. L'autre chose qui a aidé a été en train de passer que la transformation sur le vol stationnaire, et la transition à la fois transformer l'opacité et le flou.
Maintenant, nous allons positionner les carrés. Chaque carré est un élément de pseudo sur la travée rectangulaire. Nous allons passer par 10px dans quelle direction est appropriée (par exemple: pour la partie supérieure, 10px et 10px à gauche / droite).
Après tout cela, le vol stationnaire est assez simple. Pousser!
Et voilà comment vous faites hovers 8 bits! Assurez-vous de vérifier les Yetee. où vous pouvez voir ces survols dans l'action, et beaucoup d'autres trucs super.
