Tuto de Kayl n°5 - Marges, ombres, effets divers

Euh oui ça fait longtemps, mais bon Je viens rajouter quelques compléments et trucs utiles :D

Donc, on va reprendre la base du tuto 2 (j'ai modifié légèrement les valeurs)

Ici on écrit un titre

On écrit le texte ici

Copyright by...

Code:

<center><div style="border: 5px double #FF0000; background-color: #CCEEFF; width: 80%; border-radius: 20px;">
<div style="text-align: center; font-size: 26px;"><u>Ici on écrit un titre</u></div>

<div style="text-align: justify; font-size: 14px;">On écrit le texte ici</div>

<div style="text-align: center; font-size: 10px;">Copyright by...</div>
</div></center>

On remarque que le texte est collé à la bordure, c'est pas top Donc, pour mettre une marge intérieure, on peut ajouter l'élément suivant dans la div globale (celle qu'on ouvre en premier) :
padding: 20px;
On peut évidemment changer le nombre de px à notre guise, voire le mettre en % mais ça personne le fait et c'est pas pratique donc on restera en px

Ici on écrit un titre

On écrit le texte ici

Copyright by...

Code:

<center><div style="border: 5px double #FF0000; background-color: #CCEEFF; width: 80%; border-radius: 20px; padding: 20px;">
<div style="text-align: center; font-size: 26px;"><u>Ici on écrit un titre</u></div>

<div style="text-align: justify; font-size: 14px;">On écrit le texte ici</div>

<div style="text-align: center; font-size: 10px;">Copyright by...</div>
</div></center>

Wala ça rend déjà mieux vous voyez :D

Ensuite, autre point, fin petit truc sympa Les ombres
Alors pour ajouter une ombre à un texte, c'est une info à mettre dans la div du texte concerné. Ici, je mettrai une ombre uniquement sur mon texte, une ombre euh rouge pour qu'on la voie

text-shadow: 3px 5px 6px #ff0000;

Ça c'est bien joli, et donc je vais vous expliquer à quoi correspondent chaque valeur x)
Le 1er (3px) correspond à un décalage de 3px vers la droite. Si on veut mettre l'ombre à gauche on mettra un - (moins) devant.
Le 2e (5px) c'est le décalage vers le bas. Donc 5px met l'ombre 5px plus bas que le texte, et pour mettre en haut, pareil on peut écrire -5px
Et la dernière (6px) c'est la force du floutage. En gros si tu mets 0px ou 1px, ça sera presque pas flou, ça fera un peu comme 2 textes nets, superposés. 10px euh c'est très flou
Et ensuite, #couleur pour avoir la couleur de l'ombre x)

Ici on écrit un titre

On écrit le texte ici

Copyright by...

Code:

<center><div style="border: 5px double #FF0000; background-color: #CCEEFF; width: 80%; border-radius: 20px; padding: 20px;">
<div style="text-align: center; font-size: 26px; text-shadow: 3px 5px 6px #ff0000;"><u>Ici on écrit un titre</u></div>

<div style="text-align: justify; font-size: 14px;">On écrit le texte ici</div>

<div style="text-align: center; font-size: 10px;">Copyright by...</div>
</div></center>

Après, pour mettre une ombre à notre bloc autour par exemple, c'est pareil sauf qu'il faut mettre ça à la place :
box-shadow: 3px 5px 6px #ff0000;

Donc je vous montre le petit effet en rajoutant ça (dans notre 1ère div qui contient la bordure évidemment)

Ici on écrit un titre

On écrit le texte ici

Copyright by...

Code:

<center><div style="border: 5px double #FF0000; background-color: #CCEEFF; width: 80%; border-radius: 20px; padding: 20px; box-shadow: 3px 5px 6px #ff0000;">
<div style="text-align: center; font-size: 26px; text-shadow: 3px 5px 6px #ff0000;"><u>Ici on écrit un titre</u></div>

<div style="text-align: justify; font-size: 14px;">On écrit le texte ici</div>

<div style="text-align: center; font-size: 10px;">Copyright by...</div>
</div></center>

Autre chose tant que j'y pense Pour mettre des effets à des images, par exemple une bordure ou justement une ombre (box-shadow), je donne le code :

Code:

<img src="http://a405.idata.over-blog.com/1/00/04/59/blue-morpho.jpg"></img>

Voici l'image de base o/ Maintenant, imaginons qu'on veuille diminuer la taille à 300px et mettre une bordure noire et une ombre blanche allez. On va juste ajouter style="les infos" dans la même balise, de cette façon

Code:

<img src="http://a405.idata.over-blog.com/1/00/04/59/blue-morpho.jpg" style="width: 300px; border: 2px solid black; box-shadow: 0px 0px 10px #ffffff;"></img>

On remarque donc dans le code que j'ai mis 0 aux 2 premières valeurs, pour qu'il y ait aucun décalage donc l'ombre sera tout autour et voilà

Sinon euh j'expliquerai aussi comment installer une police Google Fonts sur un code, et pis je vous apprendrai sûrement les tables pour faire par exemple une fiche de prez, de liens... eeet des petites surprises
Et toujours open-bar pour les questions

Hello !

Ici on écrit un titre

On écrit le texte ici

Copyright by moony

Alors pour les questions...

1. Comment on décale une image ? un texte ?
2. Comment on rajoute un "élément" tel une cerise sur le codage ?
3. tu aimes les papillon ?
4. Comment on fait pour rajouter un truc de ce genre "

Spoiler:

Sinon, je te conseil de rajouter deux trois trucs à expliquer -que je sais-. comment on fait pour changer le curseur, ou on met le feat, mettre l'overflow pour le teste et tout .

Du coup je vais répondre quand même /paf/

Décaler une image et en rajouter une comme sur la fiche de Satani, c'est du positionnement (float et margin)
Pour rajouter un truc du genre de la photo, c'est pareil. C'est juste une div qu'on a bougé comme on peut bouger une image, et y a une rotation aussi
J'expliquerai ça prochainement

Et oui sinon j'aime le papillon, c'est un morpho

oki, merci beaucoup ^^
hâte de voir ce tuto donc !