Technologie de porte coulissante en CSS

Une avancée souvent évoquée en CSS est la possibilité d'empiler des images d'arrière-plan, leur permettant de glisser les unes sur les autres pour créer des effets spéciaux. Selon les règles actuelles de CSS 2.0, chaque image d'arrière-plan nécessite son propre élément HTML. Dans de nombreux cas, le balisage typique fournit déjà une variété d’éléments que nous pouvons utiliser comme composants d’interface généraux.

Avec un design simple, nous pouvons le faire.

D’où vient l’innovation ?

De nombreuses balises de navigation basées sur CSS que j'ai vues ont pour la plupart les mêmes caractéristiques : un bloc de couleur rectangulaire, peut-être juste un contour, pas de bordure pour la balise actuellement sélectionnée, et la balise change de couleur lorsque le pointeur de la souris la survole. Est-ce tout ce que CSS peut nous apporter ? Une série de petites boîtes et de couleurs ternes ?

Avant que CSS ne soit largement adopté, nous avions vu de nombreuses innovations dans la conception de la navigation par onglets. Forme originale, mélange de couleurs expert et imitation de nombreuses interfaces physiques dans le monde réel. Mais ces conceptions reposent souvent trop sur des images complexes avec du texte ou sont regroupées dans des tableaux imbriqués. Modifier le texte ou changer l'ordre des étiquettes nécessite un processus complexe. Il est même impossible d'étirer le texte, sinon cela affecterait grandement la mise en page de la page.

Les barres de navigation en texte uniquement sont plus durables et se chargent plus rapidement que les barres de navigation en texte sous forme d'image. De même, nous pouvons même ajouter des attributs alt à chaque image. Pour les personnes malvoyantes, le texte brut peut être redimensionné librement. Il n’est pas surprenant que les barres de navigation basées sur du texte brut, stylisées avec CSS, soient de retour dans la conception Web. Cependant, la plupart des conceptions de barres de navigation basées sur CSS n’ont jusqu’à présent aucun sens. Une technologie récemment adoptée (telle que CSS) peut nous permettre de faire mieux, sans perdre l'effet des balises de tableau et d'image mentionnées précédemment.

technologie des portes coulissantes

Un beau savoir-faire, des composants d'interface vraiment flexibles et un dimensionnement adaptatif basé sur le texte, nous pouvons le créer avec deux images d'arrière-plan indépendantes. Un à gauche et un à droite. Considérez ces deux images comme deux portes coulissantes qui coulissent ensemble et se chevauchent pour occuper un espace plus étroit, ou qui s'écartent l'une de l'autre pour occuper un espace plus large, comme le montre l'image suivante :

Dans ce modèle, une image masque une partie d'une autre image. Supposons que nous placions un contenu unique autour de chaque image, comme des coins arrondis pour les étiquettes. Nous ne voulons pas que l'image du haut masque complètement celle du bas. Pour éviter que cela ne se produise, nous pouvons rendre l'image ci-dessus (celle de gauche dans cet exemple) aussi étroite que possible. Mais veillez tout de même à une certaine largeur pour montrer le caractère unique d’un côté de l’étiquette. Si les coins extérieurs sont arrondis, nous devons contrôler l'image ci-dessus pour qu'elle ait la même largeur que sa partie arc.

Si la cible grossit et dépasse la largeur indiquée ci-dessus, l'image sera étirée en raison des changements dans la taille du texte et la police, créant des espaces disgracieux. Ce que nous devons juger, c’est prédire l’ampleur de cette évolutivité. Si je modifie la taille de la police dans le navigateur, la cible augmentera-t-elle ? En pratique, nous devrions au moins estimer que la taille de la police augmente à 300 %. Les images d’arrière-plan doivent également s’adapter à cette croissance. Pour l'exemple ci-dessus, nous définissons l'image inférieure (droite) sur 400*150 pixels et l'image supérieure sur 9*150 pixels.

Si l’étiquette est étirée, l’image glisse, la porte s’élargit et une plus grande partie de l’image est révélée :

Dans cet exemple, j'ai créé deux images d'étiquettes 3D fines et lisses dans Photoshop, comme indiqué au début de l'article. D'une part, l'intérieur est clair et la bordure est plus sombre pour représenter l'étiquette actuellement sélectionnée. Pour appliquer ce modèle astucieux aux images de gauche et de droite, nous devons agrandir la zone couverte par l'image de l'étiquette et la recadrer en deux parties :

La même approche s’appliquera au label dit « actuel ». Une fois que nous avons ces quatre images (1, 2, 3, 4), nous pouvons commencer à créer nos étiquettes avec du balisage et du CSS.

création d'étiquettes

Lorsque vous envisagez d'utiliser CSS pour créer des listes horizontales, vous constaterez qu'il existe au moins deux façons de disposer les éléments d'une liste sur la même ligne. Les deux méthodes ont leurs propres avantages, mais toutes deux nécessitent du CSS pour résoudre la confusion causée par la mise en page. Une méthode utilise des boîtes en ligne, l'autre utilise des flotteurs.

La première méthode, qui peut être la plus courante, consiste à afficher tous les éléments de la liste en ligne. La beauté de l’approche en ligne réside dans sa simplicité. Cependant, pour la technologie de porte coulissante dont nous allons parler, la méthode en ligne présente quelques problèmes d'interprétation sur certains navigateurs. La deuxième méthode, sur laquelle nous allons nous concentrer, consiste à utiliser des flottants pour organiser les éléments de la liste sur la même ligne. Il est frustrant de constater que le comportement apparemment contradictoire des flotteurs échappe à la logique naturelle. Néanmoins, la compréhension de base de la façon de gérer plusieurs éléments flottants et de ce que signifie un flottement fiable mérite d'être discutée.

Nous utiliserons un autre type d’élément flottant pour résoudre le problème de la disposition des éléments flottants. De cette façon, l’élément parent englobe complètement l’élément enfant. Par conséquent, nous pouvons ajouter une couleur et une image d’arrière-plan à l’étiquette. Il est très important de se rappeler que les éléments de texte qui suivent immédiatement l'étiquette utilisent la fonction clear du CSS pour effacer les objets flottants. Cela empêche les étiquettes flottantes d'affecter la position des autres éléments sur la page.

Nous commençons par le balisage suivant :

<div id="en-tête">
<ul>
<li><a href="#">Accueil</a></li>
<li id="current"><a href="#">Actualités</a></li>
<li><a href="#">Produits</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

En réalité, le div #header peut également contenir le logo et le champ de recherche. Pour notre exemple, nous souhaitons raccourcir la valeur de chaque lien hypertexte de la chaîne d'ancrage. Évidemment, ces valeurs doivent contenir correctement l'emplacement du fichier ou du répertoire.

Nous commençons à concevoir la liste en positionnant le conteneur #header. Cela garantit que le conteneur agit réellement comme un conteneur pour contenir les éléments de liste flottant à l'intérieur. Puisque l’élément est flottant, nous devons également déclarer sa largeur à 100 %. Ajoutez un arrière-plan jaune temporaire pour garantir que le conteneur parent remplit complètement toute la zone derrière l'étiquette. De même, définissez les propriétés du texte par défaut pour garantir un style uniforme :

#en-tête {
flotteur : gauche ;
largeur : 100 % ;
fond : jaune ;
taille de police : 93 % ;
hauteur de ligne : normale ;
}

Maintenant, nous devons également définir la valeur de marge/remplissage par défaut pour la liste non ordonnée sur 0 et supprimer la marque devant l'élément de liste. Chaque élément de la liste flotte vers la gauche :

#en-tête ul {
marge : 0 ;
remplissage : 0 ;
style de liste : aucun ;
}
#en-tête li {
flotteur : gauche ;
marge : 0 ;
remplissage : 0 ;
}Définissez la chaîne d'ancrage pour forcer le rendu en tant qu'objet bloc, et nous pouvons contrôler tous les styles sans souci :

#en-tête un {
affichage:bloc;
}

Ensuite, nous ajoutons l'image d'arrière-plan à droite à l'élément de liste (modifications affichées en gras) :

Nous pouvons maintenant positionner l'image de gauche à gauche de la chaîne d'ancrage (l'élément à l'intérieur du conteneur). Nous ajoutons également un remplissage, qui agrandit l'étiquette et éloigne le texte des bords de l'étiquette :

#en-tête un {
affichage:bloc;
arrière-plan:url("norm_left.gif")
pas de répétition en haut à gauche ;
remplissage : 5px 15px ;
}

De cette façon, nous obtenons l'effet 2. Remarquez la forme de notre étiquette. Ici, les utilisateurs d'IE5/Mac seront immédiatement surpris : « Oh mon Dieu, mes onglets sont empilés verticalement et s'étendent sur tout l'écran ! » Ne vous inquiétez pas, nous vous aiderons à résoudre ce problème immédiatement ! Pour l'instant, essayez de suivre les étapes ci-dessous ou, si cela vous convient, passez temporairement à un autre navigateur et le problème avec la version IE5/Mac sera résolu immédiatement.

Maintenant que l'image d'arrière-plan de l'étiquette générale est terminée, nous devons remplacer l'image de l'étiquette "actuelle". Nous y parvenons en ajoutant id="current" et une chaîne d'ancrage à l'élément de liste cible. Puisqu’il n’est pas nécessaire de changer l’apparence de l’arrière-plan autre que l’image, nous utilisons la fonctionnalité background-image :

Nous plaçons l'image dans l'arrière-plan du conteneur #header (en remplaçant le fond jaune d'origine), déplaçons l'image d'arrière-plan vers le bas et ajoutons la couleur d'arrière-plan correspondante à l'espace vide au-dessus de l'image. En même temps, supprimez le remplissage hérité de body et ajoutez 10 pixels de remplissage en haut, à gauche et à droite de ul :

#en-tête {
flotteur : gauche ;
largeur : 100 % ;
arrière-plan :#DAE0D2 url("bg.gif")
répéter-x en bas ;
taille de police : 93 % ;
hauteur de ligne : normale ;
}
#en-tête ul {
marge : 0 ;
remplissage : 10px 10px 0 ;
style de liste : aucun ;
}

Nous faisons cela en réduisant la valeur de remplissage inférieure de la chaîne d'ancrage normale de 1 pixel (5px-1px=4px), puis en ajoutant le remplissage soustrait à la chaîne d'ancrage "actuelle".

touches finales

Les observateurs avertis ont peut-être remarqué les coins en marque blanche dans l’exemple précédent. Ces coins opaques sont utilisés pour empêcher l’image du dessous de transparaître par rapport à celle du dessus. En théorie, nous pourrions essayer d'utiliser une partie de l'image d'arrière-plan pour l'adapter à l'arrière-plan de l'étiquette. Mais notre étiquette grandira en hauteur. Si nous essayons de déplacer la couleur d’arrière-plan, l’image d’arrière-plan deviendra plus courte. Modifiez plutôt l’image pour que les coins de l’étiquette soient transparents. Si l'arc est anticrénelé, nous utilisons une couleur d'arrière-plan plus uniforme sur ses bords.

Maintenant que les coins sont devenus transparents, l’image de gauche apparaîtra à travers les coins de l’image de droite. Pour compenser, nous ajoutons un remplissage (9px) à l'élément de formulaire qui correspond à la largeur de l'image de gauche. Maintenant que nous avons ajouté un remplissage à l'élément de formulaire, nous devons supprimer la même largeur pour centrer le texte (15px-9px=6px) :

#en-tête li {
flotteur : gauche ;
arrière-plan:url("droit.gif")
pas de répétition en haut à droite ;
marge : 0 ;
remplissage :0 0 0 9px ;
}
#en-tête un {
affichage:bloc;
arrière-plan:url("gauche.gif")
pas de répétition en haut à gauche ;
remplissage : 5 px, 15 px, 4 px, 6 px ;
}

Ce n'est pas fini, car l'ajout de 9 pixels de padding crée un espace entre l'image de gauche et le côté gauche de l'étiquette. Maintenant que les bords gauche et droit de la « porte » visible sont connectés, nous n’avons plus besoin de conserver l’image de gauche en haut. Alors, échangez l’ordre des deux images d’arrière-plan et inversez-les. Echangez également les deux images utilisées dans la balise "current":

#en-tête li {
flotteur : gauche ;
arrière-plan:url("gauche.gif")
pas de répétition en haut à gauche ;
marge : 0 ;
remplissage :0 0 0 9px ;
}
#en-tête a, #en-tête fort, #en-tête span {
affichage:bloc;
arrière-plan:url("droit.gif")
pas de répétition en haut à droite ;
remplissage : 5 px, 15 px, 4 px, 6 px ;
}
#en-tête #actuel {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
rembourrage inférieur : 5 px ;
}

Après avoir terminé cela, nous arrivons à l’effet 4. Notez que les coins transparents créent une zone non cliquable sur le côté gauche de l'étiquette. Cette zone est hors du texte, mais reste perceptible. Il n’est pas nécessaire d’utiliser des images transparentes des deux côtés de l’étiquette. Si nous ne voulons pas créer cette zone invalide, nous devons alors utiliser une couleur derrière l'étiquette puis remplacer l'image transparente dans les coins de l'étiquette par cette couleur. Maintenant, nous gardons juste ce coin transparent.

Pour la suite du problème, nous allons effectuer toutes les modifications en même temps : alourdir le texte de l'étiquette, changer le texte de l'étiquette normale en marron, changer le texte de l'étiquette "actuel" en gris foncé, supprimer le soulignement du lien , et enfin changez la couleur du texte de survol. Changez-la pour la même couleur gris foncé. Après une série de changements, nous examinerons l'effet jusqu'à présent 5.

Solution cohérente
After Effect 2, un problème que nous avons reconnu est qu'en mode de navigation IE5/Mac, chaque onglet s'étend et occupe toute la largeur du navigateur, de sorte que les onglets sont empilés verticalement. Ce n'est pas ce que nous voulons.

Dans la plupart des navigateurs, un élément flottant est réduit à une taille minimale de son contenu. Si un élément flottant contient une image ou est une image, il se réduit à la largeur de l'image. S'il ne contient que du texte, il sera réduit à la largeur du texte le plus long et sans tête.

Un problème se produit dans les images dans IE5/Mac lorsqu'un élément d'objet bloc à largeur automatique est inséré dans un élément flottant. D'autres navigateurs minimisent toujours les flottants et ignorent les éléments de bloc dans le conteneur. Mais IE5/Mac ne suit pas ce comportement, mais étend les éléments d'objet float et block aussi larges que possible. Pour résoudre ce problème, nous ferons flotter la chaîne d'ancrage en même temps, mais uniquement pour IE5/Mac, afin de ne pas abandonner les autres navigateurs. Tout d’abord, nous définissons les règles flottantes pour la chaîne d’ancrage. Ensuite, nous utilisons la méthode de commentaire antislash pour masquer cette règle afin qu'elle ne prenne effet que pour IE5/Mac et ignore les autres navigateurs :

Tirer des conclusions à partir d'un exemple Nous venons de pratiquer la technique de la porte coulissante, en utilisant du texte brut et une liste non ordonnée pour créer des étiquettes de navigation, avec un peu de style. Il se charge rapidement, est maintenable et la taille du texte peut être considérablement agrandie sans gâcher l'apparence. Nous n'avons pas besoin de réitérer la flexibilité de la technologie des portes coulissantes dans la création de styles complexes de barres de navigation.

Il n’y a rien auquel vous ne puissiez penser et rien que vous ne puissiez faire. L'effet final nous montre un exemple, mais notre conception ne peut pas être limitée par cela.

Dans certains cas, les étiquettes ne sont pas nécessairement symétriques. J'ai rapidement réalisé une deuxième version de cette étiquette, également avec un style 3D ombré, des bords angulaires et une partie gauche distinctive. Selon la deuxième version, on peut même échanger les positions des images gauche et droite. Grâce à cette disposition détaillée et à ce contrôle intelligent de l'image, nous pouvons supprimer la bordure inférieure du bouton afin que l'image de l'étiquette s'intègre mieux à l'arrière-plan, comme le montre la troisième version. Si votre navigateur prend en charge la commutation entre plusieurs feuilles de style, vous pouvez même l'utiliser pour basculer librement entre plusieurs versions de la barre de navigation.

Il existe de nombreux autres effets que nous n’avons pas mentionnés. Un petit mot, j'ai changé la couleur du texte au survol de la souris, mais l'image entière pourrait être remplacée pour créer un effet de transformation plus intéressant. Même s'il y a deux éléments HTML imbriqués dans le balisage, CSS peut être utilisé pour obtenir certains effets auxquels nous n'avons pas encore pensé. Ce que nous avons créé dans cet exemple n'est qu'une barre d'onglets horizontale, mais les portes coulissantes peuvent être utilisées dans de nombreuses autres situations. Qu'en penses-tu?