ENCRADRAGE ♦ CSS

par **Lullaby Wayne** Lun 21 Mar - 17:37

Faire un encadré avec du Texte/Photo à l'intérieur.
Par © Crazy-Sweet

Voici le code avec lequel nous allons travailler.

Code:: <table style="border:3px solid #COULEUR DE LA BORDURE; padding: 5px;background:#COULEUR DU FOND;"> <tr> <td ><img src="LIEN DE LA PHOTO" /></td><td style="background:#COULEUR DU DEUXIÈME FOND; padding: 2px;">TEXTE</td> </tr> </table>

N'oubliez pas de changer les "couleurs" - "images" & "Texte" dans ce code sinon cela ne fonctionnera pas. Voici un petit aperçu avec & sans image :

Et voilà avec Image

Et voilà sans Image,
après la longueur peux changer quand vous écrivez.

Modifications possibles

Comme tout code CSS, tout peut être modifiable mais attention à ce que vous modifier car il se peut que ce que vous faite n'est pas bon et là vous serez obligez de tout recommencer et c'est vrai que ce n'est pas vraiment agréable. Tout d'abord la bordure:

Code:: border:3px solid #ce8b6d

• Le 3px équivaut à la grosseur de la bordure.
• Le solid équivaut au style de la bordure. Vous pouvez le modifié par :

none : pas de bordure (par défaut)
hidden : bordure cachée
solid : ligne pleine
double : ligne double (nécessite une taille de bordure de 3px minimum)
dashed : en tirets
dotted : en pointillés
inset : effet 3D "enfoncé"
outset : effet 3D "surélevé"
ridge : autre effet 3D

Essayons quelques bordures:

en tirets:

Et voilà avec Image

en pointillés:

Et voilà avec Image

Double lignes:

Et voilà avec Image

Maintenant que vous avez les "bases" nous allons nous amuser avec le contour lui même !

Prenons ce code:

Code:: <table style="border:3px solid #ffceb8; padding: 5px;background:#ffffff;"><td >Et oui nous aimons le changement LOL </td></tr></table>

Ce qui donne:

Et oui nous aimons le changement LOL

Voici une petite liste de propriétés intéressantes :

» -moz-border-radius:CHIFFREpx CHIFFREpx CHIFFREpx CHIFFREpx

Ce code arrondi les coins. Il suffit juste de changer le ''Chiffre'' par un chiffre.
Exemple, si je change ce chiffre par ''12'', ça va me donner quelque chose comme ça :
* Attention, ce code ne fonctionne pas sous Internet Explorer!

Code:: <table style="border:3px solid #ffceb8; padding: 5px;background:#ffffff; -moz-border-radius:12px 12px 12px 12px;"><td >N'es-ce pas magnifique? </td></tr></table>

N'es-ce pas magnifique?

» -moz-box-shadow: CHIFFREpx CHIFFREpx CHIFFREpx

Ce code permet de faire de l'ombre. Vous changez les chiffres par les ceux qui vous plaisent. Pour que l'ombre soit égale partout, il ne faut changer QUE LE DERNIER CHIFFRE. Par exemple, dans l'exemple qui suit, je n'ai changé que le dernier chiffre, les autres sont à ''0''.

Code:: <table style="border:3px solid #ffceb8; padding: 5px;background:#ffffff; -moz-border-radius:12px 12px 12px 12px;"><td >On reprend notre code et Tadam ! </td></tr></table>

On reprend notre code et Tadam !

Si je met le dernier chiffre plus élevé, ça va donner quelque chose comme ceci