428 visites

Thèmes "maisons"

mardi 5 février 2013

Version imprimable de cet article Version imprimable

Trois nouveaux thèmes ont étés développés le week-end du 3 février, en collaboration avec Famas94.

  • Salle commune de Serpentard : un thème vert & sombre avec en toile de fond, la salle commune de la maison Serpentard, le blason avec un serpent remplaçant le vif d’or sur la droite.
  • Trio Serpentard : un thème avec en arrière plan le célèbre trio de la maison Serpentard. Au centre, Drago Malefoy assis sur un fauteuil. Toujours dans le même style le vif d’or est remplacé par un écu de la maison.
  • Salle commune Serdaigle : un thème aux différentes nuances de bleu avec en toile de fond une vue sur deux colonnes de pierre surplombées d’aigles encadrant la statue de Rowena Serdaigle.

Ces thèmes sont des thèmes Zengarden, développés pour être compatible avec le squelette Zpip-vad.

Afin de rendre le texte et les images visibles malgré la présence d’une image de fond, celle-ci est atténuée par la couleur d’arrière plan et la semi-opacité d’un bloc "filtre" placé devant.

Afin d’éviter que le texte et les images ne soient eux aussi atténués (le bloc "page" héritant des propriétés CSS du bloc à l’intérieur duquel il est déclaré), le bloc ’page" est séparé des 2 autres, et est placé devant grâce à la propriété CSS z-index et une position "absolute".

Il y a donc 3 cadres :
exemple pour le thème "trio serpentard".

on peut voir que la page se décompose comme suit :

<div id="bckg">
        <div id="filtre"> </div>
</div>
<div id="page">
        <div id="entete">
        <div id="contenu">
        <div id="navigation">
        <div id="zone_droite">
        <div id="pied">
</div>

Et voici le code CSS indiquant comment positionner les blocs "bckg", "filtre" et "page".

#bckg, #filtre, #page {
   bottom: 0;
   left: 0;
   margin: 0 auto;
   position: absolute;
   right: 0;
   text-align: left;
   top: 0;
}

Ces 3 blocs ont en commun leur taille, qui s’étend à toute la page.
En effet, ces 3 blocs fonctionnent comme des couches :

  • "bckg" est le bloc "dédié" à l’image d’arrière plan. On utilise ici un bloc car le body est de taille réduite, puisque les blocs qu’il contient n’ont pas de taille fixée (en px ou en pourcentage), et son arrière plan ne prendrait donc pas toute la page
  • "filtre" est le bloc qui va atténuer les couleurs de l’image de fond, via une couleur de son propre arrière plan, associé à une opacité.
  • "page" est le bloc contenant les éléments de la page.

#bckg {
   background-image: url("img/serpentard1.jpg");
   background-position: center top -450px;
   background-repeat: no-repeat;
   background-size: 100% auto;
   z-index: -2;
}

Le bloc "arrière-plan" a donc

  • une image d’arrière plan
  • centrée horizontalement, collée au bord haut de la page moins 450px
  • étendue à toute la largeur de la page et ayant une hauteur automatique afin de garder les bonnes proportions
  • une position sur l’axe Z (la profondeur) de -2. Le défaut étant de 0, ce cadre sera donc derrière.

#filtre {
   background-color: lightgray;
   opacity: 0.7;
   z-index: -1;
}

Le bloc "filtre" a donc

  • une couleur d’arrière plan
  • une position sur l’axe Z (la profondeur) de -1. Le défaut étant de 0, ce cadre sera donc derrière le premier plan et devant le cadre précédent.
  • une opacité de 0.7. L’opacité va de 0 (complètement transparent) à 1 (complètement opaque)

Quand au bloc "page", son opacité est par défaut, à 1, et il ne possède pas d’arrière plan.
Son arrière plan sera donc transparent, mais le texte et les images seront parfaitement opaques.

Si les 3 cadres étaient imbriqués les uns dans les autres, le contenu de la page souffrirait de la semi-transparence du bloc intermédiaire, les textes seraient alors atténués et les images seraient semi-transparentes.

Répondre à cet article

Total 187399 visites depuis 2699 jours | Site réalisé par Vader[FR] | SPIP | | Plan du site | Suivre la vie du site RSS 2.0 | contact mail