Tutoriaux
Les boîtes de message CSS pour vos sites web 2.0
Les boîtes de message sont des éléments des plus utiles de nos jours dans toute application web. Vous en voyez certainement plusieurs centaines chaque semaine à travers Internet si vous naviguez un peu. Alors pour tous ceux qui désirent intégrer des boîtes de message stylisé avec CSS voici le tutoriel qu'il vous faut.
Boîte de message standard
Souvent le design le plus simple reste le plus beau donc nous allons voir en premier la forme la plus conventionnelle qui soit : une boite de message comportant une bordure de 1px et d'une couleur de fond plus pâle que la bordure.
Du côté du HTML, rien de bien compliqué l'utilisation d'un simple <div> est requise.
<div class="standard-gris">Boîte de message standard</div>
Pour ce qui est du CSS encore là rien de bien compliqué! Un débutant en CSS comprendra cette source avec facilité.
.standard-gris{
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;
}
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;
}
Je suggère dans le cas présent d'utiliser des couleurs pastels pour le fond et une couleur plus foncée pour le texte.
Boîte de message standard avec icône
Un peu plus joli et utile dans le cas où vous désirez donner certaines fonctionnalités à vos boîtes de message tel que de message d'erreur, d'autorisation ou autre.
Pour ce qui est du HTML, celui-ci est le même que celui de la boîte précédente.
<div class="icon-attention">Boîte de message standard avec icône</div>
Seul le CSS change un petit peu avec l'ajout d'une image.
.icon-attention{
border:solid 1px #DEDEDE;
background:#FFFFCC url('/img/icon-attention.png') 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;
}
border:solid 1px #DEDEDE;
background:#FFFFCC url('/img/icon-attention.png') 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;
}
Boîte de message pleine
Encore plus simple que celle présentée un peu plus haut, cette boîte de message ne contient aucune bordure ni icône. Il suffit donc de lui attribuer un fond de couleur foncé ainsi qu'une couleur de texte contrastante.
le code HTML est donc comme toutes les autres :
<div class="plein-vert">Boîte de message pleine</div>
le CSS est une fois de plus assez simple :
.plein-vert{
background:#008000;
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;
}
background:#008000;
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;
}
Boîte de message pleine avec coin arrondi
Voici une autre option possible afin de donner un autre look à vos boîtes de message. Les coins arrondis sont à la mode avec le Web 2.0 qui se démocratise à travers la toile. Alors, pourquoi pas en ajouter nous aussi. Cette boîte a aussi comme avantage de s'ajuster en hauteur et en largeur en fonction de son contenu.
Du côté du HTML, une seule différence, l'imbrication d'un <div> dans le <div> principale.
<div class="arrondi-gris">
<div>Boîte de message pleine avec coin arrondi</div>
</div>
<div>Boîte de message pleine avec coin arrondi</div>
</div>
pour le CSS voici le tout :
.arrondi-gris{
background:#444444 url('/img/coin-gris-gauche.png') left top no-repeat;
color:#FFFFFF;
text-align:center;
}
.arrondi-gris{
background:url('/img/coin-gris-droit.png') right bottom no-repeat;
padding:4px;
}
background:#444444 url('/img/coin-gris-gauche.png') left top no-repeat;
color:#FFFFFF;
text-align:center;
}
.arrondi-gris{
background:url('/img/coin-gris-droit.png') right bottom no-repeat;
padding:4px;
}
Et voilà cela fait un petit tour de ce que vous pouvez accomplir facilement et sans trop de temps. Il suffit donc d'adapter vos sources à mes solutions.
Ajouter cette page à votre réseau social favoris
Rétrolien(0)
Adresse URI pour un rétrolien sur cet articleCommentaires (0)
Flux RSS pour les commentairesEcrivez un commentaire
Navigation
Publicités
Nos services
Programmation Web
Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.
La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.
Suite ...
Programmation Desktop
Quel que soit votre projet, nous pouvons le réaliser pour vous !
Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.
Suite ...
Autres ...
Quel que soit vos projets ou vos idées, contactez nous!
Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.
Suite ...