Je me suis ennuyé ces derniers temps avec toute la panoplie de sites Web que j'ai vus sur iTunes / Mac App Store, alors j'ai codé quelques alternatives amusantes et amusantes que je pensais partager.
Ce projet est super simple, donc même si vous êtes un débutant complet, vous devriez pouvoir suivre. Nous allons apprendre à utiliser des techniques sophistiquées, comme incorporer des polices d'icônes dans un dessin et insérer des objets à l'aide de pseudo-éléments.
Le concept
Pour démarrer un projet, il est souvent amusant de prendre un crayon et d’esquisser quelques idées. Nous avons tendance à penser plus librement lorsque nous dessinons avec nos mains qu’une souris. Vous n'avez pas besoin d'être bon en dessin non plus, n'hésitez pas à griffonner des croquis rapides et laids. Tant qu'ils communiquent votre processus de pensée, ils fonctionnent!
Le concept ici est assez basique et similaire aux autres projets que nous avons réalisés dans le passé. J'aimerais commencer par un cercle qui ne contient qu'une icône. Ensuite, lorsque vous passez la souris sur l’icône, elle affiche un message sur le téléchargement de l’application sur l’app store.
Bien sûr, comme Apple dispose de trois archétypes de périphériques principaux (iPad, iPhone et Mac), nous devrons créer quelques versions différentes sur les bases.
Étape 1: le HTML
Pour commencer, sortez une div comme celle montrée ci-dessous. À l'intérieur, j'ai placé un paragraphe entouré d'une balise d'ancrage, dont une partie est également entourée d'une petite balise. Cela nous aidera à différencier un peu le texte.
En regardant cela maintenant, il semble un peu trop lourd. Vous pouvez probablement appliquer les classes directement à l'ancre et ignorer la div, mais nous allons en rester là pour le moment. Notez que j'ai appliqué deux classes distinctes à la div. J'aurais pu m'en tirer avec un, mais pour différencier les différents types de boutons que nous allons créer, il est utile de les séparer en classes séparées (cela vous permet de cibler chaque version individuellement). Les styles répétés peuvent ensuite être regroupés dans un? Appstorebutton? class, une méthode d’organisation qui gardera notre CSS agréable et sec.
Notez également que HTML5 nous permet d’enrouler un lien autour de tout ce que nous voulons. Par conséquent, si cela vous semble un peu bizarre, sachez simplement que c’est parfaitement permis.
Étape 2: Styles de boutons de base
Passons maintenant à un CSS et saisissons-le? Appstorebutton? crochet. L'état par défaut du bouton sera un cercle, mais il est beaucoup plus facile de tout organiser avec le bouton dans son état développé. Nous allons donc commencer avec une largeur de 275 pixels, que nous allons réduire à 80 pixels une fois tout fini.
Il y a quelques autres choses intéressantes ici aussi. Tout d’abord, nous avons appliqué le positionnement relatif car nous utiliserons ultérieurement un certain positionnement absolu sur un élément de celui-ci, ce qui nous donnera un point de départ. Si cela n’a aucun sens, lisez cet article.
Nous avons également défini le débordement sur masqué. En effet, lorsque le bouton est dans son état circulaire, une grande partie du contenu se trouve en dehors des limites physiques du bouton et nous voulons le garder agréable et invisible. Enfin, nous avons appliqué une couleur de fond à l’iPhone? classe. Plus tard, nous en créerons un peu plus pour les autres versions.
Vérification des progrès
À ce stade, notre objet est hideux, mais ne vous inquiétez pas, cela ira mieux en un rien de temps.
Étape 3: Style du paragraphe
Ensuite, il est temps de corriger ce texte laid. C'est assez simple et implique de passer de la couleur au blanc et de définir différentes tailles pour le texte de paragraphe petit et régulier. J'ai également déclaré une largeur définie, qui divise le texte en deux lignes, puis j'ai utilisé les marges pour tout mettre en place.
Vérification des progrès
N'ai-je pas promis que tout irait bien bientôt? Nous commençons déjà à voir le résultat final prendre forme. C'est incroyable de voir jusqu'où peut aller un petit texte stylé!
Étape 4: Ajouter l'icône
Dans l'image ci-dessus, le texte semble maladroitement glissé vers la droite avec un grand espace vide à gauche. C'est là que va aller notre petite icône iPhone. Cependant, avant de l’ajouter, nous devons réfléchir à la façon de procéder.
La première idée qui me vient à l’esprit est d’utiliser une police d’icônes. Celles-ci sont simples à mettre en œuvre et évolutives à l'infini et fonctionneront donc parfaitement pour un bouton graphique. Après une petite chasse, j'ai trouvé une police gratuite appelée Modern Pictograms de Font Squirrel qui contient à la fois un iPhone et un iPad que nous pouvons utiliser pour ce projet.
Maintenant, plutôt que d'encombrer notre balisage plus loin, nous pouvons insérer cette icône en utilisant du CSS pur en utilisant le pseudo-élément: before. Le code correspondant ainsi que l’implémentation de la police d’icônes sont présentés ci-dessous.
Comme vous pouvez le constater, nous avons déjà dit cela à notre CSS. Au paragraphe, nous voulions insérer la lettre "O", qui correspond au graphique de l’iPhone dans la police Modern Pictograms. Le code @ font-face que j'ai utilisé ici est copié et collé directement à partir des kits extrêmement pratiques @ font-face trouvés dans Font Squirrel.
Ensuite, nous avons mis en place le graphique de l'iPhone. En utilisant le positionnement absolu ici, nous retirons le graphique du flux normal. Cependant, il est lié à l'espace de notre bouton en raison du contexte de positionnement relatif que nous avons appliqué à une étape précédente. À partir de là, nous la poussons dix pixels du haut et vingt de la gauche, puis tout est réglé.
Vérification des progrès
Comme vous pouvez le constater, l’icône de la police a l’air parfaite dans notre petit bouton. Tout ce qu'il nous reste à savoir, c’est d’arrondir nos angles, de réduire la largeur et de définir une transition en stationnaire.
Étape 5: Faites le cercle
Maintenant que notre bouton ressemble à ce que nous voulons quand il est développé, il est temps de le contracter. Pour ce faire, retournez à notre? Appstorebutton? crochet et définissez la largeur à 80px, puis ajoutez un rayon de 40px.
Vérification des progrès
Notre bouton s’est maintenant effondré en un joli petit cercle. Puisque notre débordement est masqué, vous ne verrez rien du texte. Dans la prochaine étape, nous verrons comment tout récupérer.
Étape 6: Développez le survol
Pour terminer notre bouton animé, nous devons ajouter une transition et un état de survol. Notre transition visera la largeur de la classe .appstorebutton avec une durée d’une seconde et une fonction de synchronisation "easy".
Ensuite, une fois que l'utilisateur survole le bouton, il passe à la largeur de 275 pixels utilisée précédemment.
Vérification des progrès
Notre bouton est tout fini! À ce stade, tout devrait fonctionner parfaitement. Si vous avez suivi, votre résultat devrait ressembler à celui ci-dessous.
Étape 7: Ajoutez les autres
Maintenant que nous avons un bouton prêt à fonctionner, il est temps d'étendre cette idée en un ensemble de trois boutons. Ajoutez deux autres divs à votre code HTML et attribuez-leur une classe unique, comme ci-dessous.
À partir de là, nous suivons les étapes précédentes pour insérer les icônes à l’aide du pseudo-élément: before. L'icône iPad est? Q? dans la police de nos icônes, mais malheureusement, nous ne pouvons utiliser aucun ordinateur portable ou iMac pour l'icône du Mac App Store. Pour cela, je suis allé chercher une icône du fabuleux Noun Project (je devais la modifier un peu pour la rapprocher des autres).
Pour finir, j'ai attribué à chaque bouton une couleur unique en utilisant les classes spéciales que nous avons appliquées dans notre code HTML. Utilisez-les pour appliquer tout autre style spécifique au bouton que vous souhaitez utiliser.
Voyez-les en action!
Tout votre travail acharné a porté ses fruits et vous avez un joli petit bouton à afficher. Si vous n'avez pas suivi et créé les boutons vous-même, cliquez ci-dessous pour prendre le résultat du test.
Démo: Cliquez ici pour lancer la démo.
Conclusion
De petits projets comme ceux-ci sont parfaits pour garder vos côtelettes CSS fraîches et votre cerveau en mode de penser constamment à de nouvelles idées de design.
Avez-vous vu d'autres boutons créatifs sur l'App Store récemment? Faites-nous savoir dans la zone de commentaire ci-dessous.