Bonjour,

Je voudrais savoir comment faire un effet comme celui ci-dessous :



Entourer les Accueil, FAQ, etc etc dans un cadre arrondi avec une ombre.
J'ai cherché mais je n'est pas trouvé

Merci.?

Je vais peut-être paraitre méchante mais la capture vient de mon forum et ya rien de plus simple à que faire cela. Tu trouve comment arrondir puis tu cherche sur google Box-shadow (css) tu trouve tout de suite.

Pour t'aidé si tu sais pas c'est la variable c'est

Code:

a.mainmenu{
}

Bonne chance

Je n'y m'y connais pas du tout en CSS & Html.

PS : Alors très beau forum !

Bonjour.

Il n'est jamais trop tard pour apprendre.
Cette section est une section d'entraide. Un endroit ou l'on vient pour ce faire aider quand on a des difficulté à faire quelque chose. Pas un endroit ou l'on vient poser un screen d'un autre forum et ou l'on attend que le résultat tombe du ciel.

Le minimum est donc de ce renseigner, d'apprendre les base du codage, de lire les tuto (sur le problème que tu as il y en à plein) de faire des essais, et si on bloque, de venir avec ce que l'on à fait demander si quelqu'un peut voir ce qui va pas.

La création d'un beau forum demande de l'investissement personnel.

1. Depuis ce matin j'ai essayé plusieurs code.

2. Depuis hier soir je cherche sur le forum.

Et bien si peut être pouvez vous nous donner le résultat de vos investigation et les codes que vous avez testé (en disant ou vous les avez mis).
Comme ça nous pourrons vous dire pourquoi ça ne marche pas et comment corriger. Ce qui sera bien plus constructif que d'attendre que quelqu'un vous donne la réponse, agacé par la demande.

Code:

/* MENU */

a.mainmenu{
}
text-decoration {
  box-shadow: 8px 8px 12px #aaa;
}

Essaye ceci :

Code:

/* MENU */

a.mainmenu{
}
text-decoration {
-webkit-box-shadow: 8px 8px 8px #000000;
-moz-box-shadow: 8px 8px 8px #000000;
box-shadow: 8px 8px 8px #000000;
}

Ça ne fait rien :s

Bon alors l'un comme l'autre il va falloir revoir la syntaxe CSS :

Code:

a.mainmenu{
  -webkit-box-shadow: 8px 8px 8px #aaa;
  -moz-box-shadow: 8px 8px 8px #aaa;
  box-shadow: 8px 8px 8px #aaa;
}

Merci, ça fait bien une ombre

Mais pour le font arrondi je n'avais rien trouvée.

Il s'agis de la propriété CSS3 border-radius. Comme c'est encore ressent, il faut, comme pour les ombre ajouté les propriété préfixé de moz et webkit.

Code:

border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;

Le 5px est ajustable bien sur. Il représente le diamètre de l'arrondi.

L'effet n'est visible que si il y à une bordure ou un fond.

VPeybernes a écrit:

l'un comme l'autre il va falloir revoir la syntaxe CSS

Chez moi ça marche parfaitement comme je l'ai fait donc mon code est aussi valable

C'est très simple je vais l'expliqué mieux

On commence avec la variable que vous désirez

Code:

a.mainmenu{
}

Pour l'effet qu'on veux on désire avoir une couleur comme fond alors on rajoute entre les balise {} sans rajouté aucune balise

Code:

background-color: #COULEUR DÉSIRER;

Cela va créer un carré de couleur derrière le texte mais nous c'est un rond qu'on désire alors entre les balise {} on va rajouté une autre variable qui est

Code:

border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;

Tu change les chiffres selon ton désire si tu augmente le nombre celui si va être plus rond et si tu diminus le chiffre celui-ci va être plus carré

Maintenant nous voulons pas que le texte soit coller dans le coins arrondit alors on rajoute entre les balise {}

Code:

padding-left:10px;
padding-right:10px;

Ceci permet de créer une espace entre le contour droit et le contour gauche tu modifie les chiffres selon ton désire si tu veux que ça soit plus collé tu diminue et si tu veux que sa soit plus espacé tu augmente le chiffre

Maintenant on est rendu à l'ombre autour du rond

Code:

  -webkit-box-shadow: 8px 8px 8px #COULEUR DÉSIRER;
  -moz-box-shadow: 8px 8px 8px #COULEUR DÉSIRER;
  box-shadow: 8px 8px 8px #COULEUR DÉSIRER;

Tu rajoute toujours ce code entre les balises {} et tu met la couleur que tu désire pour l'ombre et les chiffres si tu désire les modifier je te conseil de lire Ceci

Moi je te conseil de rajouté ceci qui va empêché le soulignement désagréable alors tu met toujours entre les balise {} ceci

Code:

text-decoration: none;

Maintenant tu rassemble tout cela entre les balise {}

J'ai fais le code que Emaline a expliquée.

Merci ! J'ai compris (Enfin, je crois) à quoi servait chaque parties, donc merci baucoup.
Et bien sûr, le code marche parfaitement.