-
Texte sur un fond
qu'est-ce que c'est ?
Pour faire simple, là je suis en train d'écrire sur un fond coloré.
comment faire ?
Pour commencer vous créez un article, vous écrivez votre texte et vous cliquez sur le bouton HTML de l'interface.
Là vous voyez un <p> au début et un </p> à la fin de votre texte. remplacez le premier <p> par ce code là<p style="background-color: #couleur du fond qui apparaît blanc dans l'exemple;
text-align: center; width: taille de la largeur du fond coloré en px; padding: 5px;">Fermez, enregistrez. Et normalement vous devriez avoir le resultat de l'exemple.
Si vous souhaitez que votre texte soit aligné à droite vous remplacez center par right et si vous
le voulez à gauche par left.
La couleur du fond peut également être remplacée par une image, pour cela il faut remplacerbackground-color: #couleur du fond qui apparaît blanc dans l'exemple;par ça
background-image: url(urldevotreimage)un peu plus d'approfondissement
Pour arrondir les bords du fond
<p style="background-color: #ffffff; padding: 5px; text-align: left; border-radius: 30px 30px 30px
30px;">Pour faire simple, là je suis en train d'écrire sur un fond coloré.</p>30px : Bord supérieur gauche
30px : Bord supérieur droit
30px : Bord inférieur droit
30px : Bord inférieur gauche
Ce tutoriel n'est pas très explicatif comparé aux autres donc je comprendrai si quelque chose n'est pas très clair, il suffit juste de le demander par commentaire.
Tags : text, color, fond, center, exemple
-
Commentaires
Dans ton article, tu change le fond dans un article mais est-il possible de le faire dans les liens des menus?
Alors, je vais parler pour Iconmunity étant donné que je suis la mieux placée pour savoir comment le menu est constitué (haha). Le meilleur moyen pour ce genre de menu est effectivement de créer une (même des, dans mon cas) classe, puisque l'on va la réutiliser sans cesse. Inutile donc d'alourdir l'HTML !
CSS :
.liste {
width: 200px; /*Largeur du menu*/
border-left: 2px solid orange; /*Bord de 2px sur la gauche*/
padding-left: 2px; /*Marge intérieure de 2px à gauche*/
border-bottom: 1px solid #b1c4fc; /*Bord de 1px en bas*/
background-color: #c2d0fb; /*Couleur du fond*/
text-transform: lowercase; /*À remplacer par 'uppercase' pour l'inverse, sinon, retirer*/
letter-spacing: -0.5px;
font-family: Georgia;
font-size: 12px;
transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
}
.liste a { color: #507cfd; /*Couleur du texte*/ }
.liste a:hover { color: orange; /*Couleur du texte au survol*/ }
.liste:hover {
background-color: transparent; /*Couleur du fond au survol*/
border-left: 10px solid orange; /*Bord de 5px sur la gauche au survol*/
}
HTML :
<div class="liste" style="margin-top: 4px;"><a href="/bleach-c17268128">Bleach</a></div>
<div class="liste"><a href="/blue-exorcist-c17268134">Blue Exorcist</a></div>
<div class="liste"><a href="/code-geass-c17272842">Code Geass</a></div>
<div class="liste"><a href="/durarara-c17272844">Durarara!!</a></div>
<div class="liste"><a href="/hunter-x-hunter-c17272880">Hunter X Hunter</a></div>
<div class="liste"><a href="/kaichou-wa-maid-sama-c17272846">Kaichou wa Maid-sama!</a></div>
<div class="liste"><a href="/kissxsis-c17272850">KissXSis</a></div>
<div class="liste"><a href="/kuroshitsuji-c17272854">Kuroshitsuji</a></div>
<div class="liste"><a href="/naruto-shippuden-c17272860">Naruto Shippuden</a></div>
<div class="liste"><a href="/noragami-c17272862">Noragami</a></div>
<div class="liste"><a href="http://iconmunity.lo.gs/one-piece-c17295920">One Piece</a></div>
<div class="liste"><a href="/panty-stocking-with-garterbelt-c17272864">Panty & Stocking with Garterbelt</a></div>
<div class="liste"><a href="/toradora-c17272866">Toradora</a></div>
<div class="liste"><a href="/touhou-c17272870">Touhou</a></div>
<div class="liste"><a href="/uta-pri-c17272878">UtaPri</a></div>
Quant au menu de Nagalia, le principe est le même, mais contrairement à mes éléments, les siens peuvent s'aligner. Je modifierais donc le CSS de cette façon-là (après, libre à toi de modifier les couleurs et tout et tout bien sûr !) :
CSS :
.liste {
width: 400px; /*Largeur totale du menu*/
}
.liste a {
background-color: #bbbbbb; /*Couleur du fond*/
color: #ffffff; /*Couleur du texte*/
display: block;
text-align: center;
font-size: 11px;
box-shadow: 0 0 2px #aaaaaa; /*Ombre sous les éléments*/
float: left;
margin: 0 0 5px 10px;
padding: 0 0 0 0; /*Marges intérieures : haut, droite, bas, gauche*/
width: 40%; /*Largeur que doit réprésenter un élément du menu sur la largeur totale*/
transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
}
.liste a:hover {
background-color: #aaaaaa; /*Couleur du fond au survol*/
color: #000000; /*Couleur du texte au survol*/
}Coucou, j'aimerais bien savoir comment tu changes la couleur au survol, je sais que c'est avec du CSS mais doit-on créer une classe ou autre ? Je pense a un menu dans le style d'Iconmunity, ou encore le monde imaginaire de Nagalia :)
Les codes partagés sur portfolio.ek.la ne sont pas uniquement destinés à être utilisés sur Eklablog, il n'est donc pas si dépourvu 'd'intérêt' que ça quand on y réfléchit !
Je pense que ce code a devenu sans intérêt grâce aux nouveaux changements sur EB...maintenant on peut changer la couleur du fond sans avoir besoin d'un code CCS. :')
Le principe est semblable mais le code est différent car j'ai eu recours au CSS pour modeliser le menu d'Iconmmunity. Si tu souhaites le code du menu, envoie moi un MP je te l'enverrais sans problème. ^^
Bonsoir, Mikuru ^^ dis-moi, est-ce bien avec ce code-là que tu as pu faire les liens du menu IconCommunauty ? Avec la couleur changeante survolés et le léger trait entre chaque lien... à moins que ce soit écrit dans une image (j'ai vu un code comme ça, il me semble) ?
J'ai commencé à utiliser ces codes ^^ ça devrait vraiment m'aider à faire quelque chose d'original ! Merci encore et bon week-end !
J'ai juste une question, est ce que tu pourrais rajouté dans ton tutoriel comment on fait pour arrondir les bords du fond , s'il te plait :)
Il faut sauter une ligne en appuyant sur entrée je pense. :O
Et si ça ne marche pas, tu ouvres ton HTML et tu met un <br /> à la fin, ça devrait sauter une ligne et stoper la repetition du fond.Merci il m'aide pour mon blog en cour ^-^
Mais j'ai une question: Comment on fait pour arrêter car quand j'écris ça me remais à la ligne et le fond réaparaît alor que Je ne le veux que quand j'en ai envie :/
Sinon ton blog est EXTRA! =333
1HodySamedi 3 Septembre 2011 à 20:49Vous devez être connecté pour commenter
Merci beaucoup ! ^^ Je te le prends