Salut tout le monde,
Bon j'apporte ma petite contribution a ce "petit" thread sur le CSS.
Voila un journal sur le quel j'ai bosser avec $ikue.
Intitulé : We loves you deviantART
Il se decline en 5 couleurs dispo dans ma gallerie
Voila le live preview est disponible ICI si besoin est :
Maitenant passons au chose serieuses
le code :
Celui ci est celui avec l'identité visuelle de la V7.
- Code:
-
La partie CSS PURE : (body)
ul {
list-style-image:url(http://fc08.deviantart.net/fs71/o/2010/079/3/9/157881326_116907_pastille.png);
}
i.gr1 {
background:#405147!important;
}
i.gr2 {
border-left:#405147 solid 2px!important;
border-right:#405147 solid 2px!important;
}
i.gr2 i {
background:#405147!important;
}
i.gr3 {
border-left:#405147 solid 1px!important;
border-right:#405147 solid 1px!important;
}
i.gr3 i {
background:#405147!important;
border-left:#405147 solid 2px!important;
border-right:#405147 solid 2px!important;
}
i.gr1.gb.gb1 {
background:#a6b2a6!important;
}
i.gr2.gb {
border-left:#a6b2a6 solid 2px!important;
border-right:#a6b2a6 solid 2px!important;
}
i.gr3.gb {
border-left:#a6b2a6 solid 1px!important;
border-right:#a6b2a6 solid 1px!important;
}
.gr-top {
text-align:center;
border-left:#405147 solid 1px!important;
border-right:#405147 solid 1px!important;
border-bottom:#405147 solid 1px!important;
color:#fff!important;
text-shadow:#607465 0px 1px 0px!important;
}
.gr-top h2 img{
display:none;
}
.gr-top a {
color:#fff;
}
.gr-top a:hover {
color:#405147;
text-shadow:#607465 0px 1px 0px!important;
}
.gr-top .gr {
background:#405147 url(http://fc06.deviantart.net/fs70/o/2010/079/b/c/157881326_116908_tiles.jpg) repeat-x bottom right;
border-left:#405147 solid 1px!important;
border-right:#405147 solid 1px!important;
color:#fff;
}
.gr-top i.tri {
background:url(http://fc05.deviantart.net/fs71/o/2010/079/e/9/157881326_116909_coin.png) no-repeat!important;
}
.gr-top h2 {
font-size:25px;
color:#fff;
font-weight:bold;
}
.gr-body {
background: #dae4d9 url(http://fc09.deviantart.net/fs70/o/2010/079/5/4/157881326_116910_daluvu.png) no-repeat bottom right; }
strong {
font-size:18px;
color:#405147;
font-weight:bold;
letter-spacing:-1px;
margin-bottom:2px;
margin-top:7px;
line-height:20px;
text-shadow:#a0c1a9 0px 1px 0px!important;
}
.text { color:#555555; padding-bottom: 42px;}
a {
color:#212a25;
text-decoration:none;
}
a:hover {
color:#446008;
text-decoration:none;
}
strong a {
text-decoration:underline!important;
}
em .shadow {
background-image:none!important;
}
em .shadow-holder img{
border-width: 2px 2px 2px px!important;
}
.shadow-holder img{
border:1px solid #dae4d9;
}
.shadow-holder img:hover{
border:1px solid #405147;
}
.list {display:none!important;}
.bottom {
position:absolute;
left:6px;
bottom:3px;
color:#CCD9CD!important;
z-index:100;
padding:0px 0px 0px 0px!important;
height:24px!important;
font-size:0px;
}
.bottom a{
font-size:12px;
background: url(http://fc02.deviantart.net/fs71/o/2010/079/7/6/157881326_116911_buttons.png) top no-repeat;
color:#fff!important;
text-decoration:none!important;
padding: 5px 0px 0px 0px;
text-align:center;
width:114px!important;
display:block;
height:28px!important;
}
.bottom a:hover{
background: url(http://fc02.deviantart.net/fs71/o/2010/079/7/6/157881326_116911_buttons.png) 50% -28px no-repeat;
text-decoration:none!important;
}
.bottom a:active{
background: url(http://fc02.deviantart.net/fs71/o/2010/079/7/6/157881326_116911_buttons.png) 50% -56px no-repeat;
text-decoration:none!important;
}
blockquote {
padding: 10px 35px 10px 60px;
margin: 0px -15px 0px -34px;
background:#eaf1e9 ;
font-style: italic;
}
.minigal {
margin:0 0px 0px 0px;
}
.minigal .shadow {
background-image:none!important;
}
.minigal a {
border-radius:3px 3px 3px 3px;
-moz-border-radius:3px 3px 3px 3px;
-webkit-border-radius:3px 0px 3px 0px;
z-index:99;
display:inline-block;
width:50px!important;
height:50px!important;
overflow:hidden;
border:solid #1f292a;
border-width:3px 3px 3px 3px;
}
.minigal img {
margin:-5px -5px;
}
.minigal a:hover {
border:solid #405147;
border-width:5px 5px 5px 5px;
background: #405147;
}
.minigal a:hover img {
border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 0px 5px 0px;
z-index:99;
position:absolute;
margin:50 50 50 -5px;
border: solid #405147;
border-width:10px 10px 10px 10px;
}
.credit {
text-align:center;
font-size:08px;
font-style:italic;
color:#405147;
}
[u]LA PARTIE FOOTER : [/u]
<div class="credit">Skin made by :devIkue: and Redesign by :devSatania:</div>
[u]LA MISE EN FORME [/u] (dans votre contenue journal)
<strong>TEXTE</strong> : Creer un titre
<blockquote>TEXTE</blockquote> : Creer une citation
<minigal></minigal> : Creer une gallerie à apercu miniature
<ul><li>Liste 1</li><li>Liste 2</li></ul>
Have fun et dite moi ce que vous en pensez
Au passage le lien pour les 4 autres versions :
We Loves You deviantART autres couleurs !