Je suis récemment tombé sur un didacticiel soigné chez Woorkup, soulignant une fonctionnalité de MooTools qui vous permet de transformer n'importe quel élément d'une page Web en un élément positionnable.
Aujourd'hui, nous allons utiliser cette technique pour créer une note autocollante simple et amusante avec laquelle un utilisateur peut jouer et se déplacer n'importe où sur la page. En cours de route, vous utiliserez beaucoup de CSS3, alors assurez-vous de disposer d'un navigateur de qualité!
Aperçu
Pour voir ce que nous allons construire, cliquez sur l'image ci-dessous et visionnez la démonstration en direct.
Étape 1: le HTML
Nous commencerons par créer notre post-it-collant comme sur n'importe quel site et finirons par le rendre mobile. Le code HTML de ce didacticiel est très simple et ne contient que quelques div et éléments.
J'ai gardé le texte fictif simple ici afin que vous puissiez facilement voir à quel point le code est simple, mais vous pouvez taper ce que vous voulez!
Étape 2: Créer le fond
Pour créer l'arrière-plan, vous aurez besoin d'une belle texture de tableau d'affichage en liège. J'ai effectué une recherche rapide sur Google et suis venu avec celui-ci.
Vous devrez découper une petite section et la convertir en arrière-plan transparent. Cela peut être facilement accompli en moins de deux minutes en suivant mon tutoriel sur la création d'arrière-plans transparents.
Étape 3: CSS de fond
Une fois que vous avez créé votre image de fond transparente en liège, démarrez votre CSS avec une réinitialisation de base et déposez-le au format JPG.
J'ai aussi un peu stylisé le conteneur ici en définissant une largeur de 960 pixels et une marge supérieure de 100 pixels. L'extrait automatique centre automatiquement la div.
Étape 4: Styles collants de base
Nous donnerons ensuite à nos collants un style vraiment basique.
Ici, nous avons simplement défini un fond jaune et une largeur. Cet arrière-plan servira par défaut pour les navigateurs qui n'interprètent pas le CSS3 que nous ajouterons ensuite.
À ce stade, votre post-it devrait commencer à prendre forme et ressembler à l’image ci-dessous.
Étape 5: Styles collants avancés
Pour rendre notre note autocollante beaucoup mieux, nous ajouterons un dégradé, une zone d’ombre portée et un peu de remplissage.
Notez que nous avons appliqué les dégradés et les ombres en utilisant les syntaxes Webkit et Mozilla afin que cela fonctionne sur autant de navigateurs que possible. Pour les dégradés, nous avons spécifié deux couleurs et essentiellement indiqué au dégradé de s’étendre verticalement sur l’ensemble de l’élément. Notez que l'ordre des valeurs de couleur doit être inversé sur la version de Mozilla pour produire le même dégradé.
Après l'habillage, nous l'avons appliqué après le remplissage avec les valeurs suivantes: décalage horizontal 0px, décalage vertical 10px, flou 30px et noir pour la couleur.
Vous devriez maintenant avoir une bonne note collante avec une ombre et un dégradé!
Étape 6: Utiliser @ Font-Face pour une police manuscrite
Je veux le? H1? Le texte a l'air un peu plus manuscrit, mais je ne souhaite pas utiliser d'image. Je vais donc faire un saut chez FontSquirrel et télécharger l'un de leurs excellents kits @ font-face. Avec ces kits, tout le travail est fait pour vous. Tout ce que vous avez à faire est de télécharger les polices, de les copier dans votre répertoire racine et de récupérer l'extrait de code CSS fourni.
J'ai choisi le kit GoodDog. GoodDog est une belle police manuscrite épaisse.
Comme je l'ai indiqué ci-dessus, copiez les fichiers de police avec les fichiers CSS suivants fournis par FontSquirrel lors de votre téléchargement:
Pour en savoir plus sur la syntaxe, consultez la syntaxe bulletproof @ font-face de Paul Irish. Tout ce que nous devons savoir pour le moment, c’est que la première ligne indique comment faire référence à la police ailleurs dans notre code CSS. Donc, partout où nous voulons utiliser cette police, nous allons taper 'GoodDogRegular'.
Étape 7: Styles d'en-tête et de paragraphe
Pour finir notre post-it, ajoutez le CSS suivant:
Comme vous pouvez le constater, nous avons appliqué la police GoodDog aux balises h1 et p et avons terminé avec quelques styles de positionnement de base. Maintenant, après la mise à jour de la copie d'espace réservé vers quelque chose de plus utile, voici le pense-bête fini:
Étape 8: Faites-le? Moove?
Maintenant, notre seule étape consiste à ajouter le code JavaScript rendant l’article déplaçable. Commencez par importer une copie de MooTools 1.11 dans la section d’en-tête de votre code HTML. Nous utilisons 1.11 parce que la section que nous utilisons n’a pas été intégrée à MooTools 2.
Une fois que vous avez importé le texte, ajoutez le code JavaScript suivant à votre code HTML pour rendre notre pense-bête déplaçable:
La deuxième ligne est la plus importante.Il indique à MooTools de rendre toute division à l’intérieur du conteneur mobile. Vous pouvez personnaliser cette section pour faire tout ce que vous voulez. Par exemple, si vous en vouliez? tag à l'intérieur d'une div avec un identifiant de? greatBigBox? pour pouvoir être déplacé, il suffit de changer le code en:
Voilà! C’est littéralement tout ce que vous devez savoir pour commencer à rendre des éléments mobiles sur votre site.
Conclusion
Comme vous pouvez le constater, la création du post-it était vraiment la partie la plus difficile du processus. MooTools a pris en charge le gros du travail pour rendre l'élément mobile et a réduit notre travail JavaScript à quelques lignes seulement!