html
SAILOR FUKU
METTRE UN BLOC
Mettre un bloc, est surement la partie la plus difficile des bases, surtout parce qu'il y'a plusieurs choses à prendre en compte. Mais une fois que vous aurez l'habitude, ça devient très facile.
Avant tout, je vous présente le code d'un bloc avec le quel vous pouvez normalement tout faire :
<div style="border: TAILLEpx TYPE #COULEURCADRE; background-color: #COULEURFOND; background-image: url(LIENTEXTURE); opacity: 0.7; width: LARGEURpx; height: HAUTEURpx; text-align: center; border-radius: DEGRE1px DEGRE2px DEGRE3px DEGRE4px; box-shadow: 0px 0px 10px #COULEUROMBRE; overflow: auto; margin: auto;">Texte</div>
Alors oui, il est long ! Mais c'est le code qui pour moi, est le plus efficace. Comme toujours, nous allons changer ce qui est souligné/coloré. Mais prenons le temps d'étudier chaque partie du code toute seule.
CADRE :
TAILLEpx : Cette taille-ci, est la taille de carde qui entoure votre bloc. Vous pouvez mettre le numéro que vous voulez, et surtout celui qui vous convient. Plus votre numéro est petit, plus le cadre sera fin.
Exemple : 4px.
TYPE : C'est la forme qu'aura votre cadre. Personnellement, j'en connais huit qui sont :
Dotted - Solid - Dashed - Double - Groove - inset - outset - ridge
#COULEURCARDRE; : là, il suffit tout simplement de mettre le code de la couleur choisie.
Exemple : #000000
Il est possible de faire une bordure d'un seul coté. Pour cela, vous devrez simplement rajouter l'emplacement de votre bordure au code.
Exemple : border-bottom : 4px double #000000;
Pour une bordure double en bas, de couleur noir.
Changez bottom par top/left/right pour d'autre emplacement.
Si vous voulez faire une bordure de 2 cotés, il faut répéter le code 2 fois, avec chacune des positions souhaitées.
Exemple : border-bottom : 4px double #000000; border-top : 4px double #000000;
Pour une bordure double en bas et en haut, de couleur noir.
FOND :
background-color: #COULEURFOND; : Là aussi, il suffit de copier le code de la couleur choisit.
background-image : url(LIENTEXTURE); : Comme expliqué dans le tutoriel du fond, vous devez juste remplacer LIENTEXTURE par le lien du fond voulu. (encore une fois, il doit être hébérgé sur SF.)
TRANSPARENCE :
opacity: 0.7 : Ceci, est la transparence de votre bloc. Plus vous voulez votre bloc transparent, plus vous devrez baisser le numéro 7. Si au contraire vous voulez un fond légèrement transparent, augmentez le 7 à 8 ou 9.
DIMENSIONS :
width : LARGEURpx; : Vous remplacez LARGEUR par la largeur que vous souhaitez à votre bloc. ( Ne pas dépasser les 700px. )
height: HAUTEURpx; : Là, vous remplacez HAUTEUR par la hauteur que vous souhaitez à votre bloc.
FORMES :
border-radius: DEGRE1px DEGRE2px DEGRE3px DEGRE4px; : Cette partie du code vous permet d'arrondir les coins de votre bloc. Vous pouvez modifier les ( DEGRE1 - DEGRE2 - DEGRE3 - DEGRE4 ) à votre guise de 0 à 360.
Il n'est pas obligatoire que les numéros soient similaires pour les quatre coins. Tout dépendra de la forme que voulez donner à votre bloc.
OMBRE :
box-shadow: 0px 0px 10px #couleurombre; : Cette partie du code vous permet de mettre de l'ombre à votre bloc. Vous pouvez modifier les numéros et le #couleurombre à votre guise.
Exemple :
<div style="border: 4px double #000000; background-color: #COULEURFOND; background-image: url(LIENTEXTURE); opacity: 0.7; width: LARGEURpx; height: HAUTEURpx; text-align: center; border-radius: DEGRE1px DEGRE2px DEGRE3px DEGRE4px; box-shadow: 0px 0px 10px #couleurombre; overflow: auto; margin: auto;">Texte</div>
NB : Si vous ne voulez pas de cadre pour votre bloc, effacez totalement la partie : border: TAILLEpx TYPE #COULEURCADRE; ce qui vous donnera un code comme celui-ci :
<div style="background-color: #COULEURFOND; background-image: url(LIENTEXTURE); opacity: 0.7; width: LARGEURpx; height: HAUTEURpx; text-align: center; border-radius: DEGRE1px DEGRE2px DEGRE3px DEGRE4px; box-shadow: 0px 0px 10px #couleurombre; overflow: auto; margin: auto;">Texte</div>
NB : Si vous décidez de mettre une couleur en tant que fond, effacez cette partie: background-image: url(LIENTEXTURE); ce qui vous donne ce code :
<div style="border: TAILLEpx TYPE #COULEURCADRE; background-color: #COULEURFOND; opacity: 0.7; width: LARGEURpx; height: HAUTEURpx; text-align: center; border-radius: DEGRE1px DEGRE2px DEGRE3px DEGRE4px; box-shadow: 0px 0px 10px #couleurombre; overflow: auto; margin: auto;">Texte</div>
Si vous voulez mettre une image en tant que fond, effacez cette partie là: background-color: #COULEURFOND; ce qui vous donne ce code :
<div style="border: TAILLEpx TYPE #COULEURCADRE; background-image: url(LIENTEXTURE); opacity: 0.7; width: LARGEURpx; height: HAUTEURpx; text-align: center; border-radius: DEGRE1px DEGRE2px DEGRE3px DEGRE4px; box-shadow: 0px 0px 10px #couleurombre; overflow: auto; margin: auto;">Texte</div>
NB : Si vous ne voulez pas que votre bloc ait un effet de transparence, effacez cette patrie du code : opacity: 0.7; ce qui vous donnera cela :
<div style="border: TAILLEpx TYPE #COULEURCADRE; background-color: #COULEURFOND; background-image: url(LIENTEXTURE); width: LARGEURpx; height: HAUTEURpx; text-align: center; border-radius: DEGRE1px DEGRE2px DEGRE3px DEGRE4px; box-shadow: 0px 0px 10px #couleurombre; overflow: auto; margin: auto;">Texte</div>
NB : Il est possible de ne pas écrire les dimensions de votre bloc. Celui-ci s'ajustera automatiquement à votre texte. En largeur, à la largeur du profil entier. Et en hauteur, selon votre texte.
NB : Si vous ne voulez pas de coins arrondis, effacez cette partie du code : border-radius: DEGRE1px DEGRE2px DEGRE3px DEGRE4px; ce qui vous donnera:
<div style="border: TAILLEpx TYPE #COULEURCADRE; background-color: #COULEURFOND; background-image: url(LIENTEXTURE); opacity: 0.7; width: LARGEURpx; height: HAUTEURpx; text-align: center; box-shadow: 0px 0px 10px #couleurombre; overflow: auto; margin: auto;">Texte</div>
NB : Si vous ne voulez pas d'ombre à votre bloc, retirez cette partie de votre code : box-shadow: 0px 0px 10px #couleurombre; ce qui vous donnera cela.
<div style="border: TAILLEpx TYPE #COULEURCADRE; background-color: #COULEURFOND; background-image: url(LIENTEXTURE); opacity: 0.7; width: LARGEURpx; height: HAUTEURpx; text-align: center; border-radius: DEGRE1px DEGRE2px DEGRE3px DEGRE4px; overflow: auto; margin: auto;">Texte</div>
Et voilà ! Nous en avons enfin terminé. Si vous avez encore des difficultés, n'hésitez pas à me les partager dans les commentaires du club.
Exercice / Exemple:
Essayons de faire un bloc avec ces informations ci-dessous:
Taille : 2px
Type : dotted
Couleur du cadre : #e52b50
Couleur de fond : #915c83
Image de fond : Aucune
Transparence : 0,8
Largeur : 400px
Hauteur : 200px
Arrondissement des coins : 180
Ombre : 0px 0px 10px #000000
Avec ces données-ci, voici le code du bloc obtenu et son allure :
<div style="border: 2px dotted #e52b50; background-color: #915c83; opacity: 0.8; width: 400px; height: 200px; text-align: center; border-radius: 180px 180px 180px 180px; box-shadow: 0px 0px 10px #000000; overflow: auto; margin: auto;">Texte</div>
