Formations web et création graphique - Les CSS ça déchire!

Fermer



Connexion

Les CSS ça déchire!

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…

intertitres web graphiques avec les css : tuto didier mazier

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).

intertitres web graphiques avec les css : tuto didier mazier

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?).

intertitres web graphiques avec les css : tuto didier mazier

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.

intertitres web graphiques avec les css : tuto didier mazier

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.

intertitres web graphiques avec les css : tuto didier mazier

Choisissez ensuite Type et ajustez avec une Police plus punchy.

intertitres web graphiques avec les css : tuto didier mazier

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.

intertitres web graphiques avec les css : tuto didier mazier

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.

intertitres web graphiques avec les css : tuto didier mazier

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.

intertitres web graphiques avec les css : tuto didier mazier

Bises.

Fichiers joints:
FichierDescriptionTaille de fichier
css-dechire.zip 12 Kb