hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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.

25 extensions Chrome pour les nouveaux onglets géniaux

25 extensions Chrome pour les nouveaux onglets géniaux

Nous avons précédemment écrit sur les nouvelles extensions de navigateur d'onglets que vous pouvez obtenir pour Chrome et Firefox. Depuis lors, de plus en plus d'extensions apparaissent, offrant une variété de contenu qui s'affichera chaque fois que vous ouvrez un nouvel onglet Chrome sur votre navigateur.Dans

(Conseils techniques et de conception)

4 façons de posséder des Bitcoins en ligne en 2017

4 façons de posséder des Bitcoins en ligne en 2017

L'infrastructure Bitcoin a considérablement augmenté, et posséder des bitcoins aujourd'hui peut s'avérer très utile demain. Pour cette raison, un certain nombre de détaillants offrent des rabais pour les achats effectués avec cette monnaie numérique. Il existe même des plateformes financières hybrides combinant des devises numériques et traditionnelles pour créer des comptes bancaires essentiellement mondiaux .Si vous ête

(Conseils techniques et de conception)