» Archives du blog » Styliser le cours de CSS Avancé Niquelao Styliser le cours de CSS Avancé 8 novembre 2009, par Rumoroso Il y a quelques jours, j’étais à Saragosse pour donner un cours sur le CSS avancé (inclus dans le catalogue de cours de CTIC ). Comme il est logique, et particulièrement parce qu’il s’agissait d’un cours sur les feuilles de style et les techniques avancées, j’ai préparé la présentation dans rumoslide (comme 95 % des utilisateurs l’appellent ainsi, au final il gardera ce nom).

Le fait est que l’étendue du programme (ou le temps serré) m’a laissé sur ma faim quant à commenter certains détails sur les styles que j’ai employés dans la présentation . C’est précisément pour cela que je me suis mis à écrire cet article (bon, et aussi pour reprendre l’habitude d’écrire périodiquement sur le blog). Comme il est logique, le début c’est le début, donc aujourd’hui c’est au tour de la page de couverture : Ce que je veux commenter à propos de la couverture, c’est ce que j’ai fait avec le titre de la présentation .

Mon idée était de mettre en valeur les deux mots ( CSS et avancé ), en essayant de le faire avec suffisamment d’emphase individuelle pour chacun, mais en veillant à ce qu’ils ne perdent pas leur union. Pour cela, entre autres choses, j’ai joué avec la taille et la couleur des polices (grande et claire vs plus petite et sombre) et avec leur position (superposition partielle). D’abord, le code HTML que j’ai utilisé :

CSS Avancé

Et ensuite le CSS et son explication : h1 { font-size: 7em; color: #ffc8a3; line-height: .8; font-style: italic; margin: .5em 0 .2em 20%; border-bottom: 3px solid; position: relative; overflow: hidden; } L’idée a été de styliser d’abord les lettres CSS de l’en-tête.

Comme le reste du texte est inclus dans un span , on peut appliquer un style générique au h1 pour ensuite compenser l’effet sur celui-ci. Ainsi donc, j’ai déclaré une taille de police suffisamment voyante (7em), une couleur qui s’harmonise de manière adéquate avec le reste des styles employés et qui ne soit pas trop intense, la hauteur de ligne et le style italique. De plus, je lui ai appliqué des marges, en tenant compte du fait que je voulais le séparer de la gauche de 20 % de la largeur totale.

Enfin, je lui ai mis une ligne inférieure de 3px (la couleur est héritée de la typographie). Avec ces styles, comme j’ai obtenu la superposition des mots grâce au positionnement absolu (j’en parlerai plus loin), j’ai eu recours à l’initialisation des coordonnées des descendants de l’en-tête en le positionnant en relatif.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Le contrôle sur ce qui déborde (overflow: hidden) je l’ai ajouté a posteriori (parce que j’ai vu que le résultat était élégant) après avoir stylisé le reste de l’en-tête. Avec cela, on obtient que la partie inférieure du mot avancé masque en dépassant sur les limites du h1 . Ensuite j’ai stylisé le mot avancé : h1 :first-child { font-size: .5em; font-style: normal; color: #222; position: absolute; top: 60%; left: 15%; opacity: 0.75; -moz-opacity: 0.75; -ms-filter: alpha(opacity=75); } Pour éviter le balisage supplémentaire, j’ai joué avec les sélecteurs.

Le terme avancé se trouve dans le premier élément descendant du h1 , donc la sélection se fait au moyen de la pseudo-classe :first-child . D’abord, changer les propriétés de la police (réduire la taille, changer la couleur et supprimer l’italique).

La superposition, je l’ai faite au moyen du positionnement absolu (les coordonnées sont prises par rapport à la position du h1 puisqu’on lui a déclaré un positionnement relatif). Enfin, je lui ai donné une touche supplémentaire en jouant avec son opacité (j’ai eu recours aux propriétés avec préfixes spécifiques qui permettent qu’elle s’affiche correctement dans les versions les plus récentes des navigateurs). Et maintenant la question : comment ai-je obtenu l’effet du dégradé blanc ? La réponse est simple et se base sur le code suivant : h1 span + span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent url(img/degrada.png) left bottom repeat-x; } Le span vide que j’ai ajouté (et qui a sûrement déjà semblé bizarre à certains) est celui qui se charge de cet effet.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

En réalité, l’idée est simple. On peut obtenir l’effet en plaçant sur le texte une image png avec un dégradé de couleur allant du blanc au transparent (le blanc est dû au fond de la page). Pour cela, j’ai sélectionné le span au moyen d’un sélecteur contextuel (c’est le span qui va derrière un autre span , donc span + span ), je l’ai positionné en absolu et j’ai fait qu’il occupe 100 % de la largeur et de la hauteur de l’en-tête (en positionnant le span , il accepte désormais des dimensions).

Ensuite, je lui ai ajouté l’image du dégradé comme fond aligné en bas (comme c’est une image étroite, je l’ai fait se répéter sur l’axe x). Et voilà… Le reste des styles appliqués à la couverture (pied de page et logo) reste constant tout au long des diapositives de la présentation. En général, ils sont assez simples, donc je les commenterai rapidement (peut-être que je les détaillerai quand je mentionnerai les styles d’autres sections dans des articles ultérieurs).

Dire que le pied de page est un conteneur générique qui inclut une liste (à laquelle j’ai retiré les puces). Je lui ai mis une couleur de fond intense proche de l’orange CTIC et une image (également en fond) placée à droite.

De plus, je l’ai positionné en fixed en bas de l’écran parce que je ne voulais pas qu’il se déplace avec le scroll vertical (cela m’a servi d’exemple pendant le cours). Concernant le logo, c’est un svg inclus dans l’élément object . Ce que j’ai fait, c’est le positionner en absolu là-haut et le maintenir ainsi pendant toute la présentation. Bientôt, je commenterai quelques autres exemples de style que j’ai appliqués tout au long de la présentation, comme par exemple la façon dont j’ai obtenu le fond bicolore avec les lettres CSS, etc.

Styliser le cours de CSS Avancé Catégorie : CSS —> 3 commentaires Styliser le cours de CSS Avancé 8 novembre 2009 […] Texte complet sur Niquelao : Styliser le cours de CSS Avancé […] Niquelao » Archives du blog » Une autre touche de style dans le Cours de CSS 11 novembre 2009 […] comme je l’ai déjà fait dans l’entrée précédente (styliser le cours de CSS Avancé), je vais continuer à commenter certains des styles que j’ai utilisés dans la présentation du cours de CSS pour Saragosse[…] Une autre touche de style dans le Cours de CSS 12 novembre 2009 […] comme je l’ai déjà fait dans l’entrée précédente (styliser le cours de CSS Avancé), je vais continuer à commenter certains des styles que j’ai utilisés dans la présentation du cours de CSS […] Tu peux suivre les commentaires grâce au flux RSS 2.0 .

Tu peux aussi envoyer un trackback depuis ton site. Article précédent : The best… made with CSS Article suivant : Une autre touche de style dans le Cours de CSS —> —> —> Cette œuvre est sous licence Creative Commons .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.