Le succès du EVO6 imposait un site dédié : Le voici !

Tips CSS3 background pour editeur de thème prestashop EVO6 : N°92

CSS3 dégradé
Voici les codes CSS qui peuvent êtres utilisé dans le générateur de thème prestashop EVO6 pour obtenir le dégradé correspondant à l’image

Ce dégradé peut être utilisé a plusieur niveau, aussi je vous propose plusieur code CSS3 pour les différent élément du site.

Ce code CSS peut être collé directement dans l’onglet CSS du module EVO6 :

BACKGROUND – ARRIERE PLAN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*  CSS3_BG by DDLX */
html body {
background-image: linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -o-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -moz-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -webkit-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -ms-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);

background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.34, #76E3BC),
    color-stop(0.67, #9AFFE2),
    color-stop(0.84, #B9FFFF)
);
}

HEADER – BANDEAU

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*  CSS3_HEADER by DDLX*/

div#header {
background-image: linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -o-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -moz-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -webkit-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -ms-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);

background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.34, #76E3BC),
    color-stop(0.67, #9AFFE2),
    color-stop(0.84, #B9FFFF)
);
}

ENTETE DE BLOC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*  CSS3_BLOC_HEAD  by DDLX */
div#right_column .block .title_block, div#right_column .block .title_block_myaccount, div#right_column div.block h4, div#right_column div.myaccount h4, div#left_column .block .title_block, div#left_column .block .title_block_myaccount, div#left_column div.block h4, div#left_column div.myaccount h4 {
background-image: linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -o-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -moz-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -webkit-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -ms-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);

background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.34, #76E3BC),
    color-stop(0.67, #9AFFE2),
    color-stop(0.84, #B9FFFF)
);
}

BLOCK CONTENT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*  CSS3_BLOC_CONTENT  by DDLX*/
#right_column div.block_content, #left_column div.block_content {
background-image: linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -o-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -moz-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -webkit-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -ms-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);

background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.34, #76E3BC),
    color-stop(0.67, #9AFFE2),
    color-stop(0.84, #B9FFFF)
);
}

PIED DE PAGE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*  CSS3_FOOTER  by DDLX*/
div#footer #ddlxfooter{
background-image: linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -o-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -moz-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -webkit-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -ms-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);

background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.34, #76E3BC),
    color-stop(0.67, #9AFFE2),
    color-stop(0.84, #B9FFFF)
);
}

LISTE PRODUIT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*  CSS3_PRODUCT_LIST  by DDLX*/
#product_list li {
background-image: linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -o-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -moz-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -webkit-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);
background-image: -ms-linear-gradient(right , #76E3BC 34%, #9AFFE2 67%, #B9FFFF 84%);

background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.34, #76E3BC),
    color-stop(0.67, #9AFFE2),
    color-stop(0.84, #B9FFFF)
);
}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *