BgMax - Image de fond ajustée. Script : bgMax v1.1.1langage : javascriptcatégorie : moduleusage : Un background-image toujours adapté aux mesures de la fenêtre du visiteur, avec en prime une apparition en fondu.tags : effets spéciaux - image Concept Une image de fond, quand elle est bien soignée, peut apporter à un site web un bel atout graphique.
Hélas, avec la variété croissante des tailles d'écrans, on ne sait jamais dans quelles conditions le visiteur pourra profiter de notre belle image. Empêcher les flottants de dépasser de leur conteneur. Par défaut dans les navigateurs, les éléments positionnés grâce à la propriété CSS float (aussi appelés flottants, ou en anglais floats) sortent du flux de leur conteneur.
Autrement dit, les flottants «dépassent». C'est ainsi qu'on se retrouve avec des conteneurs qui font zéro pixel de hauteur, des colonnes qui passent à travers un pied de page, et autres résultats peu souhaitables. Par exemple, avec ce code HTML et CSS les «colonnes» flottantes dépasseront de leur conteneur: <div id="conteneur"><div class="colonne">AAA</div><div class="colonne">BBB</div><div class="colonne">CCC</div></div> Comment bloquer ponctuellement le dépassement des flottants? La propriété overflow La propriété CSS overflow définit comment un bloc doit se comporter lorsqu'un contenu dépasse de ce bloc. Gérer les débordements de contenus grâce à CSS. Sommaire Précision : cet article se limite volontairement au dépassement de contenus et non à d'éventuelles erreurs de conception de design, de mauvaise gestion de la fluidité, ou à des débordements de blocs flottants.
Ovale et forme elliptique avec CSS3 sans image. La propriété border-radius offre la possibilité d'arrondir les angles de vos blocs en CSS 3.
Comme le présente très bien cet article de Raphaël sur le border-radius, son utilisation est plutôt aisée. Une utilisationp plus poussée La propriété border-radius de CSS3 prévoit une utilisation plus poussée puisqu'elle permet d'accueillir deux valeurs pour chaque angle de boîte à modifier dans l'optique de générer des formes très variées, voire elliptiques. Comment cacher un titre (derrière un logo par exemple) ? Le but étant, par exemple, d'afficher en mode graphique un logo ou une bannière, tout en fournissant un texte « en dur » dans le code HTML, texte qui sera visible lorsque le site est visité avec un navigateur non graphique.
Il existe plusieurs méthodes, utilisant généralement une image de fond CSS (background-image). À noter que la règle "display: none" pose des problèmes aux lecteurs d'écran. Le code html : <h1>Ici le titre en texte</h1> Le style css : Autre possibilité, utiliser la propriété d'alinéa (text-indent) pour décaler le texte suffisamment loin à gauche, en dehors de la partie visible de la fenêtre du navigateur :
Un arrière-plan extensible intelligent. Certains sites affichent une (grande) image de fond qui s'adapte à toutes les dimensions de la fenêtre du navigateur, proportionnellement, sans la déformer.
Browserhacks. Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8. Hacks CSS pour IE, Firefox, Safari et Opera. Tous les browsers n’affichent pas un site web de la même manière et même si l’ensemble a tendance à s’unifier, il reste toujours des points de détail qui sont mal interprétés par l’un ou l’autre.
La difficulté, c’est que Firefox, Opera et Safari n’ont pas de méthode permettant d’attribuer une feuille de style indépendante, à l’instar d’Internet Explorer, avec ses commentaires spécifiques. Il faut croire que les développeurs d’IE étaient parfaitement conscients que leur navigateur n’était pas au point quand ils l’ont codé et qu’ils ont mis à disposition des intégrateurs, une méthode pour palier à ces faiblesses et pouvoir afficher quelque chose de convenable.
Quoi qu’il en soit, même si redéfinir une feuille de style uniquement pour IE est parfois un calvaire, il faut bien avouer que la manipulation est simple et efficace. Pour les autres, plutôt que de passer par une méthode javascript, comme le fameux CSS Browser Selector, nous allons cibler chaque navigateur uniquement via le CSS.
La base. Le contexte de formatage block en CSS. Comment faire des blocs de même hauteur ? Les multicolonnes en CSS3. Le module de positionnement multicolonnes (ou Multi-column Layout Module en anglais) permet, comme son nom l'indique, de faire s'écouler du contenu sur plusieurs colonnes de largeurs égales, tel qu'on peut le voir dans le monde de l'imprimerie.
Encore peu usité, ce module est pourtant loin d'être en brouillon car il s'agit d'une spécification élevée au rang de Candidate Recommendation, donc stable, au sein du W3C depuis avril 2011. Compatibilité de multicolumn Le positionnement multicolonnes est - contre toute attente - plutôt bien supporté par le collège des navigateurs. Les anciennes versions d'Internet Explorer faisant bien entendu exception à la règle. En pratique, il est actuellement utilisable sans problème en production sur les navigateurs mobiles que l'on retrouve sur smartphones et tablettes.
Tableau des compatibilités Mise en oeuvre. L'élément <mark> pour attirer l'attention. Sortez votre feutre jaune Nouveau venu en HTML5, l'élément <mark> est un surligneur de texte.
Il marque un , que l'on souhaite mettre en valeur d'une façon particulière, pour attirer l'attention. Son style par défaut est celui d'un texte surligné en jaune (dans les navigateurs qui le reconnaissent). Pour les anciens navigateurs qui ne comprendraient pas ce style par défaut, il suffit de l'ajouter à votre feuille CSS, voire de le personnaliser en choisissant d'autres couleurs. Usages. Utiliser PHP pour gérer vos styles CSS. Certaines limites de CSS peuvent parfois être gênantes.
Des frameworks plus ou moins poussés comme LESS ou SASS tentent de pallier à ces petits soucis. Une autre solution est d'utiliser simplement PHP pour générer des feuilles de styles CSS. Les avantages sont multiples :