Présentation caféinée

Salut tout le monde !
A peine inscrit, je poste déjà une tentative de fiche de présentation. Les couleurs ne sont peut-être pas super bien choisies donc si un graphiste passe par là et voit que quelque chose ne va pas et a une envie de me pendre par les oreilles, qu'il se retienne et me donne plutôt ses conseils de graphiste. Les conseils des gens qui ne sont pas graphistes sont bons à prendre, aussi, ne vous vexez pas, les gens .

Je sais que ce n'est pas vraiment le bon endroit pour poser la question, mais bon, comme j'ai voulu utiliser cet "effet" pour cet fiche, c'est pas totalement idiot non plus (si ? MAIS EUH !). Je voulais donc que l'ombre de la fiche apparaisse tout autour du cadre, et pas seulement en bas à droite. J'ai pas réussi à comprendre comment on faisait, alors si une âme charitable acceptait de me donner la réponse à mon interrogation, je lui ferai un câlin (et personne ne fait les câlins aussi bien que moi, demandez à ma soeur !)

Vous remarquerez peut-être que j'ai utilisé les polices de Google Fonts. Il y a une bibliothèque de police plutôt interessante à exploiter.

Bref, cessons le blabla, place à la fiche !

Voilou !

Prénom nom.

Fiche de présentation...

« Insérez une citation ici »

en savoir plus...

♪Prénom : [Réponse].
♪Nom : [Réponse].
♪Âge : [Réponse].
♪Date et lieu de naissance : [Réponse].

...sur toi.

raconte-moi...

Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire. - Histoire.

...ton histoire.

pour que je puisse

Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique. - Physique.

...te reconnaître.

pourquoi te caches-tu...

♪Prénom : [Réponse].
♪Âge : [Réponse].
♪Comment as-tu découvert le forum ? : [Réponse].
♪Tes impressions ? : [Réponse].
♪Avatar : [Réponse].

...derrière cet écran ?

(c) Code par Lou pour Never-Utopia

Code:

<center><div style="-webkit-border-radius: 15px;-webkit-border-bottom-right-radius: 0;-moz-border-radius: 15px;-moz-border-radius-bottomright: 0;border-radius: 15px;border-bottom-right-radius: 0;box-shadow:2px 2px 2px #A9A9A9; -moz-box-shadow:2px 2px 2px #A9A9A9; -webkit-box-shadow:2px 2px 2px #A9A9A9; border:2px #52251C solid; background-color:#FDEDC0;width:470px;">
<div style="border-bottom:1px #52251C dashed"><span style="font-family:Georgia; font-variant:small-caps; text-shadow:1px 1px 1px white; font-color:#38040C; font-size:40px;">Prénom nom.</span></div><script type="text/javascript" src="http://tinyurl.com/var-fa"></script><link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'><div style="margin-left:+160px;"><div style="font-family:'The Girl Next Door';font-size:18px;color:#4A2612">Fiche de présentation...</div></div>
<div style="-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;box-shadow:1px 1px 1px black; -moz-box-shadow:1px 1px 1px black; -webkit-box-shadow:1px 1px 1px black; text-align:justify; background-color:white; border-left:2px brown solid; border-right:2px brown solid; border-top:1px brown dashed; border-bottom:1px brown dashed; font-family:'Georgia'; width:400px;text-align:center;"><i>« Insérez une citation ici »</i></div>
<img src="http://www.blog-gagnant.com/wp-content/uploads/2012/05/prise-de-note.jpg" style="border-top:3px #52251C solid; border-bottom:3px #52251C solid; width:470px;" /><br /><br />
<link href='http://fonts.googleapis.com/css?family=Miniver' rel='stylesheet' type='text/css'><div style="font-family:'Miniver';text-shadow:1px 1px 1px white;font-size:18px;color:#4A2612; text-align:justify;"><div style="margin-left:100px;">en savoir plus...</div></div><div style="margin-top:-5px;"><div style="border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; background-color:#EFEFEE; padding:2px; border:1px brown dashed; width:350px; text-align:justify;"><font face="Georgia"><span style="font-size:12px;"><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:1px;">♪Prénom : </span>[Réponse].<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:1px;">♪Nom : </span>[Réponse].<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:1px;">♪Âge : </span>[Réponse].<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:1px;">♪Date et lieu de naissance : </span>[Réponse].<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:1px;">♪Date et lieu de naissance : </span>[Réponse].</span></font></div></div><link href='http://fonts.googleapis.com/css?family=Miniver' rel='stylesheet' type='text/css'><div style="font-family:'Miniver';text-shadow:1px 1px 1px white;font-size:18px;color:#4A2612"><div style="margin-top:px; margin-right:110px;text-align:right;margin-top:-5px;">...sur toi.</div></div><br /><br />

<link href='http://fonts.googleapis.com/css?family=Miniver' rel='stylesheet' type='text/css'><div style="font-family:'Miniver';text-shadow:1px 1px 1px white;font-size:18px;color:#4A2612; text-align:justify;"><div style="margin-left:100px;">raconte-moi...</div></div><div style="margin-top:-5px;"><div style="border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; background-color:#EFEFEE; padding:2px; border:1px brown dashed; width:350px; text-align:justify;font-family:'Georgia'; font-size:13px;">Ton histoire ici.</div></div><link href='http://fonts.googleapis.com/css?family=Miniver' rel='stylesheet' type='text/css'><div style="font-family:'Miniver';text-shadow:1px 1px 1px white;font-size:18px;color:#4A2612"><div style="margin-top:px; margin-right:110px;text-align:right;margin-top:-5px;">...ton histoire.</div></div><br /><br />

<link href='http://fonts.googleapis.com/css?family=Miniver' rel='stylesheet' type='text/css'><div style="font-family:'Miniver';text-shadow:1px 1px 1px white;font-size:18px;color:#4A2612; text-align:justify;"><div style="margin-left:100px;">pour que je puisse</div></div><div style="margin-top:-5px;"><div style="border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; background-color:#EFEFEE; padding:2px; border:1px brown dashed; width:350px; text-align:justify;font-family:'Georgia'; font-size:13px;">Ta description physique ici.</div></div><link href='http://fonts.googleapis.com/css?family=Miniver' rel='stylesheet' type='text/css'><div style="font-family:'Miniver';text-shadow:1px 1px 1px white;font-size:18px;color:#4A2612;"><div style="margin-top:px; text-align:right;margin-right:110px;margin-top:-5px;">...te reconnaître.</div></div><br /><br />

<link href='http://fonts.googleapis.com/css?family=Miniver' rel='stylesheet' type='text/css'><div style="font-family:'Miniver';text-shadow:1px 1px 1px white;font-size:18px;color:#4A2612; text-align:justify;"><div style="margin-left:100px;">pourquoi te caches-tu...</div></div><div style="margin-top:-5px;"><div style="border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; background-color:#EFEFEE; padding:2px; border:1px brown dashed; width:350px; text-align:justify;"><font face="Georgia"><span style="font-size:12px;"><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:1px;">♪Prénom : </span>[Réponse].<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:1px;">♪Âge : </span>[Réponse].<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:1px;">♪Avatar : </span>[Réponse].<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:1px;">♪Comment as-tu découvert le forum ? : </span>[Réponse].<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:1px;">♪Tes impressions ? : </span>[Réponse].<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:1px;">♪Avatar : </span>[Réponse].</span></font></div></div><link href='http://fonts.googleapis.com/css?family=Miniver' rel='stylesheet' type='text/css'><div style="font-family:'Miniver';text-shadow:1px 1px 1px white;font-size:18px;color:#4A2612"><div style="margin-top:px; margin-right:110px;text-align:right;margin-top:-5px;">...derrière cet écran ?</div></div><br /><br />

<span style="font-size:9px; font-family:'Georgia'; text-align:center;">(c) Code par Lou pour <a href="http://www.never-utopia.com/">Never-Utopia</a></span>
</div></center>

Oui, le code est un peu dégueux. Je le modifierai plus tard si jamais il cause la mort d'un codeur expérimenté. =p

Bonne soirée !

*prévisualise le message 652 fois*
*clique sur "Envoyer"*

Salut ^^

Pour l'ombre, ce n'est pas compliqué. Dans ton code, tu as utilisé "box-shadow:2px 2px 2px #A9A9A9;".
Si on le décompose, le premier "2px" représente le déplacement horizontal et veut dire "l'ombre se déplace de 2px vers la droite".
Le deuxième "2px" représente le déplacement vertical et veut dire "l'ombre se déplace de 2px  vers le bas".
Le troisième "2px" représente le brouillage (blur) veut dire "l'ombre se brouille de 2px".

Si tu veux que l'ombre soit tout autour du code, il te suffit de ne mettre aucun pixel pour les deux premières valeurs comme ceci:
"box-shadow: 0 0 2px #A9A9A9".
PS: Et si un jour tu veux que l'ombre soit en haut ou à gauche, il te suffit d'utiliser des valeurs négatives comme "-2px".

Cela donne un peu d'ombre autour du bloc .

Néanmoins, tu constateras rapidement que cela ne fait pas pareil que comme si ce n'était que sur deux côtés. Pourquoi? Parce que l'ombre n'est pas assez étendue. Du coup, il vaut mieux rajouter une "étendue" (spread) à ton ombre, soit un quatrième "#px":
"box-shadow: 0 0 2px 2px #A9A9A9"

Cela donne l'ombre correcte autour du bloc.

Maintenant que tu sais comment faire, je vais critiquer ta fiche de prez
Eh bien elle est bien jolie ~
Personnellement, je trouve que les couleurs s'harmonisent bien.
J'aime bien la police d'écriture pour le "en savoir plus" et tous les autres ^^
Par contre, je préfèrerais que le texte en bas des catégories (... sur toi./ ...ton histoire./ ...te reconnaître) embarquent dans le cadre, ça ferait plus joli selon moi.

En résumé, ta fiche est tout mimi tout plein *o* donc merci de nous la partager ^^

PS: Tu as deux "Date et lieu de naissance" dans le premier bloc et deux "Avatar" dans le dernier bloc.

Ah ! Merci pour les ombres ! Ca fait pas mal de temps que j'étudie des fiches et je n'avais toujours pas compris ^^. J'ai modifié.
Pour le texte en bas des catégories, je laisse comme ça. Mon but était justement qu'elles sortent des cadres pour laisser la place au texte, je pense que c'est quand même mieux. Cela dit, je ferai l'essai quand j'aurais le temps - bon, en fait j'ai le temps mais ma mère a décidé qu'à partir de maintenant, je ferai moins d'ordi (OMG, je suis ici illégalement t_t).

Merci pour ta critique =), ça donne envie d'en poster d'autres. *voit tout le monde se barrer en courant*

PS : C'est corrigé. Je savais que j'étais plus trop lucide passé 1 heure du matin, mais quand même oO.

Merci pour le partage!

Wow très original =)

Merci :)

C'est top, merci !

Très joli et élégant, merci pour le partage !

Merci pour cette jolie fiche de présentation