Voici comment appliquer au web le tuto sur le déchiré Photoshop. Cela va vous permettre de mieux comprendre comment tournent les CSS.

Pour commencer il vous faut une image de fond déchiré. Voir comment le réaliser dans le tuto Photoshop consacré à ce sujet…

Ensuite il faut choisir Fichier > Enregistrer pour le Web. Vous remarquez qu'il y a trois formats d'export possibles, le meilleur étant le PNG, car il garde la transparence (figurée dans Photoshop par les damiers gris et blanc).

Créez un document dans Dreamweaver (ou avec Kompozer si vous préférez.)

Cliquez sur l'icône en bas la palette des styles (Nouvelle règle de CSS).

Nous allons redéfinir la balise H1 (En-Tête de niveau 1). Cliquez sur OK (facile non?).

Dans le menu latéral, choisissez Arrière-Plan et choisissez l'image que vous venez de créer. Spécifiez Background repeat : No-repeat. Validez et voici le résultat.

Pas terrible, non? Nous allons arranger ça. Double cliquez sur la règle de style dans la palette pour l'éditer.

Activez Boîte et réglez le Padding gauche et haut pour placer le texte au bon endroit. Pour vérifier inutile de faire OK, cliquez plutôt sur Appliquer, pour voir sans sortir de la fenêtre d'édition.

Choisissez ensuite Type et ajustez avec une Police plus punchy.

Vous remarquez que l'image de fond se déforme pour suivre la taille du texte. Si vous ne voulez pas de déformation, revenez sur boîte et fixez Width et Height (largeur/hauteur) pour correspondre à la taille de l'image.

Quand vous ferez un retour de paragraphe le texte viendra dessous mais pas forcément ou vous le voulez.

Il faudra créer une nouvelle règle de style pour les paragraphes. Le mieux est de changer pour le paragraphe la marge : Margin top : -20px (eh oui peut être négatif) et margin bottom : 10 px.

Si vous ressaisissez du texte vous pourrez ensuite placer autant d'iutertitres que vous voulez en leur appliquant En-tête 1 avec la palette des propriétés.

Ceci peut s'appliquer à toutes les feuilles de styles. Même si vous travaillez avec un CMS comme Joomla, il vous suffira de créer les images, les règles adaptées et d'écrire un petit bout de code pour que ça marche… pour des modules par exemple. Nous verrons cela prochainement.

Bises.

Fichiers joints:

Fichier	Description	Taille de fichier
css-dechire.zip		12 Kb