Mise en page CSS avancée grâce à la propriété display
L'abandon par de plus en plus d'intégrateurs de l'utilisation de tableaux pour l'élaboration de mises en page a indiscutablement apporté de nombreux avantages, mais également son lot d'inconvénients. Parmi ceux-ci, un majeur: le centrage vertical simple et automatisé du contenu d'un objet. Les habitudes de plusieurs années de développement par tables ont laissé des traces, des habitudes ancrées de manière indélébile qui ne sont pas systématiquement préjudiciables; c'est entre autres le cas du recours à la propriété vertical-align. Fort de ce constat, et vu la puissance qu'offre les cellules de tableaux en terme d'alignement vertical de leurs contenus, la spécification CSS admet logiquement l'attribution de ce comportement à tout élément qui en nécessiterait. Prenons un exemple simple de disposition d'un texte scindé en trois paragraphes que l'on souhaite agencer en drapeau: Logiquement, ma structure HTML sera des plus simplistes:
Leçon 15: Les dernières astuces
Félicitations, vous êtes à la dernière leçon. Donc maintenant je sais tout ? Vous avez beaucoup appris et vous êtes capable de fabriquer vos propres sites Web ! Néanmoins, vous ne connaissez que les bases et il y a encore beaucoup à maîtriser. Mais les fondations sont solides. Dans cette dernière leçon, vous trouverez quelques astuces finales : Premièrement, c'est une bonne idée que de conserver l'ordre et la structure dans vos documents HTML. Comment s'améliorer ? Avant tout, il importe de continuer à travailler et expérimenter avec les choses apprises dans ce tutoriel. Cherchez sur Internet des exemples et articles sur HTML. Lisez et posez des questions dans la rubrique Forums. Enfin, et non la moindre, dès que vous vous sentirez prêt(e), vous devriez poursuivre avec l'apprentissage de CSS dans notre tutoriel CSS. Une dernière chose : nous vous souhaitons des heures d'amusement avec votre nouvel ami HTML. À bientôt sur Internet :-) << Leçon 14: Les standards du Web et la validation
Initiation au positionnement en CSS
Pour éviter l'usage inconsidéré des tableaux de mise en page, l'utilisation correcte de chaque élément (balises div, p, h1, ul, li, etc.) ainsi que leur positionnement en CSS est dorénavant indispensable. Les éditeurs HTML visuels n'utilisent qu'une infime partie des possibilités des balises (faussement nommées "calques" en général), ce qui les rend souvent peu compatibles et peu pratiques. Cet article en deux parties explique comment positionner les éléments en CSS de façon optimale. Résumé et pense-bête. Tous les éléments (balises) HTML peuvent être positionnés, décorés, dimensionnés, ... grâce aux styles CSS. Les balises de bloc et les balises en-ligne Ce chapitre sur la structure des balises est primordial, vous devez auparavant avoir consulté le tutoriel sur les bloc/en-ligne. Voici un résumé pour les lecteurs pressés les éléments de rendu "bloc" se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Ancêtre, Parents, Enfants, Frères Le Flux
CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web.
La transparence de couleur avec RGBa en CSS3
Le module de couleurs de CSS3 introduit la notion de transparence dans les valeurs associées à une couleur, l'écriture RGBa. Cette composante de la couleur permet de jouer sur les effets d'opacité entre les différentes couches d'éléments HTML. Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity (également CSS3 mais assez ancienne déjà) : cette dernière est une propriété qui s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement. De ce fait, RGBa est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc. Voici une illustration du principe de transparence de la couche Alpha (RGBa) (Voir le résultat (RGBa) sur votre navigateur) : Principe de la notation RGBa <div><h1>Joli titre</h1></div>
Kit CSS gratuit à télécharger
La maquette du site que vous êtes en train de consulter fait largement appel aux CSS et propose une mise en page en « pseudo-frames » permettant de faire défiler le contenu tout en préservant des menus et un bandeau fixes. Cette mise en page particulière est gérée par plusieurs feuilles de styles conditionnelles qui rendent ce système compatible avec l’ensemble des navigateurs du marché. Elle comporte également des « présentations alternatives » (Changer l’apparence du site, dans le menu de gauche). Les kits que nous proposons en téléchargement sont destinés à faciliter l'application de certaines ou de l'ensemble de ces fonctionnalités sur votre site. Ces kits ne doivent surtout pas être considérés comme des "modèles" irréprochables. Ces kits se déclinent en plusieurs versions permettant d’approfondir tel ou tel aspect technique. Pseudo-frames : comment ça marche ? Présentations alternatives : comment ça marche ? Pop-up universel. Kit CSS complet et gratuit / sans Php.
Transitions CSS3
Beaucoup d'intégrateurs en ont rêvé : animer les pages web uniquement à l'aide de styles CSS, sans apport de JavaScript. Grâce aux dernières évolutions du langage et au module CSS3 Transitions, il est désormais possible de réaliser des transitions basiques à l'aide de CSS dans les navigateurs récents (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+) La spécification est le document qui définit de manière claire, précise et univoque le langage. La spécification relative au module est disponible à l'adresse suivante : Remarque : Les moteurs récents implémentent la spécification. Principe de base Le principe de base d'une transition CSS3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché : soit via une pseudo-classe telles que :hover, :focus ou :active soit via JavaScript La ou les propriété(s) à animer La durée de l'animation Exemples concrets
general
