Archives des tags : Outils

Pas encore de description pour le tag Outils. Suggérez à l'administrateur du site de d'y remédier.

Flexible Math — Convertir des pixels en pourcentages

Le meilleur moyen pour rendre son site internet responsive consiste à utiliser des valeurs en pourcentage, tandis que le meilleur moyen de mettre en place une maquette, passe souvent par les pixels. Pour mettre tout le monde d’accord, il existe un mode de calcul aussi simple qu’efficace pour passer des pixels aux pourcentages : cible ÷ contexte = résultat. En d’autres termes, on prend la valeur de la cible en pixel, on la divise par le contexte (la valeur en pixel de l’élément parent) pour obtenir un ratio qu’il suffira de multiplier par 100 pour avoir les précieux pourcentages.

Dégradés CSS3 WYSIWYG avec Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator est un éditeur de dégradés mis au point par Alex Sirota (ColorZilla) qui permet de générer les déclarations pour vos dégradés CSS3 via des sélecteurs de couleurs et des curseurs très proches de l’Outil Dégradé de Photoshop. Quelques réglages préétablis sont disponibles mais la création d’un dégradé personnalisé est très intuitive. La fenêtre de prévisualisation permet de modifier l’orientation verticale ou horizontale du dégradé, et le code CSS est mis à jour automatiquement à chaque modification avec une petite pensée pour Internet Explorer.

Gridulator calcule la grille de votre design web

Gridulator — Cet outil en ligne créé par David Sleight permet de faciliter les calculs de votre grille de mise en page. Il suffit de spécifier la largeur de votre design, le nombre de colonnes que vous voulez et Gridulator vous donnera tous les résultats présentant des valeurs entières (difficile de diviser un pixel, n’est-ce pas ?). L’application est pilotable au clavier, ce qui facilite les tâtonnements pour trouver le meilleur rapport entre la largeur des colonnes et des gouttières.

Formbuilder — des formulaires HTML avec PHPForm

Formbuilder — Trois étapes suffisent pour créer des formulaires en éliminant la phase de codage HTML : il suffit de cliquer sur les éléments que vous voulez, personnaliser les labels et renseigner les valeurs par défaut. Il est possible de modifier l’ordre des éléments après leur création par glissé-déposé. Enregistrez, c’est gagné !

EmChart — Convertir des pixels en EM

EmChart — Il est courant d’avoir besoin de convertir des valeurs exprimées en pixels vers une unité de mesure relative comme les EM’s. Cette conversion n’est pas toujours aisée et la calculatrice est souvent nécessaire. EmChart est une table de correspondance qui donne automatiquement le ratio en EM par rapport à deux valeurs exprimées en pixels.

Générateur de coins arrondis avec border-radius

La propriété CSS3 `border-radius` permet de faire des coins arrondis pour rendre nos pages web plus jolies à regarder. Tous les navigateurs ne prennent pas en charge la propriété CSS3 `border-radius` : les agents utilisateurs carburant au moteur de rendu Webkit (Chrome, Safari, iPhone, Android) utilisent `-webkit-border-radius` et ceux qui tournent sur Gecko (Firefox, Camino) utilisent `-moz-border-radius`. Quant à Internet Explorer, on peut garder l’espoir qu’avec IE9 ont verra un peu de lumière au bout du tunnel…

Dummy Image — des images de placement pour votre site web

Dynamic Dummy Image Generator est un outil en ligne qui génère une image en fonction de la taille que vous indiquez :  saisissez le format dont vous avez besoin à la fin de l’URL du site, comme http://dummyimage.com/434×200 par exemple. Très utile en complément de HTML-IPSUM pour commencer à travailler sans contenu. L’auteur précise que l’on peut « hotlinker » autant d’images que son serveur pourra le supporter 😉

Genfavicon — Générateur de favicon

Genfavicon — Un favicon est une image miniature qui prend place devant l’URL du site consulté dans IE8 ou Firefox et/ou dans les onglets de Google Chrome. Ils sont pratiques pour identifier les sites web que vous consultez lorsque plusieurs onglets sont affichés. Pour réaliser un favicon, n’importe quel éditeur d’image peut faire l’affaire. Toutefois, un générateur d’icônes comme Genfavicon vous permettra de gagner du temps en autorisant le recadrage d’une image distante à partir de son URL ou depuis votre poste de travail.

15 outils en ligne pour créer des palettes de couleur

Pour le webdesigner d’aujourd’hui comme pour le peintre d’hier, le choix d’une bonne palette de couleur est déterminant pour la réussite d’une oeuvre, fut-ce un site web. Pour y parvenir, voici quelques ressources en ligne pour obtenir rapidement des palettes de couleurs de qualité, tout en s’amusant.