utile

Avec l’arrivée des écrans haute densité comme les écrans Retina, il devient urgent d’adapter nos webdesigns à ce type d’écran. Loris Grillet vous présente quelques technique afin de préparer vos icônes et autres éléments d’interface à l’arrivée de ces types d’écran.

Humane est une petite librairie JavaScript permettant d’afficher simplement des notifications à l’écran. Pas besoin d’un framework comme jQuery ou Mootools. Les animations sont réalisées en CSS3 quand le navigateur le permet ou bien via JavaScript si le navigateur ne les supporte pas.

Encore une petite trouvaille en cette fin de semaine (je vais finir par en faire une habitude si ça continue) : au programme aujourd’hui une ressource bien sympa pour créer nos joli bouton d’interface en CSS3, comme les fameux boutons « Submit » de nos bon amis les formulaires Web.

On le sait tous, préparer nos images pour nos boutons de formulaire, que l’on va potentiellement utiliser un peu partout sur un site, c’est chiant. CSS3 nous sauve un peu la vie, les jolis boutons qu’on claque dans nos maquettes, c’est parfois pas la joie à intégrer.

Alors pourquoi ne pas créer ces boutons, fourrés aux dégradés et autres joyeusetés top-tendance,  directement avec CSS3, sans passer pas Photoshop ? Vous avez demandé un générateur qui vous mâche  les déclarations CSS? tant mieux!

Vendredi dernier, on a parlé du Responsive Web design (RWD) pendant le #wdfr sur Twitter, vous aurez d’ailleurs un résumé de la sessions du 2 septembre sur le blog du WDfriday, une fois celui-ci en ligne.

Aujourd’hui, voilà pour vous FitVids.JS,  une nouvelle ressource pour pouvoir servir vos vidéos YouTube, Dailymotion, Vimeo, etc. avec une largeur « responsive », s’adaptant à la taille de la fenêtre. Vous n’avez plus d’excuse pour passer au RWD !

Si vous servez du contenu via AJAX sur votre site, vous avez surement mis en place un loader au format GIF afin de montrer qu’un contenu est entrain d’être chargé et qu’il faut patienter quelques instant avant qu’il ne s’affiche. Et si je vous disais que ce petit « sablier » pouvait être remplacé par du simple CSS3, vous me croiriez? Non, alors cliquez voir sur ce lien et vous serez surpris

Aujourd’hui, avec HTML5, CSS3 et les Media Queries, on fait de très jolies choses côté webdesign. Mais le must-have, hormis les rubans et autres joyeuseté bien rétro, c’est un design complètement “responsive”, adaptatif, afin de servir une mise en page différente de l’informations suivant le support (desktop, mobile, tablette, etc…).

La petite trouvaille d’aujourd’hui c’est FlexSlider, un diaporama utilisant le principe du responsive design! Vous pourrez donc vous la péter en gardant vos sliders dans les versions pour mobiles. #youpi!

Créez facilement et rapidement des piles de polices, s’accordant parfaitement, et avec fallbacks. Le tout, à emporter grâce à une feuille de style générée automatiquement! Enjoy!

Subtle Patterns : voilà une ressource fort utile si vous aimez les fonds de page simples et sophistiqué. Au programme des pattern sable, papier ou encore carbone. Enjoy!

Patternify est une petite application web permettant des dessiner pixel par pixel ses propres motifs rayés afin de les utiliser dans nos feuille de style CSS, sans avoir à ouvrir Photoshop. On pourra enregistrer l’image dans un fichier, ou bien directement utilisé l’image converti en Base64, sans avoir besoin d’une image.

Aujourd’hui, je suis tombé sur jLabel, un plugin jQuery fort sympathique et en plus de ça non obstrusif. Donc garantissant une très bonne accessibilité à vos formulaires, même sans Javascript activé. jLabel va vous permettre, comme c’est la mode ces derniers temps, d’encapsuler vos libellés dans leur champs de formulaire respectif. Cliquez sur le titre du billet pour être redirigé sur le site du plugin

Il y a pratiquement 1 an maintenant je vous avez montré comment créer vos propres infos-bulles en jQuery, aujourd’hui je vous présente un plugin vraiment sympa qui permet de faire très simplement des infos-bulle (ou tooltips) similaire à celles qu’on peut trouver sur Facebook ou encore Twitter. (suite…)