Créer un titre de message esthétique en css

[Lunathiel]

Bonsoir tout le monde...

J'ai besoin d'un peu d'imagination et d'un code^^

Voila à quoi ressemble les messages "important" de mon forum rp



comme les descriptions des lieux, des pnj, les règles etc...

J'aimerais que les titres ( ici " Les règles du forum de Thoawin ) soit plus jolis esthétiquement, qu'ils soit beaux à regarder... Hors en Css je ne sais pas ce qu'il est possible de créer. Tout vous allez me dire... mais tout quoi... Auriez vous des idées à me montrer et des codes à personnaliser?

Un grand merci

[Arlem]

Salut à toi,

Voici une liste (exhaustive je pense...) des propriétés CSS pour le texte(le premier tableau) :
http://www.siteduzero.com/tutoriel-3-13639-liste-des-proprietes-css.html#ss_part_1

À toi d'utiliser celles que tu souhaites pour avoir le rendu que tu souhaites !

[ge80]

Bonjour

Une autre solution est de proposer votre codage (sur ce forum) est nous dire ce que vous voulez améliorer (concrètement) et progressivement avec l'aide vous aurez ce que vous désirez.

Car dialoguer à partir d'une image n'est pas facile

Cordialement
ge

[Lunathiel]

Le problème c'est que je ne sais pas ce que je peux demander, ne sachant pas tout ce que l'on puisse créé via le css...

Vous n'auriez pas des exemples d'image à me montrer?

[Lixyr]

Techniquement on peut tout faire. Mais tu peux aussi naviguer sur internet et chercher des exemples que tu trouverais "beaux à regarder" dans d'autres sites.

[Lixyr]

Alors ? Des exemples ?

[Lunathiel]

J'ai peut-être une idée, j'aimerais faire en sorte qu'il y ai une petit image à droite et à gauche du titre.

Comment en css peut-on modifié le "texte" police, écriture, ombre etc?
Qu'est-il possible de faire?

[Lixyr]

J'ai peut-être une idée, j'aimerais faire en sorte qu'il y ai une petit image à droite et à gauche du titre.

Comment en css peut-on modifié le "texte" police, écriture, ombre etc?
Qu'est-il possible de faire?

Ben les quatre sont possible.

Les images, suffit de mettre du flotte si c'est juste pour un titre. :

Dans le css:

Code:


.flotte {
float:left;
}
.flotte2 {
float:right;
}

et dans le html :

Code:


<p class="flotte">
 <img src="TON IMAGE" />
</p>
<p style="line-height:65px;">
TON TITRE
</p>   
<p class="flotte2">
 <img src="TON IMAGE" />
</p>

<p style="line-height:65px;">

le chiffre doit correspondre à la hauteur de ton image, c'est pour que le texte/titre prenne cette place, et donc que l'image ne se retrouve pas au dessus mais à côté.

________________

Pour la police, l'ombre etc, ben là pas besoin de css :

Dans le html :

Code:


<p class="flotte">
 <img src="TON IMAGE" />
</p>
<p style="line-height:65px; font-size: 18px; text-shadow: 2px 2px 2px darkred; color:blue;">
TON TITRE
</p>   
<p class="flotte2">
 <img src="TON IMAGE" />
</p>

<p style="line-height:65px; font-size: 18px; text-shadow: 2px 2px 2px darkred; color:blue;">

• font size indique la taille de la police,

• text shadow, c'est l'ombre : les deux premiers chiffres indiquent le décallage à droite et en bas par rapport au mot de base, et le dernier chiffre l'intensité du floutage. Si tu mets un ça va faire comme un deuxième mot plus bas, et plus le chiffre est élevé, plus l'ombre est floue,

• et color c'est la couleur. Y a encore plein d'autres trucs que tu peux mettres.

[Lunathiel]

Merci... en testant j'ai remarqué que l'image de gauche s'affichait correctement mais pas celle de droite =>



Et comment faire en sorte que ce texte soir centré sur la page (pour en faire un titre^^)

Merci beaucoup

[Lixyr]

Ca c'est parce que je me suis trompée dans le code, je vais regarder ça.

-----------------

Je pense qu'en ajoutant un <div style="text-align:center;"> ça devrait aller au centre :

<div style="text-align:center;">
<p class="flotte">
<img src="TON IMAGE" />
</p>
<p style="line-height:65px; font-size: 18px; text-shadow: 2px 2px 2px darkred; color:blue;">
TON TITRE
</p>
<p class="flotte2">
<img src="TON IMAGE" />
</p>
</div>

Mais attendez que je bidouille le code avant. $$

[Lunathiel]

Est-ce également possible de mettre une image de fond sur un texte?

Voila ce que j'aimerais réaliser (mais le code ci-dessus m'est encore utile avec les deux images à gauche et à droite)



Donc
- mon texte en comic sans ms Gras #abbdeb de taille 30
- L'ombre noire sur ce texte
- Un petit rectangle en dégradé sous le texte (il faut que je crée ce rectangle en image où est-il possible de l'ajouter en code et ainsi que selon la taille du texte il ai la même apparence?
il serait en dégradé bilinéaire de #abbdeb à #095588 )
- Une petite image a gauche => https://i.servimg.com/u/f69/14/59/60/98/image_13.png
- le tout centré sur la page

C'est possible?

[Lunathiel]

Toujours bien d'actualité!!!!

[Lixyr]

Okay alors ... si j'ai bien compris ça donne un truc comme ça :

Code:

  <div style="text-align:center; width:40%;">
    <span class="flotte"><img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" />
    </span>
    <span style="font-size: 30px; line-height: bold; text-shadow:4px 4px 2px black; color:#abbdeb;"><font face="Comic Sans Ms"> 
  Mon titre original
</font>    </span>
    <span class="flotte2">
    <img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" />
    </span>
    </div>

Là je t'ai mis une image à droite et une à gauche, mais si tu n'en veux qu'une à gauche il suffit de retirer ce passage :

<span class="flotte2">
<img src="https://i.servimg.com/u/f69/14/59/60/98/image_13.png" />
</span>

Pour que le texte et les images ne prennent pas trop de place j'ai mis un

<div style="text-align:center; width:40%;">

Tu pourras changer la valeur en fonction de ce que tu souhaites.

et donc tout ceci ça va toujours avec le même code css :

Code:


.flotte {
float:left;
}
.flotte2 {
float:right;
}

Pour le cadre en dégradé sous l'image, je ne connais pas de code possible donc je te conseil effectivement de faire ça sous une image transparente. ^^

Voilà. Si question il y a, pour le code donné, ou autre, n'hésite pas.

[Lunathiel]

Un grand merci a toi
j'ai tester le code sur mon forum malheureusement tu peux voir qu'il y a un petit soucis^^
Les images s'affichent au dessus et en dessous du texte et pas en file avec celui-ci et le tout n'est pas centré sur la page =/



Tu pourrais m'en dire un petit peu plus? Un grand merci

[no_way]

Bonsoir tout contenu flottant doit être déclaré en priorité au sein d'un même conteneur:

Code:


<center><div style="text-align:center; width:40%;"><img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte"/><img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte2"/><span style="font-size: 30px; font-weight: bold; text-shadow:4px 4px 2px black; color:#abbdeb;"><font face="Comic Sans Ms">Mon titre original</font></span></div></center>


Un exemple: ici

[ge80]

Bonjour

Ne préférez-vous pas une solution plus souple utilisant le tableau?
La CSS du tableau est facile à faire si-besoin.

Solution sans CSS

Code:

<table border="0" style="background-image:url(http://2img.net/i/fa/admin/header.png);  text-align:center; width:50%; height: 100px;">
<tr>
<td valign="center" align="left" style="width:10%;"> <img src="http://r22.imgfast.net/users/2212/78/75/05/smiles/404421.gif"/></td><td valign="center"><span style="font-size: 60px; font-weight: bold; text-shadow:20px 20px 8px black; color:#abbdeb;"><font face="Comic Sans Ms"><br/>Mon titre original<br/><br/><br/></font></span></td><td valign="center" align="right" style="width:10%;"> <img src="http://r22.imgfast.net/users/2212/78/75/05/smiles/487470.gif"/></td>
</tr>
</table>

[Lunathiel]

Voila ce que j'obtiens avec le code de no_way, c'est presque ça sauf que le titre se place en deux parties une au dessus et une en dessous plutôt que le tout sur 1 ligne



et étrangement le second code aussi

[ge80]

Bonjour

Avec l'image de mon code, il suffit d'augmenter la largeur de la zone ou encore de réduire la taille de la police de caractère

Code:

<table border="0" style="background-image:url(http://2img.net/i/fa/admin/header.png);  text-align:center; width:70%; height: 100px;"><tr><td valign="center" align="left" style="width:10%;"> <img src="http://r22.imgfast.net/users/2212/78/75/05/smiles/404421.gif"/></td><td valign="center"><span style="font-size: 60px; font-weight: bold; text-shadow:20px 20px 8px black; color:#abbdeb;"><font face="Comic Sans Ms"><br/>Mon titre original<br/><br/><br/></font></span></td><td valign="center" align="right" style="width:10%;"> <img src="http://r22.imgfast.net/users/2212/78/75/05/smiles/487470.gif"/></td></tr></table>

ou

Code:

<table border="0" style="background-image:url(http://2img.net/i/fa/admin/header.png);  text-align:center; width:70%; height: 100px;"><tr><td valign="center" align="left" style="width:10%;"> <img src="http://r22.imgfast.net/users/2212/78/75/05/smiles/404421.gif"/></td><td valign="center"><span style="font-size: 40px; font-weight: bold; text-shadow:20px 20px 8px black; color:#abbdeb;"><font face="Comic Sans Ms"><br/>Mon titre original<br/><br/><br/></font></span></td><td valign="center" align="right" style="width:10%;"> <img src="http://r22.imgfast.net/users/2212/78/75/05/smiles/487470.gif"/></td></tr></table>

[no_way]

Pour le mien:

Code:


<center><div style="text-align:center; width:60%;"><img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte"/><img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte2"/><span style="font-size: 30px; font-weight: bold; text-shadow:4px 4px 2px black; color:#abbdeb;"><font face="Comic Sans Ms">Mon titre original</font></span></div></center>


Il suffit de modifier la valeur de width dans:

Code:

<div style="text-align:center; width:60%;">

Plus cette valeur est élevée, plus le texte a de la place pour s'étendre.
Le texte ne sera pas aligné verticalement par rapport aux images, pour centrer verticalement:

Code:

<center><div style="text-align:center; width:60%;line-height:44px;"><img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte"/><img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte2"/><span style="font-size: 30px; font-weight: bold; text-shadow:4px 4px 2px black; color:#abbdeb;"><font face="Comic Sans Ms">Mon titre original</font></span></div></center>

[Lunathiel]

Superbe^^

Et sur ce code est-il possible de mettre mon petit rectangle?

[no_way]

si tu parles d'une bordure oui:

Code:


<center><div style="text-align:center; width:60%;line-height:44px;border:1px black solid;"><img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte"/><img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte2"/><span style="font-size: 30px; font-weight: bold; text-shadow:4px 4px 2px black; color:#abbdeb;"><font face="Comic Sans Ms">Mon titre original</font></span></div></center>


Maintenant perso, je te conseillerai de rationaliser tout ça:
dans ta feuille CSS, ajouter:

Code:


.titre{text-align:center; width:60%;color:#abbdeb;font-family:"Comic Sans Ms";border:1px black solid;}
.titre:first-line{font-size: 30px;line-height:44px; text-shadow:4px 4px 2px black;}


Ainsi il te suffira d'écrire pour tes titres:

Code:


<center><div class="titre">
    <img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte"/>
    <img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte2"/>
    <span>Mon titre original</span>
</div></center>


[Lunathiel]

Non je ne parlais pas d'un cadre mais plus d'un "fond"

Avec le css ça ne marche pas =/ le texte est tout simple sans couleur de taille normale en noir et sans ombre ???

[Lunathiel]

Un petit up please

[Lixyr]

Je suis perdue. Qu'est-ce que tu veux au juste Luna, et qu'es-tu jusqu'à présent comme code ? @_@

[Lunathiel]

Je rappelle mon message au dessus^^ :

Est-ce également possible de mettre une image de fond sur un texte?

Voila ce que j'aimerais réaliser



Donc
- mon texte en comic sans ms Gras #abbdeb de taille 30
- L'ombre noire sur ce texte
- Un petit rectangle en dégradé sous le texte (il faut que je crée ce rectangle en image où est-il possible de l'ajouter en code et ainsi que selon la taille du texte il ai la même apparence?
il serait en dégradé bilinéaire de #abbdeb à #095588 )
- Une petite image a gauche => https://i.servimg.com/u/f69/14/59/60/98/image_13.png
- le tout centré sur la page

C'est possible?

J'ai tout (l'image, l'ombre le texte) sauf le rectangle de mon image



Voici le code que j'ai en ce moment:

Code:

<center><div style="text-align:center; width:60%;line-height:44px;"><img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte"/><img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte2"/><span style="font-size: 30px;  text-shadow:4px 4px 2px black; color:#abbdeb;"><font face="Comic Sans Ms">Le forum de Thoawin</font></span></div></center>

Et la partie css:

Code:

.flotte {
float:left;
}
.flotte2 {
float:right;
}


[Lixyr]

Ben le rectangle je ne connais pas de code qui permettent le dégradé alors je te suggère de le faire en image et de le mettre ensuite en image de fond.

[Lunathiel]

Comment dois je faire pour mettre une image de fond a ce code?

[no_way]

comme ceci:

Code:


<center><div style="text-align:center; width:60%;line-height:44px;background:url(Ton Image de fond)"><img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte"/><img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte2"/><span style="font-size: 30px;  text-shadow:4px 4px 2px black; color:#abbdeb;"><font face="Comic Sans Ms">Le forum de Thoawin</font></span></div></center>


[Lunathiel]

Avec ce système il s'agit d'un fond qui se répète... J'aimerais juste la barre dans le fond comme sur mon image

=> https://i.servimg.com/u/f39/14/59/60/98/barre_10.png

[no_way]

Alors comme ceci:

Code:


<center><div style="text-align:center; width:60%;line-height:44px;background:url(http://i39.servimg.com/u/f39/14/59/60/98/barre_10.png) 50% 50% repeat-y"><img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte"/><img src="http://i69.servimg.com/u/f69/14/59/60/98/image_13.png" class="flotte2"/><span style="font-size: 30px;  text-shadow:4px 4px 2px black; color:#abbdeb;"><font face="Comic Sans Ms">Le forum de Thoawin</font></span></div></center>