Avec le nouvel objet canvas en html 5, je me disais qu’il serait surement possible de générer dynamiquement un effet de mirroir sous les images, comme ce que propose la nouvelle suite d’Apple dans Pages, Keynote et iWeb. Au gré de mes recherches dans Google pour trouver plus d’infos sur les canvas, je suis tombé sur un script déjà fait qui réalise exactement ça : reflection.js.
Il suffit d’attribuer la class « reflect » aux images pour lesquelles vous souhaitez avoir un effet de réflexion, et l’image est générée automatiquement au chargement de la page.
Evidemment, ceci ne marche qu’avec les navigateurs implémentant l’objet canvas, c’est à dire Firefox 1.5, Safari 2 et Opera preview 9.
All posts in CSS
Réflexion d’image en javascript, façon iWeb
Xylescope, analyseur CSS pour OSX
Xylescope est un analyseur de page web qui permet de debugger vos page. Il affiche toute l’arborescence du DOM de la page et permet de consulter les propriétés CSS de chaque élément. On peut modifier les propriétés CSS et voir le résultat « en live » dans la fenêtre de visualisation.
Xylescope utilise Webkit pour le rendu des pages.
Web inspecteur pour Safari
La dernière nightly build de Safari ajoute une nouvelle fonctionnalité pour les développeurs, l’inspecteur web. Cet inspecteur permet de parcourir la hiérarchie DOM d’une page, élément par élément, et de contrôler le contenu d’un élément et les styles css qui lui sont appliqués. Très pratique pour contrôler la structure de ses pages, et pour débuguer les sites utilisant ajax.
S5 + script.aculo.us = présentations dynamiques
S5, le système de présentation à la Powerpoint en XHTML, CSS, et JavaScript est très pratique pour créer des présentations facilement distribuables sur internet, sans nécessiter de visionneuse, un navigateur suffit. Juan Manuel Caicedo a eu la bonne idée d’y ajouter les effets javascript de la bibliothèque script.aculo.us pour y mettre un peu d’animation.
Explications et démo.
Nouveau webmail PHP, XHTML et CSS
RoundCube est un nouveau webmail imap écrit en PHP, entièrement skinnable en CSS. Le projet en est au tout début, mais il semble prometteur, et il propose déjà une version utilisable. Le but est de simuler le comportement d’un lecteur de courrier classique (drag & drop, règles de tri, fichier attachés, …), le tout implémenté avec les dernières technologies web (CSS2, javascript, DOM, XMLHttpRequest). A suivre…