Les ombrages en CSS3. Grâce à des propriétés telles que box-shadow, text-shadow et border-colors, les feuilles de style offrent la possibilité de créer des ombrages sur les différents éléments de votre page sans nécessiter d'image décorative et de découpes intempestives.
Tout n'est pas rose puisque certains navigateurs à la traîne ne reconnaissent pas encore ces différentes propriétés et nécessitent des adaptations personnalisées. Faisons le tour du propriétaire... Box-shadow La propriété CSS box-shadow a été incluse dans le module "borders" de CSS3 et permet de générer une ombre portée sur n'importe quel élément HTML. Parmi les différentes valeurs utilisables, il est possible d'indiquer le décalage vertical et horizontal ainsi que la force du dégradé. En voici une illustration (Voir le résultat sur votre navigateur) : Syntaxe Compatibilité et utilisation concrète Seuls les navigateurs modernes, reconnaissent la propriété box-shadow.
Adaptation pour Internet Explorer <9 Le filtre Shadow Le filtre Glow La syntaxe : Mise à jour du tutoriel sur les ombrages en CSS3. Comment centrer verticalement sur tous les navigateurs ? Ce tutoriel présente des solutions pour centrer verticalement des éléments de tailles variables dans des conteneurs de hauteur fixe ou fluide.
Les techniques exposées sont compatibles avec tous les navigateurs actuels, à partir d'Internet Explorer 8 et n'utilisent ni <table>, ni JavaScript. Note : ce tutoriel a été initialement rédigé en mai 2010. Il a subi une grosse refonte en mars 2016 pour se mettre à jour. Le temps du valign=middle sur nos tableaux de mise en page est bel et bien révolu. La démocratisation de la sémantique (X)HTML a donné naissance à de jolis gabarits standardisés, mais a également marqué la disparition des techniques simples pour centrer verticalement.
Avec CSS2 et l'arrivée de nouvelles valeurs pour la propriété display reconnues par Internet Explorer 8, beaucoup ont vu en table-cell une nouvelle ère pour le centrage vertical. Pour chaque technique, nous détillerons les avantages, les inconvénients ainsi que les particularités. Bonne lecture ! Voir la démo Ressources. Faire un arrière-plan étirable. Une image mise en arrière-plan (background-image) ne s'étire pas, elle ne fait que se dupliquer.
Pour réaliser un arrière-plan étirable, il faut utiliser une image (balise img) et non un background en CSS. Voici une méthode... Le principe général est de donner les dimensions 100% à l'image, qui occupera alors toute la place de son conteneur (div, cellule,...). Ensuite, pour pouvoir afficher un texte par dessus, il faut donner une position à ce texte (absolu ou relatif). Attention : avec cette méthode, l'image risque d'être très déformée puisque les proportions (hauteur / largeur) ne sont pas respectées.Si vous voulez que les proportions soient gardées, il vous suffit de ne spécifier que la dimension qui devra s'élargir (width OU height)... l'autre dimension va s'adapter mais dans ce cas n'occupera plus 100% de l'espace. 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.
La réalisation de ce genre de prouesse n'est pas si évidente techniquement, contrairement à ce que l'on pourrait croire de prime abord. Comment fait-on ? Nous allons présenter ici deux méthodes parmi celles qui sont possibles : une entièrement en CSS , une autre basée sur jQuery. Construire un panier virtuel en PHP. La création d'un site de vente en ligne passe par l'utilisation d'un panier vituel dans lequel l'internaute pourra déposer des articles au gré de sa navigation dans le catalogue.
Nous allons voir les bases fondamentales pour la création d'un tel panier. Pour construire un panier, nous avons besoins essentiellement d'une variable de session. Il va donc de soi que chaque page du site doit commencer par : Ce que vous ne verrez pas ici Il n'est pas question ici de la manière dont vous récupérez les valeurs dans une base de données.
Ce que vous devez connaître Utilisation de tableaux associatifs et tableaux indexés. Création du panier Pour notre panier, nous avons donc besoin d'une variable de session. Ça, c'est le contenant général de notre panier. Voilà, là, nous avons maintenant un panier avec trois compartiments pour y mettre nos articles. Donnez du style à vos listes d'éléments. Modifier ou designer les puces des éléments de liste n'est pas forcément un exercice de tout repos : nous avons souvent recours aux images de fond bien que d'autres techniques, plus simples à maintenir, mais moins connues, existent.
Faisons le tour des méthodes utilisables aujourd'hui, avec leurs avantages et inconvénients. Viens découvrir mon <li> Que savons-nous exactement de l'élément <li> ? Sa fonction, selon les spécifications HTML, est de structurer un élément d'une liste ordonnée (dont l'ordre est pertinent) ou non ordonnée (dont l'ordre importe peu). Son parent direct est soit un élément <ul> (liste non ordonnée), soit un <ol> (liste ordonnée), et réciproquement les <ul> et <ol> ne peuvent contenir directement que des éléments <li> (pas de conteneur intermédiaire).
En terme d'affichage - donc de rendu CSS par défaut - les éléments <li> ressemblent fortement à des éléments de type block tout en bénéficiant de particularités.