Modernizr : un JavaScript pour utiliser du HTML 5 et du CSS 3 dès maintenant

modernizr

Si vous en avez marre d’attendre que le grand public mette à jour ses navigateurs pour pouvoir utiliser du HTML 5 et du CSS 3, vous pouvez utiliser Modernizr :

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Je testerai sans doute à la prochaine refonte du site, c’est à dire prochainement (?).

CSS3 Please : un générateur de CSS3

Si vous voulez déjà utiliser des propriétés CSS3, vous devez savoir qu’elles sont implémentées sur plusieurs navigateurs mais avec des dénominations différentes.
Par exemple border-radius (pour obtenir des coins arrondis)  :

  • -moz-border-radius sous Firefox
  • -webkit-border-radius sous Chrome et Safari
  • border-radius sous Opera et le prochain IE9

Etant donné qu’il est assez laborieux de trouver chacune des dénominations pour une seule et même propriété, CSS3 Please vous sera d’une grande aide. Il vous permet d’éditer les valeurs pour chaque propriété CSS3 puis de les copier et les utiliser sur (quasiment) tous les navigateurs, que ce soit :

  • les ombres
  • les dégradés
  • les fonds semi transparents en RGBA
  • la rotation
  • les arrondis
  • @font-face (pour inclure la police qu’on veut)

Quelques-unes de ces propriétés marchent même sous IE6 et IE7!

Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript

Je vous invite à aller lire le tutoriel complet sur le CSS que j’ai écrit.

Après avoir expliqué comment réaliser un bon formulaire HTML, pourquoi ne pas en réaliser un uniquement en CSS3 ?

Screenshot formulaire CSS3
Lire la suite

Making Love to Webkit

Exceptionnelle utilisation des 3D Transforms en CSS3.
(Hyper fluide avec Chrome sous Mac OS X mais je ne l’assure pas partout).

Colonnes, marges et nth-child en CSS 3

Mail d’une amie :

J’ai une colle pour toi :

1 – 4 colonnes de 240px => largeur totale 960px
2 – je rajoute un margin-right de 5px et soustrais 5px de la largeur de la colonne => largeur totale 960px
Et pourtant dans le 2ème cas, visuellement la largeur totale est inférieure à 960px.
How is it possible ?

Elle n’était vraisemblablement pas bien réveillée parce qu’elle connaissait la réponse, mais je vais développer la méthode ici pour ceux qui auraient des soucis.

Lire la suite

Enfin ! Cambodia Vietnam 2010 !

Fin 2010, je partais avec une amie pour 2 semaines et demi en Asie. Depuis le départ, je savais que je voulais réaliser un site en anglais (pour ma famille aux Pays-Bas) qui retracerait notre voyage et utiliserait de nouvelles technologies HTML 5 et CSS 3. Même si le processus graphique a été plutôt rapide (< d’un mois), j’ai du jour au lendemain mis en pause la finalisation du site, alors qu’il était terminé à 80%.

Il y a 2 semaines, je décidais d’achever le site, enfin ! C’est probablement le dernier site que je réaliserai, étant donné que je ne suis professionnellement plus un Web Designer.

Lire la suite

Projet final : Timeline et Coups de Cœur

La page A propos est la première générée par WordPress. On l’édite souvent très rapidement parce que notre souhait est plutôt d’éditer le 1er billet et d’en écrire pleins d’autres (c’est pourquoi on débute un blog non ?).

La page A propos, elle, finit par prendre la poussière. C’est normal : chaque jour qui passe la rend de plus en plus désuète. Elle demande sans cesse à être mise à jour, mais vous la négligez continuellement au profit de vos billets, toujours fringuants.

Sur mon blog, elle demeurait secrètement en ligne mais il n’existait aucun lien pointant vers elle. Un manque de tact de ma part, forcément.

Mais soudain, une vision…

Lire la suite