Quelques générateurs utiles

Voilà quelques sites qui me facilitent le quotidien :

  1. Générateurs d’image de fond :
  2. Générateurs de propriétés CSS3 :
  3. Générateur de favicon :
  4. Générateurs de Boutons :

Astuce CSS : créez une lettrine

Première étape :

Pour créer une belle lettrine pour vos articles voici un site très utile : Google Web Font vous permet d’utiliser des polices d’écriture plus recherchées que celles de d’habitude. C’est une bibliothèque gratuite de polices libres de droit.

Repérez la police que vous souhaitez utiliser, pour cet exemple j’ai choisi : Rye de Nicolle Fally. Cliquez sur « Quick-use ».

Insérez la première partie du code dans votre <head>

L’étape CSS :

Créez une classe spécifique votre lettrine dans votre CSS. Si vous ne savez ce qu’est le CSS où et comment l’intégrer à votre site je vous renvois à l’article du W3.org.
On utilise le sélecteur de feuille de style first-letter pour spécifier les propriétés CSS de la première lettre d’un élément bloc par exemple <p>.
Créez votre CSS de cette façon :

On insère la deuxième partie de code CSS récupéré sur Google Web Font :

On peut aussi lui ajouter du style en lui ajoutant une bordure et un fond:

Troisième partie un peu CSS3 :

Voici un site qui permet d’avoir un visuel de l’ombrage que l’on créé avec l’attribut box-shadow : Generateur-de-box-shadow-css3 C’est très pratique lorsque l’on est pas vraiment sûr de l’effet que l’on recherche. Dans notre cas je souhaite créer un décalage blanc de 1px entre mon fond et la bordure.

Voici le code récupéré grâce au générateur et compatible avec différents navigateurs que j’ajoute au CSS existant :

Pour parfaire le résultat, j’ajoute une ombre de texte pour créer un effet de relief grâce à l’attribut text-shadow :

Voilà le résultat :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed ligula ac eros tempor ornare id nec ante. Donec elementum justo dui. Nulla lobortis, purus eu faucibus commodo, tellus eros facilisis nulla, ac sagittis odio turpis sit amet quam. Nulla facilisi. Etiam sed varius risus. Aenean est enim, semper vel rutrum vitae, euismod in diam. Curabitur mollis diam vitae mauris tempor et bibendum arcu vulputate. Aenean quam mi, viverra mollis suscipit tincidunt, adipiscing non nulla.

Le truc en plus :

Mon petit truc en plus c’est d’ajouter une image semi-transparente au fond de la lettrine.
Voici l’image :

Voici le code :

Ce qui donne

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed ligula ac eros tempor ornare id nec ante. Donec elementum justo dui. Nulla lobortis, purus eu faucibus commodo, tellus eros facilisis nulla, ac sagittis odio turpis sit amet quam. Nulla facilisi. Etiam sed varius risus. Aenean est enim, semper vel rutrum vitae, euismod in diam. Curabitur mollis diam vitae mauris tempor et bibendum arcu vulputate. Aenean quam mi, viverra mollis suscipit tincidunt, adipiscing non nulla.

Variez les styles :

On peut varier les styles en changeant les couleurs et images de fond.
Voici une autre image :

Voici un autre jeu de couleur :

Ce qui donne :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed ligula ac eros tempor ornare id nec ante. Donec elementum justo dui. Nulla lobortis, purus eu faucibus commodo, tellus eros facilisis nulla, ac sagittis odio turpis sit amet quam. Nulla facilisi. Etiam sed varius risus. Aenean est enim, semper vel rutrum vitae, euismod in diam. Curabitur mollis diam vitae mauris tempor et bibendum arcu vulputate. Aenean quam mi, viverra mollis suscipit tincidunt, adipiscing non nulla.