RulersGuides.js - Règles et guides de Style Photoshop sur le Web
L'une des meilleures choses à propos de Photoshop est ses lignes directrices faciles à utiliser qui peuvent être tirées des règles. Ces guides peuvent rendre le processus de conception beaucoup plus facile quand il s'agit de positionner un objet et d'obtenir l'équilibre juste.
Pour notre plus grand plaisir, Mark Rolich a mis en œuvre cette fonctionnalité particulière pour une utilisation sur le Web. Il a créé RulersGuide.js basé sur les règles et les lignes directrices de Photoshop.
RulersGuide.js a la possibilité d' ajouter une interface de style de ligne de guide Photoshop sur une page Web . Les lignes qui ont été créées peuvent également être sauvegardées pour un usage ultérieur. Il vous propose trois options d'utilisation: en tant que bibliothèque javascript, en tant que bookmarklet ou en tant qu'extension Chrome .
Le Javascript
RulersGuide.js nécessite d'autres dépendances pour bien fonctionner. Comme cela fonctionne en faisant glisser et en déposant des lignes dans la page et nécessite une certaine utilisation de l'événement, vous devrez ajouter Dragdrop.js (disponible ici) et Event.js (disponible ici). Ensuite, incluez ces dépendances avec la source RulersGuide.js (téléchargez ici) comme ceci:
Si vous n'aimez pas le style par défaut, vous pouvez modifier son CSS en fonction de vos goûts. Ensuite, initialisez ces packages avec le script suivant:
Bookmarklet et extension Chrome
Pour plus de commodité, vous pouvez utiliser cet outil comme un bookmarklet ou une extension Chrome et l'ouvrir quand et où vous voulez.
Installation de Bookmarklet
Pour le bookmarklet, il suffit de l'installer comme d'habitude. Comme Internet Explorer fonctionne parfois différemment, cet outil permet de différencier le programme d'installation de bookmarklet pour les utilisateurs IE et non-IE. Il suffit de glisser et déposer le lien approprié ci-dessous à votre barre de favoris.
- Non-IE Bookmarklet
- Utilisateurs IE
Installation d'extension Chrome
Si vous êtes un amateur de Chrome, vous pourriez aimer cette option. Malheureusement, RulersGuide n'est pas encore disponible sur le Chrome Web Store. Le seul choix est de l'installer manuellement.
Tout d'abord, prenez le fichier d'extension ici. Le navigateur vous demandera de confirmer le fichier; appuyez simplement sur continuer. L'extension ne sera pas installée automatiquement car Chrome a son protocole de sécurité pour vous protéger.
Ouvrez-le en naviguant vers Option> Outils> Extensions ou ouvrez un nouvel onglet, puis copiez et collez les extensions chrome: // dans la barre d'adresse. Ensuite, faites glisser le fichier RulersGuide.crx téléchargé vers la page d'extension, comme indiqué ci-dessous.
L'extension est maintenant prête.
Travailler avec RulersGuide
Comme mentionné, RulersGuide fonctionne exactement comme la règle et la ligne de guidage Photoshop. Lorsque vous activez cet outil, vous obtenez des règles en haut et à gauche de votre navigateur. Vous pouvez retirer quelques lignes de ces règles.
Et en haut à gauche de la page, vous pouvez obtenir plus d'options dans le menu disponible. À partir de ce menu, vous pouvez personnaliser si vous voulez que les lignes soient affichées, sauvegardées, verrouillées et plus encore.
Apprenons à mieux connaître les options.
- L'option cacher est utilisée pour cacher les règles et les guides comme vous le désirez. Même lorsque les règles sont cachées, vous pouvez toujours voir l'option de menu.
- Si vous cliquez sur Déverrouiller, les règles resteront visibles sur la page pendant le défilement. Effacer tous les guides est utile lorsque vous voulez effacer tous les guides que vous avez faits.
- L'option Enregistrer la grille est utilisée pour enregistrer la grille que vous avez créée. La grille sera enregistrée en fonction de l'emplacement de la page. Vous ne pourrez donc pas utiliser la même grille dans d'autres fenêtres / onglets du navigateur. Et comme on pouvait s'y attendre, l'option Grille ouverte consiste à ouvrir vos grilles sauvegardées.
- Lorsque vous cliquez sur Afficher les informations détaillées, le mode d'informations détaillées est activé. Il peut vous montrer la position et la taille des régions de la grille que vous créez ainsi que les modifications que vous apportez à la position du guide.
- Le dernier est l' option d'accrochage . C'est ce que j'aime dans RulersGuide. Vous pouvez aligner les guides sur l'élément DOM ou l'utiliser avec la taille de pixel définie. Notez que l'option Snap to DOM est encore à l'état expérimental au moment de l'écriture. Il peut ralentir ou ne pas répondre sur une page comportant de nombreux éléments.
Conclusion
Malheureusement, il y a toujours un léger inconvénient. Il ne peut pas supprimer un seul guide comme dans Photoshop. Vous pouvez seulement supprimer tous les guides, et sxtart les créer à partir de zéro. Pourtant, si vous travaillez sur des mises en page Web fréquemment sur les navigateurs, alors cet outil est pour vous.
Guide du débutant pour configurer le courriel avec Zohomail
Si vous gérez une petite ou moyenne entreprise, un service de messagerie avec domaine personnalisé peut être très utile pour rationaliser la coordination avec votre équipe. Il fut un temps où vous pouviez obtenir un service de messagerie gratuit depuis Google Apps ou Live.com avec un domaine personnalisé. Toute
Comment réparer "Apps ne répond pas" dans Windows 10
Dans mes années d'expérience avec Windows, j'ai fait face à l'erreur de l'application ne répondant pas comme l'un des problèmes les plus courants de Windows. Dans la plupart des cas, un arrêt forcé ou un redémarrage rapide résout le problème. Dans d'autres cas, cependant, certaines applications peuvent cesser de répondre à chaque fois que vous les utilisez.Si vous ave