Faire un encadré avec du Texte/Photo à l'intérieur.Par
O'wee Maintenant que vous avez appris comment faire l'encadré, nous allons jouer avec les propriétés pour le rendre plus personnalisé. Prenons un simple carré de base avec une bordure, sans image. Voici notre code :
- Code:
-
<table style="border:3px solid #2a9ec8; padding: 5px;background:#ffffff;"><td >BLABLABLABLABLABLABLABLABLA</td></tr></table>
Ce qui donne :
BLABLABLABLABLABLABLABLABLA |
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!BLABLABLABLABLABLABLABLABLA |
»
-moz-box-shadow: CHIFFREpx CHIFFREpx CHIFFREpxCe code permet de faire de l'ombre. Tu changes les chiffres par les ceux qui te plaisent, tu peux faire des tests. Pour que l'ombre soit égale partout, tu ne changes que le dernier chiffre. Par exemple, dans l'exemple qui suit, je n'ai changé que le dernier chiffre, les autres sont à ''0''.
BLABLABLABLABLABLABLABLABLA |
Si je met le dernier chiffre plus élevé, ça va donner quelque chose comme ceci:
BLABLABLABLABLABLABLABLABLA |
« Comment on fait pour rajouté des propriétés? »Voici notre code de départ :
- Code:
-
<table style="border:3px solid #2a9ec8; padding: 5px;background:#ffffff;"><td >BLABLABLABLABLABLABLABLABLA</td></tr></table>
Vous voyez le « Table style=''......'' », c'est là qu'il faut ajouter nos propriétés. Il faut prendre bien soin de ne pas négliger les '' ; '' qui sont insérés entre chaque propriétés. Par exemple, si j'ajoute
« -moz-box-shadow: 0px 0px 5px », c'est ainsi que je vais m'y prendre :
- Code:
-
<table style="border:3px solid #2a9ec8; padding: 5px;background:#ffffff; -moz-box-shadow: 0px 0px 5px;"><td >BLABLABLABLABLABLABLABLABLA</td></tr></table>
C'est aussi simple que ça. Je n'ai pas donné beaucoup de propriétés, c'est que
je n'en connais pas encore des centaines disons. Voici un lien où vous pourrez trouver
beaucoup de propriétés et qui peut grandement vous aider.
Liste des propriétés CSS
Question?
Tutoriel par O'wee. Merci de ne pas reproduire!