RGweb.fr : Le blog de Rémi Garcia sur l'actualité du web, le webdéveloppement, le webdesign, webmarketing, SEO, inspiration, ...

RSS feed Twitter Facebook

Apprendre à se servir des canvas en HTML5

William Malone à créé un article très bien fait afin d’apprendre à dessiner en utilisant les canvas en HTML5. Le code est détaillé et très bien expliqué. Vous apprendrez à créer un panneau attention sans image, uniquement avec un canvas HTML5 et du code JavaScript permettant de dessiner à l’intérieur.

Créer un site avec HTML5 & CSS3 sans aucune image

Le site Onextrapixel.com nous propose la première partie, quand même très fournie, de son tutoriel permettant de créer un site entier, avec un design très agréable, seulement avec HTML5 et CSS3. Aucune image n’est donc présente comme vous pouvez le voir sur la page de démonstration.

Formulaire d’inscription en fibres de carbone : CSS3, jQuery

Tutorialzine propose un tutoriel très complet permettant de construire un formulaire d’inscription en CSS3 et jQuery. Le formulaire final est très stylé, façon « fibres de carbone », fonctionnel et accessible. On notera l’utilisation du jQuery pour la vérification des champs. Très bon tutoriel pour s’inspirer !

Votre CSS en fonction de l’orientation de l’iPad

Cloud Four propose une petite astuce pour charger un CSS en fonction de l’orientation de l’iPad (portrait ou paysage) durant la navigation. Bien sûr pour les français il faudra attendre fin avril pour avoir ce petit joujou entre nos mains mais on peut déjà optimiser son site pour la tablette d’Apple et le tester sur ipadpeek.com.

Une horloge analogique et numérique en HTML5 et jQuery

Jon Combe nous fait une jolie démonstration de HTML5 et jQuery en nous présentant une horloge analogique et numérique rotative. Le tout n’utilise donc que le HTML5, jQuery, CSS3 et quelques images. Les fonctions de transformation (rotation) de CSS3 sont aussi utilisées. Le résultat est plutôt impressionnant !

Texte en 3D avec CSS3

Petit tutoriel par CSS-TRICKS permettant de créer des textes en 3D juste avec CSS3. La méthode est simple : créer plusieurs ombres sur le texte (avec la propriété text-shadow de CSS3). On nous propose aussi d’animer la perspective en faisant apparaître petit à petit ces ombres et créer un effet 3D progressif (avec les transitions webkit de CSS3). Le rendu est très sympa et très simple à réaliser.

Créer une application iPhone en HTML5

Très bon tutoriel proposé par Six Revisions vous permettant de créer une application iPhone en HTML5 de A à Z. Cette application, qui en fait sera lancée dans Safari, aura l’apparence d’une application classique une fois que vous aurez créé le raccourci iPhone, et pourra même être utilisable hors ligne.

Quake 2 dans un navigateur grâce à HTML5 !

Tout simplement impressionnant ce que sont arrivés à faire les ingénieurs de l’équipe du Google Web Toolkit : faire tourner Quake 2 dans un navigateur toolkit (Chrome ou Safari) à l’aide d’HTML5. Le jeu tournerais à plus de 30FPS même sur de petites configurations et n’utilise pas flash. Pour plus d’infos : le blog Google Web Toolkit.

Créer un texte incrusté en CSS3

Six Revisions nous propose un tutoriel simple et très rapide sur l’incrustation de texte en CSS3 (inset typograhpy). En fait c’est en utilisant les ombres (propriété text-shadow de CSS3) que l’on peut donner l’impression à un texte d’être incrusté dans le fond. Le tour est joué en une seule ligne de CSS.

La compatibilité entre navigateurs et HTML5 / CSS3

Vous vous rappelez sûrement de cet article sur findmebyip.com qui nous proposait un tableau de compatibilité entre les différents navigateurs et les nouveaux standards HTML5 et CSS3. Et bien ce tableau a été mis à jour, réorganisé par langage et type de propriété.