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.

Firefox 52 est sorti - Voici ce qu'il y a de neuf

Firefox 52 est sorti - Voici ce qu'il y a de neuf

Les utilisateurs de Firefox sont dans l'air du temps car la dernière version du navigateur web de Mozilla a obtenu une nouvelle version sous la forme de Firefox 52 . Comme avec toutes les autres versions majeures, Firefox 52 est livré avec de nouvelles fonctionnalités et plus encore. Voici les trois fonctionnalités principales et les changements que vous verrez avec Firefox 52 . Le

(Conseils techniques et de conception)

Trouver Web Inspiration Design UI avec Interfaces.pro

Trouver Web Inspiration Design UI avec Interfaces.pro

Chaque concepteur s'appuie sur d'autres sites pour l'inspiration. C'est la pierre angulaire de la conception web et particulièrement utile pour les débutants entrant dans l'espace de conception.Mais de nombreuses galeries d'inspiration se concentrent sur les pages d'accueil ou les mises en page étranges / uniques . I

(Conseils techniques et de conception)