Fullscreen : vos images de fond en plein écran

[small]photo du fond: [i]Hong Kong sky lights[/i], Laurence Mellinger, 2004.[/small] C'est à partir d'un tutoriel donné par le [b]concepteur web[/b] Guillaume Normand, dans le hors-serie n°5 de la revue [b][i]Webdesign[/i][/b], que j'ai intégré ce thème pour [b]YACS[/b], en l'enrichissant davantage et surtout en utilisant la puissance d'un [b]CMS[/b] pour mettre en œuvre une utilisation intéressante d'images de fond. C'est là le principal objet de ce thème : pouvoir afficher une [b]image de fond, ajustée en plein écran[/b]. En second objet, comme tous les blocs sont positionnés en absolu, il n'y a pas de défilement de la page. (C'est le main_panel seulement qui fait défiler son contenu.) En conséquence les [b]menus et les outils sont visibles et accessibles en permanence[/b].

Afin d'optimiser davantage la place, et ne pas masquer l'image de fond, la colonne extra est affichée de manière innovante à l'horizontale en haut de page, et se déplie au survol de la souris.
Bien sûr ces positionnements ont une limite de place disponible, surtout en petite résolution, et ne conviendront pas sur un site qui demande d'afficher beaucoup d'informations (boîtes de navigation, etc.). [title]Positionnement intelligent[/title] L'affichage de l'image de fond n'est pas qu'une simple déformation de l'image aux dimensions de la fenêtre du navigateur. Les [b]proportions[/b] de l'image sont [b]préservées[/b] tandis que l'image est centrée. Selon le différentiel entre les proportions de l'image et de la fenêtre du navigateur, l'image est rognée verticalement ou horizontalement. Le rendu est obtenu par les balises HTML et les règles CSS. [title]Fonds multiples[/title] L'image de fond par défaut est images/background.jpg dans le répertoire du thème. Là ou cela devient intéressant c'est que le thème permet d'utiliser très facilement des [b]backgrounds différents pour chaque page[/b], attribués [b]en cascade[/b] sur l'arborescence, et [b]sans intervenir dans le code PHP[/b] ! Deux méthodes sont disponibles simultanément : - [b]méthode 1[/b] : définir au niveau d'une section une option de [b]variante de thème[/b]. - [b]méthode 2[/b] : fournir au niveau d'une page une "[b]image de page[/b]". [title]Menu en boutons 3D[/title]

Les règles de style transforment les liens de la colonne latérale en [b]joli menu à boutons[/b] (pour les navigateurs compatibles CSS3). Vous pouvez facilement changer les couleurs via la feuille de style. Les boutons dans le corps de page (barre de commande, boutons à la demande) auront le même rendu. [title]Feuille de style CSS3[/title]

Les effets de style sont obtenus par CSS3 et donc non implémentés par tous les navigateurs. Cependant c'est une solution d'avenir, qui simplifie fortement l'intégration. @font-face, box-shadow, text-shadow, border-radius. [title]Personnaliser et dériver ce thème[/title]

Le CSS est organisé de [b]manière à isoler[/b] ce qui relève de la [b]décoration[/b] ou du [b]positionnement[/b] délicat des blocs. Le thème est livré ici avec une ambiance quelque peu technoïde, mais vous pouvez rapidement changer ses couleurs en éditant la première partie du CSS. Les scripts sont [b]entièrement commentés[/b]. [title]Idées d'utilisation[/title] À partir de ce thème, vous pouvez élaborer une galerie d'images en plein écran. De nouvelles interactions pourront aussi être mises en oeuvre après l'intégration de jQuery. [title]Spécifications[/title]

- En-tête, colonne latérale, corps de page, pied de page, barre d'interactions
- Positionnement absolu, blocs toujours visibles
- 2 colonnes + une barre d'interactions dépliable au survol
- Menu en boutons 3D
- Onglets de navigation
- Fil d'Ariane
- Validité XHTML 1.1
- Feuille de style CSS3
- Police embarquée
- Rendu maximum avec le navigateur Firefox 3.5+
- Scripts très commentés, basés sur le thème Mu

thème graphique FULLSCREEN pour YACS

dl#scrolling_news div.scroller_outside { /* the navigation box for scrolling news */
    height: 300px; /* the height of the scrolling area */
    overflow: hidden; /* strip the tail, if any */
    position: relative;
    }