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.

5 Alternatives à PayPal pour les transactions en ligne

5 Alternatives à PayPal pour les transactions en ligne

PayPal est peut-être le service de transaction en ligne le plus utilisé, mais cela ne signifie pas qu'il n'a pas de défauts. Il n'est pas disponible dans certains pays, et ses frais sont assez élevés, surtout pour les transactions internationales. Sans parler de l' habitude de PayPal de bloquer les comptes pour la moindre des raisons.Que

(Conseils techniques et de conception)

Pourquoi vous devriez partir en vacances sans technologie [infographie]

Pourquoi vous devriez partir en vacances sans technologie [infographie]

Nous avons déjà écrit sur la nécessité de se déconnecter de nos gadgets et gadgets pour notre bien-être personnel. À tout le moins, le fait de ne plus dépendre de la technologie, au moins pour les rencontres familiales, nous aidera à renouer avec les personnes qui nous sont chères.Pour ajouter à cette pile, nous avons ici une infographie par Modis qui essaie de faire un cas pour des vacances sans technologie, le genre qui peut vraiment vous aider à recharger correctement. En dehors d

(Conseils techniques et de conception)