SEO, web, high tech et mobile

20 Templates de formulaires CSS3 / HTML5

Article de designmodo qui regroupe 20 designs de formulaires, réalisés en CSS3 et HTML/HTML5.
Ça vous permettra de gagner du temps dans vos développements et surtout vous donnera des idées de designs.

Il y a des formulaires d’enregistrement, de contact, d’identification, de commentaires, etc…

exemple de formulaire css3 HTML

Formulaire CSS / HTML

Lire la Suite

Jérôme PASQUELIN

5 jeux en HTML5 : Magician – Fairy Rescue, Sinuous , Pajama , Breakdom et Canvas Rider

Voici une liste de 5 jeux réalisés en HTML5

  • Magician – Fairy Rescue : jeu où il faut libérer des fées en tirant sur des bulles (compatible IE9, Firefox 4.0 et Chrome 11)
    http://www.relfind.com/game/magician.html
  • Sinuous : jeu où vous êtes un serpent et où le but est d’éviter de se faire toucher par les points rouges défilants
    http://hakim.se/experiments/html5/sinuous/01/
  • Pajama : jeu de simulation d’élevage de poissons basé sur les lois fondamentales de la génétique.
    A partir d’un premier couple de Pajama (Adam et Eve) que vous profilerez, vous devrez obtenir dans la descendance suffisamment de Pajamas qui répondent aux objectifs fixés à chaque niveau.(compatible Safari 5, Opera 10, Firefox 4.0 et Chrome 10)
    http://www.genetix.fr/pajama/ Lire la Suite
Jérôme PASQUELIN

Tuto HTML5 : creer un cercle de texte avec des ombres

script-tutorials.com nous a concocté un tutoriel qu’ils appellent ‘Texte 3D’.
Pour moi c’est juste un effet de texte, tel qu’on peut faire sous photoshop : le texte est orienté en arrondi jusqu’à former un cercle.
Ils ont ajouté une effet de d’ombre qui donne un peu de relief .
La fonctionnalité intéressante est l’animation du texte possible.

Voir la Démo texte arrondi en HTML 5
Les fichiers sources sont à télécharger à cette URL

Lire la Suite

Jérôme PASQUELIN

Tuto : créer facilement une infobulle avec jQuery

Red-team a rédigé un tuto permettant de créer une infobulle avec jQUery : c’est une bulle d’aide qui apparait au roll-over de la souris, souvent sur les liens ou dans les formulaires.

Il y a des dizaines de tutos déjà sur le net mais je trouve que ce script a un rendu assez design et la bulle apparait d’une manière très fluide.
C’est en CSS3 et HTML5.
J’ai testé sous Firefox 8, Google Chrome 15 et Internet explorer 8 : sous IE l’apparition et la disparition est instantanée sans transition , comparée aux deux autres navigateurs.

La démo : red-team-design.com/wp-content/uploads/2011/11/easy-css3-jquery-tooltips-demo.html
Lire la Suite

Jérôme PASQUELIN

Tuto : barre de progression en CSS3

Avec la vulgarisation de l’ajax, les barres de progression sont présentes partout dans notre navigation : état d’un processus, téléchargement de fichiers, chargement d’un module, …

Red-team vous propose un Tutorial avec 3 barres de chargement animées.
La démo ici

Jérôme PASQUELIN