Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forumCours codage Shivies prof Kirby
Invité
Invité
Jeu 11 Mai 2017 - 21:43
Alors ici c'est le cours de Shivies dont le prof est moi //SBAAFF//
Mais tout le monde peut venir voir et demander des trucs.
Alors les bases, ya deux parties dan le codage: le HTML ET LE CSS
Le HTML c'est la base du codage, la structure, ce sont les balises comme "div" Il faut mettre la balise div au début et à la fin du codage, à la fin on n'oublie pas de mettre un slash ("/")
Le CSS cest à l'interieur du codage, les réglages que l'on introduit par un "style=" (à placer juste apres le div d'ouverture) Il faut bien mettre les réglages entre guillemets et séparer les différents réglages par des points virgules.
Capiche ?
On passe à la pratique.
On ouvre le code :
On rajoute ensuite les caractéristique du code (bords, fond etc)
On fait les bord, il y a différents types de bords :
Ce bord on peut choisir sa grosseur, en indiquant un nombre en pixel et sa couleur avec le code (#bidule) d'une couleur.
Ex:
Un petit plus pour les bords, on peut les arrondir Pour ça il faut utiliser "border-radius" et on met le dégré en pixel d'arrondissement. Facile
Donc ça donne:
FOND
Alors le fond on peut ne pas le faire //POUTRE// Ou peut mettre de la couleur, ou une image. Pour la couleur cest bien c'est sobre et efficace. Pour un fond imagé, il faut faire attention, l'image ne s'agrandira pas selon la taille du code, elle se répetera. Donc ça peut faire moche selon les images. Je mettrais ptêt un exemple quand je serais sur ordi.
Donc il faut mettre "background-color" ou "background-color selon ton choix. Pour la couleur il faut mettre le code # de la couleur après: background-color: #cc00ff
Et pour l'image l"URL : background-image: url(URL de l'image)
Donc :
Voilà pour le fond. Je ferrais avec image dans une partie réservée pour les images. Autant tout faire ensemble x)
TEXTE
Le texte en mon Dieu, on peut faire tellement de choses, ça va être long x)
Alors déjà, mettre en page le texte, pour ça, on utilise: text-align :
On peut mettre "justify" pour que ça fasse un beau bloc carré
Center pour centrer /paf/
Left pour coller à gauche et right pour la droite.
Comme on peut le voir, j'ai rajouté un div, pour faire plus propre, un div pour le cadre (fond et bord etc) et un autre pour régler la police. Ca fait plus propre et on s'y retrouve plus.
On peut changer la taille de la police avec "font-size: Xpx" On met la dimension de la police en px. Très utile de changer la taille, pour que ça fasse plus lisible et mettre des gros titres qui pète.
Après la taille ? La couleur ! Alors ça c'est simple, on met :"color: #XXXXX"
Oui c'est simple :D Enfin un truc simple
Aller, on va structurer un peu mieux notre fiche, avec un titre :D Donc, on rajoute un autre div pour le titre et on met une grosse taille avec un changement de couleur :D
Petit truc: dans ton titre ou autre, tu peux souligner, mettre en gras ou en italique Grâce au bouton de mise en page du bloc d'écriture Ou bien tu écris direct les balises.
Gras
Donc on passe à plus gros. Police d'écriture et padding.
Alors le padding, c'est pour mettre un espace entre ton texte et la bordure, pour que ce soit lisible quoi Quand tu mets du padding, l'espace sera égale des deux côtés, après si tu veux faire un côté estplus grand et l'autre petit faut utiliser le margin mais ça on verra après. Sauf si je trouve la motivation, mais je préfère faire la police d'écriture avant.
Donc, tu mets "padding: Xpx" tu choisis ta valeur en pixel comme toujours. Tu places bien la balise dans tes réglages d'écriture.
Voilà, et je viens de me rappeler d'un truc. Je t'ai pas montré comment on modifie la taille du codage.
Pour modifier la largeur c'est : width
Et pour la longueur: height
Le height on l'utilise plus souvent quant on met une barre défilante (j'vais te montrer ça tiens) La longueur s'agrandit automatiquement si tu ne définie pas de height. Et le width on le met tout le temps, la plupart du temps. (Fais gaffe à pas mettre des trucs trop gros )
Donc, t'a ton codage, et tu rajoute dans le div du cadre, ta taille.
Pour mettre une barre défilante, il faute utiliser; "overflow: auto;" A mettre après le height, car défois ça marche pas sans ça. Oui c'est chiant
Petit truc: Là, l'overflow est mit dans le div du cadre, ce qui fait que ton overflow englobe tout, et qu'il fait défiler tout. Si tu veux faire défiler seulement ton texte, il faut rajouter une taille (height/width) dans le div du texte. Oui, là on commence à entrer dans le compliqué. JE vais te faire un exemple, pour que tu visualises bien. Essaie de le faire
Comme tu peux le voir j'ai enlevé le height du début, c'est plus pratique. Comme ça la taille se met direct à la taille de l'overflow.
Suite after. Tu peux me demander un truc en particulier que tu aimerais
Mais tout le monde peut venir voir et demander des trucs.
Alors les bases, ya deux parties dan le codage: le HTML ET LE CSS
Le HTML c'est la base du codage, la structure, ce sont les balises comme "div" Il faut mettre la balise div au début et à la fin du codage, à la fin on n'oublie pas de mettre un slash ("/")
Le CSS cest à l'interieur du codage, les réglages que l'on introduit par un "style=" (à placer juste apres le div d'ouverture) Il faut bien mettre les réglages entre guillemets et séparer les différents réglages par des points virgules.
Capiche ?
On passe à la pratique.
On ouvre le code :
- Code:
<div style=" truc"</div>
On rajoute ensuite les caractéristique du code (bords, fond etc)
On fait les bord, il y a différents types de bords :
solid
double
dashed
dotted
groove
ridge
outset
inset
Ce bord on peut choisir sa grosseur, en indiquant un nombre en pixel et sa couleur avec le code (#bidule) d'une couleur.
Ex:
- Code:
<div style=" border: ridge 4px #cc00ff;">Texte</div>
Texte
Un petit plus pour les bords, on peut les arrondir Pour ça il faut utiliser "border-radius" et on met le dégré en pixel d'arrondissement. Facile
Donc ça donne:
- Code:
<div style=" border: ridge 4px #cc00ff; border-radius: 7px;">Texte</div>
Texte
Texte Texte
Texte Texte
FOND
Alors le fond on peut ne pas le faire //POUTRE// Ou peut mettre de la couleur, ou une image. Pour la couleur cest bien c'est sobre et efficace. Pour un fond imagé, il faut faire attention, l'image ne s'agrandira pas selon la taille du code, elle se répetera. Donc ça peut faire moche selon les images. Je mettrais ptêt un exemple quand je serais sur ordi.
Donc il faut mettre "background-color" ou "background-color selon ton choix. Pour la couleur il faut mettre le code # de la couleur après: background-color: #cc00ff
Et pour l'image l"URL : background-image: url(URL de l'image)
Donc :
- Code:
<div style=" border: ridge 4px #cc00ff; background-color: #ffffff;">Texte</div>
Texte
Voilà pour le fond. Je ferrais avec image dans une partie réservée pour les images. Autant tout faire ensemble x)
TEXTE
Le texte en mon Dieu, on peut faire tellement de choses, ça va être long x)
Alors déjà, mettre en page le texte, pour ça, on utilise: text-align :
On peut mettre "justify" pour que ça fasse un beau bloc carré
Center pour centrer /paf/
Left pour coller à gauche et right pour la droite.
- Code:
<div style=" border: ridge 4px #cc00ff; background-color: #ffffff;">
<div style="text-align: center;">Texte</div></div>
Texte
Comme on peut le voir, j'ai rajouté un div, pour faire plus propre, un div pour le cadre (fond et bord etc) et un autre pour régler la police. Ca fait plus propre et on s'y retrouve plus.
On peut changer la taille de la police avec "font-size: Xpx" On met la dimension de la police en px. Très utile de changer la taille, pour que ça fasse plus lisible et mettre des gros titres qui pète.
- Code:
<div style=" border: ridge 4px #cc00ff; background-color: #ffffff;">
<div style="text-align: center; font-size: 35px;">Texte
</div></div>
Texte
Après la taille ? La couleur ! Alors ça c'est simple, on met :"color: #XXXXX"
Oui c'est simple :D
Aller, on va structurer un peu mieux notre fiche, avec un titre :D Donc, on rajoute un autre div pour le titre et on met une grosse taille avec un changement de couleur :D
- Code:
<div style=" border: ridge 4px #cc00ff; background-color: #ffffff;">
<div style="text-align: center; font-size: 24px; color: #000000;">Titre</div>
<div style="text-align: justify; font-size: 12px; color: #cc00ff">Texte</div></div>
Titre
Texte
Petit truc: dans ton titre ou autre, tu peux souligner, mettre en gras ou en italique Grâce au bouton de mise en page du bloc d'écriture Ou bien tu écris direct les balises.
Gras
- Code:
[b][/b]
- Code:
[i][/i]
- Code:
[u][/u]
Donc on passe à plus gros. Police d'écriture et padding.
Alors le padding, c'est pour mettre un espace entre ton texte et la bordure, pour que ce soit lisible quoi Quand tu mets du padding, l'espace sera égale des deux côtés, après si tu veux faire un côté estplus grand et l'autre petit faut utiliser le margin mais ça on verra après. Sauf si je trouve la motivation, mais je préfère faire la police d'écriture avant.
Donc, tu mets "padding: Xpx" tu choisis ta valeur en pixel comme toujours. Tu places bien la balise dans tes réglages d'écriture.
Titre
Texte long pour te montrer ce que ça donne sinon c'est inutile, fin t'as compris. Peut-être pas en fait. Parce que mon cours c'est n'importe quoi. BLalalallalallalallalallalallaallallalalallallalla
- Code:
<div style=" border: ridge 4px #cc00ff; background-color: #ffffff;">
<div style="text-align: center; font-size: 24px; color: #000000;">Titre</div>
<div style="text-align: justify; font-size: 12px; color: #cc00ff; padding: 10px;">Texte long pour te montrer ce que ça donne sinon c'est inutile, fin t'as compris. Peut-être pas en fait. Parce que mon cours c'est n'importe quoi.</div></div>
Voilà, et je viens de me rappeler d'un truc. Je t'ai pas montré comment on modifie la taille du codage.
Pour modifier la largeur c'est : width
Et pour la longueur: height
Le height on l'utilise plus souvent quant on met une barre défilante (j'vais te montrer ça tiens) La longueur s'agrandit automatiquement si tu ne définie pas de height. Et le width on le met tout le temps, la plupart du temps. (Fais gaffe à pas mettre des trucs trop gros )
Donc, t'a ton codage, et tu rajoute dans le div du cadre, ta taille.
Titre
Texte
- Code:
<div style=" border: ridge 4px #cc00ff; background-color: #ffffff; width: 100px; height: 80px;">
<div style="text-align: center; font-size: 24px; color: #000000;">Titre</div>
<div style="text-align: justify; font-size: 12px; color: #cc00ff; padding: 10px;">Texte<div></div>
Pour mettre une barre défilante, il faute utiliser; "overflow: auto;" A mettre après le height, car défois ça marche pas sans ça. Oui c'est chiant
Titre
Texte chiant et long du discour du président.
- Code:
<div style=" border: ridge 4px #cc00ff; background-color: #ffffff; width: 100px; height: 80px; overflow: auto;">
<div style="text-align: center; font-size: 24px; color: #000000;">Titre</div>
<div style="text-align: justify; font-size: 12px; color: #cc00ff; padding: 10px;">Texte<div></div>
Petit truc: Là, l'overflow est mit dans le div du cadre, ce qui fait que ton overflow englobe tout, et qu'il fait défiler tout. Si tu veux faire défiler seulement ton texte, il faut rajouter une taille (height/width) dans le div du texte. Oui, là on commence à entrer dans le compliqué. JE vais te faire un exemple, pour que tu visualises bien. Essaie de le faire
Titre
Texte chiant et long du discour du président qui parle des emplois et du chômage. Alors que toi tu veux regarder ton épisode de My little Pony. Mais pourquoi la vie est si injuste D:
- Code:
<div style=" border: ridge 4px #cc00ff; background-color: #ffffff; width: 170px;">
<div style="text-align: center; font-size: 24px; color: #000000;">Titre</div>
<div style=" height: 90px; overflow: auto; text-align: justify; font-size: 12px; color: #cc00ff; padding: 10px;">Texte div></div>
Comme tu peux le voir j'ai enlevé le height du début, c'est plus pratique. Comme ça la taille se met direct à la taille de l'overflow.
Suite after. Tu peux me demander un truc en particulier que tu aimerais
Vétéran
Puf/Surnom : Shivies
Messages : 745
Lune d'Argent
Jeu 11 Mai 2017 - 21:51
- Cours 1:
- Oki je commence à mettre un bord. J'éditerais aussi au fur et à mesureJ'ai réussi !?
- Code:
<div style= " border: double 5px #cecece"> J'ai réussi !?
</div>
- Cours 2:
- Petit teste du 2ème cours :)
- Code:
<div style= "border: 4px ridge #955628; background-color: #01D758"> Petit teste du 2ème cours :)
</div>
- Cours 3:
- Bonjour !Je ne sais pas quoi dire XD A part le fait que ses cours sont biens XD
- Code:
<div style= "background-color: #01D758; border: groove 5px #955628">
<div style= " text-align: center; font-size: 20px; color: #CECECE">Bonjour !
<div style= "text-align: justify; font-size: 15px; color: #cecece"> Je ne sais pas quoi dire XD A part le fait que ses cours sont biens XD
</div></div></div>
- Cours 4 (Cours 5 après
- Petit Titre ici !
J'ai eu un petit problème au niveau de l'image. Comme tu le verras sur le code, j'ai tenté d'utiliser la balise image: url(url de l'image), mais ça n'a pas fonctionné. Je me suis aidée du BBC pour mettre l'image. Tu sais pourquoi ça n'a pas fonctionné ^^ ?
Ce que je voudrais voir un peu plus tard ou bien plus tard:
- Comment régler la taille d'une image ?
- Comment on fait pour mettre une image en arrière plan sans qu'elle se répète ?
- Comment choisir une police d'écriture ?
- Comment mettre de l'ombre au texte/au titre ?
- Comment créer plusieurs blocs dans un bloc ?
- Comment centrer notre bloc principal sur la page du forum quand on raccourci sa longueur ?
- Comment arrondir les bords en utilisant un overflow ?
Pourquoi je n'ai pas commencé mes questions par pourquoi ?Copyright by Shivies
- Code:
<div style= "border: 5px ridge #01D758; border-radius: 20px; background-color: #01D758; width: 600px; height: 400px; overflow: auto">
<div style= "image: url(https://i58.servimg.com/u/f58/19/64/83/37/lune_d26)">
[img(580px,409px)]https://i58.servimg.com/u/f58/19/64/83/37/lune_d26.jpg[/img]
<div style= "text-align: center; font-size: 20px; color: #ffffff"> [u]Petit Titre ici ![/u]
<div style= "text-align: justify; font-size: 13 px; color: #ffffff; padding: 25px">
J'ai eu un petit problème au niveau de l'image. Comme tu le verras sur le code, j'ai tenté d'utiliser la balise image: url(url de l'image), mais ça n'a pas fonctionné. Je me suis aidée du BBC pour mettre l'image. Tu sais pourquoi ça n'a pas fonctionné ^^ ?
Ce que je voudrais voir un peu plus tard ou bien plus tard:
- Comment régler la taille d'une image ?
- Comment on fait pour mettre une image en arrière plan sans qu'elle se répète ?
- Comment choisir une police d'écriture ?
- Comment mettre de l'ombre au texte/au titre ?
- Comment créer plusieurs blocs dans un bloc ?
- Comment centrer notre bloc principal sur la page du forum quand on raccourci sa longueur ?
- Comment arrondir les bords en utilisant un overflow ?
Pourquoi je n'ai pas commencé mes questions par pourquoi ?
<div style= "text-align: center; font-size: 12px; color: #ffffff"> Copyright by Shivies
</div></div></div></div>
InvitéInvitéJeu 11 Mai 2017 - 22:01C'est perfect :D Mais le bord tes pas obligée de le mettre dans l'ordre que tu veux. Bon je suis désolé mais je vais en rester là (Ya un contrôle de Maths que je sent pas demain x)
Je te ferais le fond et tout demain soir :DVétéranPuf/Surnom : ShiviesMessages : 745Lune d'ArgentJeu 11 Mai 2017 - 22:12Ok merci beaucoup ^-^InvitéInvitéVen 12 Mai 2017 - 21:28Nouveux trucs ajoutés :DInvitéInvitéDim 14 Mai 2017 - 12:41D'autres truc en plus :D On commence enfin à avoir quelque chose *^*Jeune aventurierPuf/Surnom : Dieu - Kiby - Kirby - Kirsch - Champi - Cookie - Parpaing - ChamparpaingMessages : 132Rêve ÉveilléDim 14 Mai 2017 - 20:35Ton image, ça n'a pas marché, car tu as utilisé un code que l'on prend seulement pour les fonds, dans ton cas il faut utiliser
- Code:
<img src=url "URL"
- Code:
<img src=url "URL de ton image" style="width: XXpx; height XXpx;"/>
- Comment on fait pour mettre une image en arrière plan sans qu'elle se répète ? Bah le seul moyen c'est que ton code fasse la taille de l'image, tu peux redimensionner l'image et l'héberger. Et tu fous un overflow.
EDIT Sun qui s'incruste mais je précise : tu peux aussi mettre un background-repeat: no-repeat derrière ton image.
- Code:
<div style="background-image: url(lien de l'image); background-repeat: no-repeat;">...</div>
- Comment choisir une police d'écriture ?
- Comment mettre de l'ombre au texte/au titre ? Ces deux là on fera au prochain cours
- Comment créer plusieurs blocs dans un bloc ? T'as juste à rajouter un autre divtexte
- Code:
<div style="border: 3px #FFFFFF solid; width: 200px; height: 170px;">
<div style="border: 3px #FFFFFF solid; width: 150px; height: 50px"> texte</div></div>
- Comment centrer notre bloc principal sur la page du forum quand on raccourci sa longueur ? BAh tu mets
- Code:
<center> </center>
- Comment arrondir les bords en utilisant un overflow ? J'ai pas vraiment compris la question. Et si s'est ce que je pense (arrondir au niveau du paragraphe) Je sais pas faire, demande à un bon codeur
Pourquoi je n'ai pas commencé mes questions par pourquoi ? PArce queExpert des lieuxPuf/Surnom : OcyMessages : 500Lune AmbréeDim 14 Mai 2017 - 20:55Coucou twa !
Je me permets de poster, excuse-moi si je n'en ai pas le droit et tout.
Ton cours est super, mais, même si je ne suis pas vraiment une pro en codage, j'ai remarqué quelques petites erreurs que l'on m'a moi même reproché. Aussi, je voulais essayer de te le dire afin que tu sois mise au courant. Après, libre à toi de le garder, ce ne sont que de petites remarques.
Tout d'abord, je voulais parler de la balise
center.
C'est une piste de balises obsolète, ce n'est pas très grave de l'utiliser, mais elles risquent de ne plus être utilisables dans de futurs navigateurs.
Petit truc que j'ai remarqué aussi, pour le texte, la balise que l'ont doit normalement utiliser est la balise span. En effet, la balise div sert essentiellement à créer un bloc, encore une fois, ce n'est pas une grosse erreur, mais mieux vaut faire pour le mieux.
Voilà, c'est tout pour moi et pour mon intervention pas très utile qui ne rime pas à grand chose, ce n'était en aucun cas contre toi.Vieille branchePuf/Surnom : KaylMessages : 1784KaylDim 14 Mai 2017 - 22:19Well so, vu que moi je fais mes études codage hein o/
Effectivement les balises de type :
- Code:
<center>, <b>...
margin: auto;
On le place dans le bloc à centrer, donc par exemple dans la 1ère div.
De même pour mettre en gras, on utilisera le CSS
font-weight: bold;
Ensuite, ce qui est balises.
- Code:
<div>
- Code:
<h1>
- Code:
<p>
- Code:
<span>
Voilà bon comme ça j'apprends ça à tout le monde d'un coup
- Code:
<div style="border: 2px dotted black; background: #CCEEFF; width: 350px; margin: auto; ET LE CSS DU BLOC PRINCIPAL;">
<h1 style="font-size: 35px; color: black; text-align: center; ET LE CSS DU TITRE;">Titre ici</h1>
<p style="color: blue; font-family: Times; padding: 7px; ET LE CSS DU TEXTE;">
Ici ton texte, on raconte un peu de blabla et soudain, on décide qu'on veut un mot en rouge. Tiens ce mot là : <span style="color: red;">sang</span> Et on continue à écrire de la merde.
</p>
</div>
Titre ici
Ici ton texte, on raconte un peu de blabla et soudain, on décide qu'on veut un mot en rouge. Tiens ce mot là : sang Et on continue à écrire de la merde.VétéranPuf/Surnom : ShiviesMessages : 745Lune d'ArgentLun 15 Mai 2017 - 17:08Ok (je digère vos informations sauf que mon cerveau est long à la détente ^^)
Kirby> Je fais le 5ème cours (mettre un overflow juste pour le texte, puis je tente des petits trucs )
Kayl et Ocy > Merci beaucoup d'apporter des petits trucs en plus ^^ (même si c'est tout de même lourd à digérer )
Sinon mon projet final, à peu près, car je voudrais que l'image soit tout le long et le titre est peu être un peu large, mais en gros c'est ce que j'aimerais faire (pour mon atelier ^^)- Spoiler:
InvitéInvitéLun 15 Mai 2017 - 17:33|| Juste pour répondre, à la question d'arrondir les bords au niveau d'un overflow (si j'ai bien compris la question) il me semble pas qu'on puisse, si t'arrondis les bords l'overflow suivra pas et ça risque de faire bizarre. Dans ces cas-là le mieux est de mettre un
- Code:
div style="border-radius: 20px 0px 0px 20px;"></div>
qui n'arrondira que les bords à gaucheEt donc là tu mets ton texte, avec le cadre qui va s'arrondir, mais uniquement à gauche. Après tu peux aussi arrondir sur un seul coin (en bas à gauche ou en bas à droite) en mettant une des valeurs à 0; mais ça, c'est toi qui voit comment tu veux faire ton codage :D
Là je mets du texte pour tester l'overflow et te montrer ce que ça donne,
etc,
etc,
etc,
etc,
etc.
- Code:
<div style="border: 2p solid #FFFFFF; background-color: #000000; width: 300px; margin: auto"><div style="text-align: justify; color: #000000; background-color: #ffffff; border-radius: 20px 0px 0px 20px; width: 200px; height: 200px; padding: 8px; overflow: auto; margin: auto;">Et donc là tu mets ton texte, avec le cadre qui va s'arrondir, mais uniquement à gauche. Après tu peux aussi arrondir sur un seul coin (en bas à gauche ou en bas à droite) en mettant une des valeurs à 0; mais ça, c'est toi qui voit comment tu veux faire ton codage :D
Là je mets du texte pour tester l'overflow et te montrer ce que ça donne,
etc,
etc,
etc,
etc,
etc.</div></div>
Et donc là tu mets ton texte, avec le cadre qui va s'arrondir, mais uniquement à gauche. Après tu peux aussi arrondir sur un seul coin (en bas à gauche ou en bas à droite) en mettant une des valeurs à 0; mais ça, c'est toi qui voit comment tu veux faire ton codage :D
Là je mets du texte pour tester l'overflow et te montrer ce que ça donne,
etc,
etc,
etc,
etc,
etc.
- Code:
<div style="border: 2p solid #FFFFFF; background-color: #000000; width: 300px; margin: auto"><div style="text-align: justify; color: #000000; background-color: #ffffff; border-radius: 20px; width: 200px; height: 200px; padding: 8px; overflow: auto; margin: auto;">Et donc là tu mets ton texte, avec le cadre qui va s'arrondir, mais uniquement à gauche. Après tu peux aussi arrondir sur un seul coin (en bas à gauche ou en bas à droite) en mettant une des valeurs à 0; mais ça, c'est toi qui voit comment tu veux faire ton codage :D
Là je mets du texte pour tester l'overflow et te montrer ce que ça donne,
etc,
etc,
etc,
etc,
etc.</div></div>
VétéranPuf/Surnom : ShiviesMessages : 745Lune d'ArgentLun 15 Mai 2017 - 17:36Ok, merci NephInvitéInvitéDim 21 Mai 2017 - 13:21Bon désolé si j'ai pas fait ça plus tôt, mais j'ai eu deux trois distraction XD Et merci à tout le monde pour les petits ajouts :D
Donc pour mettre de l'ombre, il faut utiliser
- Code:
text-shadow: Xpx Xpx Xpx; pour le texte et box-shadow: Xpx Xpx Xpx pour ton bloc
Le premier "Xpx" c'est le décalage de l'ombre à droite, l'ombre s'étend de X px à droite
Le deuxième c'est le décalage vers le bas, l'ombre s'étend de X px vers le bas
La dernière c'est l'intensité du dégradé
Et ensuite tu peux choisir la couleur de ton ombre en ajoutant une couleur.
Et c'est la même chose pour l'ombre et le bloc.Texte en ombre
- Code:
<p style="text-shadow: 3px 4px 8px #ffffff;"> Texte en ombre</p>
TExte avec boîte en ombre
- Code:
<div style=" border: 3px #000000 solid; box-shadow: 3px 4px 8px;">TExte avec boîte en ombre</div>
Police afterContenu sponsorisé