Mer Modèles CSS

Templates CSS maritimes simples

Les couleurs, les espacements et la typographie créent l'ambiance d'une mise en page maritime bien avant que l'on ne lise la description d'une sortie en mer. Les templates CSS maritimes intègrent déjà ces choix, avec une palette pensée pour contraster avec le bleu de l'eau et une échelle d'espacement qui évite d'étouffer les sections denses en photographies. L'essentiel du travail consiste à ajuster ces règles, et chaque composant correspondant répercute le changement.

Styles prêts à l'emploi pour les cartes de navires

Une grande partie du contenu maritime se présente sous forme de cartes, et un bon template les stylise en tenant compte de leurs informations concrètes :

• des cartes de bateaux, où la capacité, l'itinéraire et la durée de navigation exigent une typographie compacte qui reste lisible au premier coup d'œil ;
• des cartes de sites de plongée avec des badges de niveau, afin que les sorties débutants et confirmés se distinguent avant même le clic ;
• des blocs d'excursions dont les boutons affichent des états de survol et de focus clairs à côté du tarif ;
• des légendes de galeries qui demeurent parfaitement lisibles sous des clichés sous-marins sombres comme sous des photos côtières très lumineuses.

Comme les cartes d'un même type partagent les mêmes classes et règles d'espacement, modifier un rayon d'arrondi ou la couleur d'un badge met à jour l'ensemble des éléments. Les couleurs d'état méritent une attention précoce : un badge « Complet » affiché dans le même turquoise éclatant que « Disponible » envoie un message contradictoire.

Photographie aquatique et points de rupture

L'imagerie maritime est plus exigeante pour le texte que la plupart des photos. Une eau baignée de soleil crée de vifs reflets sur une section hero, le ciel au-dessus d'un voilier vire souvent au blanc éclatant, et les prises de vue sous-marines deviennent sombres et bleutées. L'opacité du calque de superposition, l'ombre portée du texte et la graisse de la police déterminent si un titre reste lisible par-dessus. Une démonstration combinant images marines claires et sombres montre rapidement si les superpositions fonctionnent bien.

Le recadrage demande la même rigueur. Un navire à l'horizon exige un cadre large, tandis qu'un gros plan sur une tortue ou du corail est mis en valeur dans un format plus carré. Sur les écrans plus petits, la grille d'excursions doit réduire son nombre de colonnes, et les gouttières, largeurs de cartes et tailles de police doivent diminuer en conséquence.

Règles personnalisées en cas de besoins spécifiques

Les contrôles visuels gèrent la plupart des ajustements, mais les projets maritimes comportent souvent de petites exceptions. Une offre de charter de dernière minute peut nécessiter un état de badge distinct. Les légendes d'une galerie sous-marine ont parfois besoin de plus d'espacement, et le libellé d'un itinéraire placé sur une photo chargée peut exiger un contraste plus marqué.

Nicepage documente le CSS personnalisé au niveau de l'élément, de la page et du site. Une règle pour une seule carte de plongée s'applique au niveau de l'élément, une page de spécialités de fruits de mer peut adopter ses propres styles au niveau de la page, et la couleur d'accent principale se définit au niveau du site. Lorsque la majorité des cartes, badges et légendes sont déjà impeccables dans la démo, la couche personnalisée reste légère et facile à maintenir.