Parce que le design a le vent en poupe ces derniers temps (merci benj29 ), je poste ici ce que j’avais déjà posté mais qui s’est perdu dans le fil de 70 pages. Beaucoup de monde cherche un truc clé en main et facile à mettre en place.
Je fais une copie à peu de choses près du message que j’avais déjà posté.
J’ai joué un peu avec HTML et CSS et je vous propose un template de fenêtre qui je trouve est assez sympa, avec ses explications. C’est pas du grand code, certains rirons peut, être, mais ca fonctionne
Voilà ce que ca donne :
Un code HTML pour gérer les blocs et le texte, un .CSS pour gérer la mise en forme globale et un autre pour le petit ruban en haut à gauche de la fenêtre.
Le code HTML contient 4 blocs : (Sur un design, clic-droit "Insérer un texte/html", et vous copiez le code dedans.
- Un premier bloc titre avec l'icône, qui prend 20% de la hauteur totale.
- Un autre bloc pour le ruban avec couleur changeable.
- Un troisième bloc contour qui prend 80% de la hauteur totale.
- Un quatrième bloc fenêtre inclus dans le troisième contour avec un effet type "creusé" et de transparence, dont on peut changer la couleur.
Pour les fichier .css, vous les copiez ou vous voulez, tant que vous mettez le bon chemin au debut du code HTML.Pour le créer, depuis le plugin "outil de développement" ou bien en SSH.
Et tout cela se dimensionne automatiquement
Voici le HTML :
Code : Tout sélectionner
<link rel="stylesheet" href="montheme/monstyle.css" />
<link href="montheme/corner.css" rel="stylesheet" type="text/css">
<div class="ribbonB"><span>resume</span></div> <!-- ruban, on peut remplacer B(bleu) par R(rouge),V(vert),O(orange),G(gris) -->
<div class="titre"><h1>salon</h1><!-- Titre de la fenetere-->
<img src="montheme/images/canape.png" height=40px width=40px><!-- chemin de l'icône -->
</div>
<div class="contourB"><!-- fenêtre de contour, on peut remplacer B(bleu) par R(rouge),V(vert),O(orange),G(gris) -->
<div class="fenetreB"><!-- fenêtre intérieure, on peut remplacer B(bleu) par R(rouge),V(vert),O(orange),G(gris) -->
</div>
</div>
Code : Tout sélectionner
.titre{
display: table;
border:solid 1px black;
text-align: center;
border-radius:5px 5px 0px 0px;
color: white;
text-transform: uppercase;
z-index:-1;
height:20%;
width:100%;
background-color: #3E3E3C;
box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
}
.contour{
border-left:solid 1px black;
border-right:solid 1px black;
border-top:solid 2px #BEBEBE;
border-bottom:solid 1px black;
width:100% ;
height: 80%;
text-align: center;
color: white;
text-transform: uppercase;
display: flex;
background-color: #BEBEBE;
/*background-color: #448DFC;*/
border-radius:0px 0px 5px 5px;
opacity:0.9;
box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
}
.contourB{
border-left:solid 1px black;
border-right:solid 1px black;
border-top:solid 2px #2058AD;
border-bottom:solid 1px black;
width:100% ;
height: 80%;
text-align: center;
color: white;
text-transform: uppercase;
display: flex;
background-color: #2058AD;
/*background-color: #448DFC;*/
border-radius:0px 0px 5px 5px;
opacity:0.9;
box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
}
.contourR{
border-left:solid 1px black;
border-right:solid 1px black;
border-top:solid 2px #A50E0E;
border-bottom:solid 1px black;
width:100% ;
height: 80%;
text-align: center;
color: white;
text-transform: uppercase;
display: flex;
background-color: #A50E0E;
/*background-color: #448DFC;*/
border-radius:0px 0px 5px 5px;
opacity:0.9;
box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
}
.contourV{
border-left:solid 1px black;
border-right:solid 1px black;
border-top:solid 2px #155F15;
border-bottom:solid 1px black;
width:100% ;
height: 80%;
text-align: center;
color: white;
text-transform: uppercase;
display: flex;
background-color: #155F15;
/*background-color: #448DFC;*/
border-radius:0px 0px 5px 5px;
opacity:0.9;
box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
}
.contourO{
border-left:solid 1px black;
border-right:solid 1px black;
border-top:solid 2px #A36814;
border-bottom:solid 1px black;
width:100% ;
height: 80%;
text-align: center;
color: white;
text-transform: uppercase;
display: flex;
background-color: #A36814;
/*background-color: #448DFC;*/
border-radius:0px 0px 5px 5px;
opacity:0.9;
box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
}
.fenetre{
margin:auto;
margin-top: 20;
margin-right: 2;
margin-bottom: 2;
margin-left: 2;
width: 95%;
height: 95%;
border-radius: 2px;
background-color: #838383;
opacity:0.9;
box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
}
.fenetreR{
margin:auto;
margin-top: 20;
margin-right: 2;
margin-bottom: 2;
margin-left: 2;
width: 95%;
height: 95%;
border-radius: 2px;
background-color: #E75440;
opacity:0.9;
box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
}
.fenetreB{
margin:auto;
margin-top: 20;
margin-right: 2;
margin-bottom: 2;
margin-left: 2;
width: 95%;
height: 95%;
border-radius: 2px;
background-color: #448DFC;
opacity:0.8;
box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
}
.fenetreV{
margin:auto;
margin-top: 20;
margin-right: 2;
margin-bottom: 2;
margin-left: 2;
width: 95%;
height: 95%;
border-radius: 2px;
background-color: #5AA664;
opacity:0.9;
box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
}
.fenetreO{
margin:auto;
margin-top: 20;
margin-right: 2;
margin-bottom: 2;
margin-left: 2;
width: 95%;
height: 95%;
border-radius: 2px;
background-color: #E29F3D;
opacity:0.9;
box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
}
h1{
display: table-cell;
vertical-align: middle;
text-align:center;
text-indent: 50px;
font-size: 200%;
font-family: Georgia,Chalkduster,"Brush Script MT",Georgia, Serif;
text-shadow: 5px 5px 10px #000000;
}
Code : Tout sélectionner
<style>
.boxT {
width: 190px; height: 661px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
background-color: rgba(0,0,0,0.6);
}
.ribbonB {
position: absolute;
left: -5px; top: -5px;
z-index: 2;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbonB span {
font-size: 12px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#2989d8 0%, #1e5799 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbonB span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #1e5799;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #1e5799;
}
.ribbonB span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #1e5799;
border-bottom: 3px solid transparent;
border-top: 3px solid #1e5799;
}
</style>
<style>
.boxTT {
width: 190px; height: 661px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
background-color: rgba(0,0,0,0.6);
}
.ribbonR {
position: absolute;
left: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbonR span {
font-size: 12px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#D61919 0%, #931515 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbonR span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #931515;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #931515;
}
.ribbonR span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #931515;
border-bottom: 3px solid transparent;
border-top: 3px solid #931515;
}
</style>
<style>
.boxTT {
width: 190px; height: 661px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
background-color: rgba(0,0,0,0.6);
}
.ribbonV {
position: absolute;
left: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbonV span {
font-size: 12px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#0F8C46 0%, #064D25 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbonV span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #064D25;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #064D25;
}
.ribbonV span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #064D25;
border-bottom: 3px solid transparent;
border-top: 3px solid #064D25;
}
</style>
<style>
.boxTT {
width: 190px; height: 661px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
background-color: rgba(0,0,0,0.6);
}
.ribbonO {
position: absolute;
left: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbonO span {
font-size: 12px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#CF8C0E 0%, #6F4B08 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbonO span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #6F4B08;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #6F4B08;
}
.ribbonO span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #6F4B08;
border-bottom: 3px solid transparent;
border-top: 3px solid #6F4B08;
}
</style>
<style>
.boxTT {
width: 190px; height: 661px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
background-color: rgba(0,0,0,0.6);
}
.ribbonG {
position: absolute;
left: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbonG span {
font-size: 12px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#B5B5B5 0%, #6F6F6F 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbonG span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #6F6F6F;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #6F6F6F;
}
.ribbonG span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #6F6F6F;
border-bottom: 3px solid transparent;
border-top: 3px solid #6F6F6F;
}
</style>
Il vous suffit de remplacer les icônes par les vôtres, les couleurs dans le code HTML
Merci a ceux de qui je me suis inspiré, ils se reconnaitront
Dans une autres style en jouant un peu avec le CSS, vous pouvez faire ca. :
Le code du .CSS de la fenêtre :
Code : Tout sélectionner
.haut{
display: table;
border-left:solid 1px black;
border-right:solid 1px black;
border-top:solid 1px black;
border-bottom:solid 0px black;
text-align: right;
border-radius:5px 5px 0px 0px;
color: white;
text-transform: uppercase;
z-index:-1;
height:20%;
width:100%;
background-color: #3E3E3C;
opacity:1;
/* box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);*/
}
.milieu{
border-left:solid 1px black;
border-right:solid 1px black;
border-top:solid 2px #BEBEBE;
border-bottom:solid 1px black;
width:100% ;
height: 80%;
text-align: center;
color: white;
text-transform: uppercase;
display: flex;
background-color: #BEBEBE;
/*background-color: #BEBEBE;*/
border-radius:0px 0px 5px 5px;
opacity:0.9;
/* box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);*/
}
.milieuN{
border-left:solid 1px black;
border-right:solid 1px black;
border-top:solid 2px #BEBEBE;
border-bottom:solid 1px black;
width:100% ;
height: 80%;
text-align: center;
color: white;
text-transform: uppercase;
display: flex;
background-color: #505050;
/*background-color: #BEBEBE;*/
border-radius:0px 0px 5px 5px;
opacity:0.9;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
}
.milieuB{
border-left:solid 1px black;
border-right:solid 1px black;
border-top:solid 2px #2058AD;
border-bottom:solid 1px black;
width:100% ;
height: 80%;
text-align: center;
color: white;
text-transform: uppercase;
display: flex;
background-color: #505050;
/*background-color: #2058AD;3E3E3C,BEBEBE*/
border-radius:0px 0px 5px 5px;
opacity:1;
/*box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);*/
}
.milieuR{
border-left:solid 1px black;
border-right:solid 1px black;
border-top:solid 2px #A50E0E;
border-bottom:solid 1px black;
width:100% ;
height: 80%;
text-align: center;
color: white;
text-transform: uppercase;
display: flex;
background-color: #505050;
/*background-color: #808080;*/
border-radius:0px 0px 5px 5px;
opacity:1;
/*box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);*/
}
.milieuV{
border-left:solid 1px black;
border-right:solid 1px black;
border-top:solid 2px #155F15;
border-bottom:solid 1px black;
width:100% ;
height: 80%;
text-align: center;
color: white;
text-transform: uppercase;
display: flex;
background-color: #505050;
/*background-color: #155F15;*/
border-radius:0px 0px 5px 5px;
opacity:1;
/* box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);*/
}
.milieuO{
border-left:solid 1px black;
border-right:solid 1px black;
border-top:solid 2px #A36814;
border-bottom:solid 1px black;
width:100% ;
height: 80%;
text-align: center;
color: white;
text-transform: uppercase;
display: flex;
background-color: #505050;
/*background-color: #A36814;*/
border-radius:0px 0px 5px 5px;
opacity:1;
/* box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);*/
}
.fenetre{
margin:auto;
margin-top: 20;
margin-right: 2;
margin-bottom: 2;
margin-left: 2;
width: 95%;
height: 95%;
border-radius: 2px;
background-color: #838383;
/*background-color:#FEFEFE;*/
opacity:0.6;
box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,1px 1px 1px #fff;
}
.fenetreR{
margin:auto;
margin-top: 20;
margin-right: 2;
margin-bottom: 2;
margin-left: 2;
width: 95%;
height: 95%;
border-radius: 2px;
background-color: #E75440;
opacity:0.9;
/*box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;*/
}
.fenetreB{
margin:auto;
margin-top: 20;
margin-right: 2;
margin-bottom: 2;
margin-left: 2;
width: 95%;
height: 95%;
border-radius: 2px;
background-color: #448DFC;
opacity:0.8;
box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
}
.fenetreV{
margin:auto;
margin-top: 20;
margin-right: 2;
margin-bottom: 2;
margin-left: 2;
width: 95%;
height: 95%;
border-radius: 2px;
background-color: #3E3E3C;
opacity:0.9;
box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
}
.fenetreO{
margin:auto;
margin-top: 20;
margin-right: 2;
margin-bottom: 2;
margin-left: 2;
width: 95%;
height: 95%;
border-radius: 2px;
background-color: #A36814;
opacity:0.9;
box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
}
.fenetreN{
margin:auto;
margin-top: 20;
margin-right: 2;
margin-bottom: 2;
margin-left: 2;
width: 95%;
height: 95%;
border-radius: 2px;
background-color: #3E3E3C;
opacity:0.9;
box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
}
h1{
display: table-cell;
vertical-align: middle;
text-align:center;
text-indent: 50px;
font-size: 150%;
/* text-shadow: 5px 5px 10px #000000;*/
/*font-family:Breathe,Arial,Breathe,"Segoe Script","Viner Hand ITC","Monotype Corsiva","Brush Script MT",Georgia,Serif;*/
font-family:MontSerrat-Bold,Georgia,Serif;
}
Merci à vous!