CSS Ombres et Positions PDF

Les ombres Les ombres font partie des nouveautés récentes proposées par CSS3. Aujourd'hui, il suffit d'une seule ligne de CSS pour ajouter des ombres dans une page ! Nous allons ici découvrir deux types d'ombres : les ombres des boîtes ; les ombres du texte....

Les ombres Les ombres font partie des nouveautés récentes proposées par CSS3. Aujourd'hui, il suffit d'une seule ligne de CSS pour ajouter des ombres dans une page ! Nous allons ici découvrir deux types d'ombres : les ombres des boîtes ; les ombres du texte. Site Web Statique box-shadow : les ombres des boîtes La propriété box-shadow s'applique à tout le bloc et prend quatre valeurs dans l'ordre suivant : 1. le décalage horizontal de l'ombre ; 2. le décalage vertical de l'ombre ; 3. l'adoucissement du dégradé ; 4. la couleur de l'ombre. Par exemple, pour une ombre noire de 6 pixels, sans adoucissement, on écrira : p{ box - shadow : 6px 6px 0px black ; } Site Web Statique l'adoucissement du dégradé ; p{ box - shadow : 6px 6px 6px black ; } On peut aussi rajouter une cinquième valeur facultative : inset. Dans ce cas, l'ombre sera placée à l'intérieur du bloc, pour donner un effet enfoncé : p{ box - shadow : 6px 6px 6px black inset ; } Site Web Statique text-shadow : l'ombre du texte Avec text-shadow, vous pouvez ajouter une ombre directement sur les lettres de votre texte ! Les valeurs fonctionnent exactement de la même façon que box-shadow : décalage, adoucissement et couleur. p{ text - shadow : 2px 2px 4px black ; } Site Web Statique 6-6 Le positionnement en CSS Vous allez voir, il existe plusieurs techniques permettant d'effectuer la mise en page de son site. Chacune a ses avantages et ses défauts, ce sera à vous de sélectionner celle qui vous semble la meilleure selon votre cas. En HTML, Il existe cinq façons différentes de créer des dispositions des éléments : Tableaux HTML (non recommandé) Propriété float CSS (méthode ancienne) Flexbox CSS Framework CSS (ex: Bootstrap) Grille CSS Site Web Statique A- Le positionnement flottant Le CSS nous permet de faire flotter un élément autour du texte. On dit aussi qu'on fait un "habillage". la propriété qui fait flotter est float ("flottant" en anglais). Cette propriété peut prendre deux valeurs très simples : left : l'élément flottera à gauche. right : l'élément flottera à droite ! Site Web Statique Il existe en fait une propriété CSS qui permet de dire : " Stop, ce texte doit être en dessous du flottant et non plus à côté ". C'est la propriété clear, qui peut prendre ces trois valeurs : left : le texte se poursuit en-dessous après un float: left; right : le texte se poursuit en-dessous après un float: right; both : le texte se poursuit en-dessous, que ce soit après un float: left; ou après un float: right. Site Web Statique Exemple: Faire flotter une image  En HTML Ceci est un texte normal de paragraphe , écrit à la suite de l' image et qui l' habillera car l' image est flottante  En CSS. imageflottante { float : left ; } Site Web Statique TP Site Web Statique Site Web Statique La propriété box-sizing est une propriété CSS qui permet de contrôler comment la largeur et la hauteur des éléments HTML sont calculées, en prenant en compte ou en ignorant les bordures et les marges. Cette propriété a deux valeurs possibles : content-box (par défaut) : border-box : C'est la valeur par défaut. Lorsque box-sizing Lorsque box-sizing est défini sur border-box, est défini sur content-box, la largeur et la la largeur et la hauteur de l'élément incluent hauteur d'un élément sont calculées en ne également les bordures et les marges. Cela tenant compte que du contenu réel de signifie que si vous définissez une largeur de l'élément, en ignorant les bordures et les 200 pixels pour un élément avec des marges. En d'autres termes, si vous bordures de 10 pixels de chaque côté, la définissez une largeur de 200 pixels pour un largeur totale de l'élément sera toujours de élément avec des bordures de 10 pixels de 200 pixels, et l'espace occupé par le contenu chaque côté, la largeur totale de l'élément sera réduit en conséquence pour s'adapter à sera de 220 pixels. cette largeur. Site Web Statique Site Web Statique Site Web Statique B- Transformez vos éléments avec display Il existe en CSS une propriété très puissante : display. Elle est capable de transformer n'importe quel élément de votre page d'un type vers un autre. Avec cette propriété magique, je peux par exemple imposer à mes liens (originellement de type inline) d'apparaître sous forme de blocs : a{ display : block ; } À ce moment-là, les liens vont se positionner les uns en-dessous des autres (comme des blocs normaux) et il devient possible de modifier leurs dimensions ! Site Web Statique Voici quelques-unes des principales valeurs que peut prendre la propriété display en CSS (il y en a encore d'autres) : Comment je reconnais une balise inline d'une balise block ? block : une balise de type block sur votre page web crée automatiquement un retour à la ligne avant et après. inline : une balise de type inline se trouve obligatoirement à l'intérieur d'une balise block. Une balise inline ne crée pas de retour à la ligne. Site Web Statique Les dimensions par défaut du contenu des éléments HTML vont avant tout être déterminées par le type d’affichage des éléments : en effet, les éléments de type block occuperont par défaut toute la largeur disponible dans leur élément parent tandis que les éléments de type inline n’occuperont que la largeur nécessaire à leur contenu. Notez bien ici que modifier la taille de la boite du contenu d’un élément de type block ne change pas les propriétés fondamentales de celui-ci. J’entends par là qu’un élément de type block commencera toujours sur une nouvelle ligne et ne viendra jamais se positionner à côté d’un autre élément de type block quelle que soit sa taille. Site Web Statique C- Les positionnements absolu, fixe et relatif Il existe d'autres techniques un peu particulières permettant de positionner avec précision des éléments sur la page : Le positionnement absolu : il nous permet de placer un élément n'importe où sur la page (en haut à gauche, en bas à droite, tout au centre, etc.). Le positionnement fixe : identique au positionnement absolu mais, cette fois, l'élément reste toujours visible, même si on descend plus bas dans la page. C'est un peu le même principe que background- attachment: fixed. Le positionnement relatif : permet de décaler l'élément par rapport à sa position normale. Site Web Statique Il faut d'abord faire son choix entre les trois modes de positionnement disponibles. Pour cela, on utilise la propriété CSS position à laquelle on donne une de ces valeurs : absolute : positionnement absolu ; fixed : positionnement fixe ; relative : positionnement relatif. Site Web Statique Mais cela ne suffit pas ! On a dit qu'on voulait un positionnement absolu, fixe ou relatif mais encore faut-il dire où l'on veut que le bloc soit positionné sur la page. Pour ce faire, on va utiliser quatre propriétés CSS : left : position par rapport à la gauche de la page ; right : position par rapport à la droite de la page ; top : position par rapport au haut de la page ; bottom : position par rapport au bas de la page On peut leur donner une valeur en pixels, comme 14px, ou bien une valeur en pourcentage 50%. Site Web Statique Les éléments positionnés en absolu sont placés par-dessus le reste des éléments de la page ! Par ailleurs, si vous placez deux éléments en absolu vers le même endroit, ils risquent de se chevaucher. Dans ce cas, utilisez la propriété z-index pour indiquer quel élément doit apparaître au-dessus des autres. L'élément ayant la valeur de z-index la plus élevée sera placé en dessus des autres. Site Web Statique Le positionnement relatif permet d'effectuer des "ajustements": l'élément est décalé par rapport à sa position initiale. Prenons par exemple un texte important, situé entre deux balises. Pour commencer, je le mets sur fond rouge pour qu'on puisse mieux le repérer : Strong{ position : relative ; left : 55px ; top : 10px ; } Le texte est alors décalé par rapport à sa position initiale. Site Web Statique Site Web Statique TP Site Web Statique d- Les positionnements avec des boites flexibles ou flexbox Le flexbox est un modèle de disposition très puissant qui va nous permettre de contrôler facilement et avec précision l’alignement, la direction, l’ordre et la taille de nos éléments. Avec le modèle des boites flexibles, nous allons pouvoir définir des conteneurs flexibles. Ces conteneurs sont dits « flexibles » car leurs enfants directs vont être des éléments flexibles qui vont pouvoir se réarranger (se redimensionner, se réaligner, etc.) automatiquement dans leur conteneur lorsque celui-ci change de dimension. Le flexbox représente ainsi en quelque sorte une alternative beaucoup plus puissante à la propriété float qui nous permettait de positionner nos boites horizontalement puisqu’on va avoir cette fois-ci un contrôle total sur la disposition des éléments. Le but de cette partie est de vous présenter un nouveau mode d’affichage et de disposition très puissant : la disposition selon un modèle de boites flexibles ou flexbox avec display : flex; (ou display : inline-flex) et les différentes propriétés CSS liées à ce modèle. Site Web Statique Exemple: Soit un élément avec un en-tête de haut niveau à l'intérieur, et un élément contenant trois éléments. Site Web Statique Comment utiliser Flexbox ? Le conteneur flex (flex container) ou bien la boite dite « parent », contient les éléments flex (flex items) ou bien les boites « enfants ». L'idée est définir, en utilisant les différentes propriétés CSS, l'ordre des "boites enfants" dans la "boite parent". Définir le conteneur flex (flex container) Le conteneur est une balise html qui contient d'autres balises html. Site Web Statique Pour commencer, sélectionnons les éléments devant être présentés sous forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la propriété display du parent de ces éléments à disposer. Dans ce cas, comme cela concerne les éléments , nous affectons la valeur flex à l'élément (qui devient un conteneur flex) : section { display: flex; } Site Web Statique Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. Site Web Statique Définir les axes du conteneur flex avec la propriété flex-direction Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes : Axe principal : main axis Le conteneur flex possède un axe principal (main axis) sur lequel les éléments flex peuvent se suivre. Axe secondaire : cross axis Le choix de l'axe principal impose la direction de l'axe secondaire (cross axis) qui lui est toujours perpendiculaire. Le choix des axes est essentiel car leur orientation va déterminer le résultat de l'application des autres propriétés. Site Web Statique Colonnes ou lignes ? Flexbox dispose de la propriété flex-direction pour indiquer la direction de l'axe principal (direction dans laquelle les enfants flexibles sont disposés). Cette propriété est égale par défaut à row : ils sont donc disposés en ligne, dans le sens de lecture de la langue par défaut du navigateur (de gauche à droite, dans le cas d'un navigateur français). Ajoutez la déclaration suivante dans la règle CSS pour l'élément de notre exemple: flex-direction: column; Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple. Site Web Statique L’axe principal est défini par la propriété flex-direction qui peut prendre les valeurs suivantes: row : les éléments flex se suivent sur une ligne, ce qui correspond à la direction normale du sens d'écriture du document row-reverse : les éléments flex se suivent sur une ligne en ordre inversé. ce qui correspond à la direction inverse du sens d'écriture du document column : les éléments flex se suivent sur une colonne. column-reverse : les éléments flex se suivent sur une colonne en ordre inversé Le choix des axes est essentiel car leur orientation va déterminer le résultat de l'application des propriétés suivantes : justify-content : définit comment les éléments flex sont positionnés le long de l'axe principal ; align-items : définit comment les éléments flex sont positionnés le long de l'axe secondaire ; align-self : définit comment un seul élément flex est positionné le long de l'axe secondaire. Site Web Statique Aligner le long de l'axe principal : la propriété justify-content La propriété "justify-content" permet d'aligner les éléments le long de l'axe principal Les valeurs de la propriété "justify-content" : flex-start, flex-end, center, space-around, space-between. flex-start => les éléments flexibles sont placés à partir de la ligne de début du conteneur sur l'axe principal. flex-end => les éléments flexibles sont placés à partir de la ligne de fin du conteneur sur l'axe principal center => les éléments flexibles sont centrés le long de l'axe principal. space-between => l'espace disponible est réparti de façon égale entre chaque élément. space-around => l'espace disponible est réparti de façon égale entre chaque élément, y compris au début et à la fin. Site Web Statique Aligner le long de l'axe secondaire : la propriété align-items La propriété "align-items" peut prendre 5 valeurs : stretch, flex-start, flex-end, center et baseline. stretch => les éléments flexibles sont étirés le long de l'axe secondaire. flex-start => les éléments flexibles sont alignés sur la ligne de début de l'axe secondaire. Site Web Statique flex-end => les éléments flexibles sont alignés sur la ligne de fin de l'axe secondaire. center => les éléments flexibles sont centrés sur la ligne d'axe secondaire. baseline => les éléments flexibles sont alignés sur leur ligne de base (les textes sont alignés). Site Web Statique Enveloppement Problème: quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Site Web Statique Maitriser les passages à la ligne : la propriété flex-wrap La propriété "flex-wrap" peut prendre les valeurs suivantes : flex-wrap : nowrap - c’est la valeur initiale. Si les éléments flexibles sont trop larges pour tenir dans leur conteneur, ils débordent du conteneur flex-wrap : wrap - si les éléments flexibles sont trop larges pour tenir dans le conteneur, ils passent automatiquement sur la ligne suivante (du haut vers le bas) flex-wrap : wrap-reverse - si les éléments flexibles sont trop larges pour le conteneur, ils passent automatiquement sur la ligne suivante (du bas vers le haut) Site Web Statique Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour : flex-wrap: wrap; La propriété flex est une propriété raccourcie qui définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur. Site Web Statique Ajoutez aussi la déclaration suivante à votre css pour : flex: 200px; La déclaration flex: 200px pour les éléments article signifie que chacun aura au moins 200px de large ; Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie. Site Web Statique Forme abrégée « flex-flow » Notez maintenant qu'il y a une forme abrégée pour flex-direction et flex-wrap  flex-flow. Ainsi, par exemple, vous pouvez remplacer : flex-direction: row; flex-wrap: wrap; Par: flex-flow: row wrap; Site Web Statique Taille modulable des éléments flex Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Site Web Statique Ajoutez d'abord : Sur CSS: article { Article:last-child { flex: 1; flex: 2; } } Maintenant, lorsque vous actualisez, vous voyez que le troisième occupe deux fois plus de largeur disponible que chacun des deux autres. Site Web Statique Positionner les éléments à l'intérieur d'un conteneur flex Les éléments flexibles peuvent être alignés, justifiés et distribués le long des axes de leur conteneur grâce à différentes propriétés. Dans l’exemple suivant, on a choisi une direction "row", ce qui signifie que l'axe principal est l'axe horizontal et que l'axe secondaire est l'axe vertical..conteneur { background-color : blue; height : 230px; élément 1 width : 500px; élément 2 display : flex; élément 3 flex-direction : row; élément 4 align-items : stretch | flex-start | flex-end | center | baseline; justify-content : flex-start | flex-end | center | space-around | space- between | space-evenly; } Site Web Statique Remarque Les simples exigences de mise en page suivantes sont difficiles sinon impossibles à réaliser de manière pratique et souple avec ces outils : 1-Centrer verticalement un bloc de contenu dans son parent ; 2-Faire que tous les enfants d'un conteneur occupent tous une même quantité de hauteur/largeur disponible selon l'espace offert ; 3-Faire que toutes les colonnes dans une disposition multi-colonnes aient la même hauteur même si leur quantité de contenu diffère. La méthode Flexbox facilite la structuration et la mise en page souple et réactive, sans utiliser les marges et le positionnement. Site Web Statique Remarque: Les propriétés des éléments flex: La propriété order permet de contrôler l'ordre dans lequel les éléments apparaissent dans le conteneur flex. La propriété flex-grow permet de définir l'agrandissement possible d'un élément proportionnellement aux autres. La valeur de cette propriété est un nombre. Par exemple, si "flex-grow : 2" pour un élément, il occuepra (si possible) deux fois plus d'espace que les autres. La propriété flex-shrink définit la possibilité pour un élément de rétrécir. Cette propriété accepte uniquement des valeurs positives La propriété flex-basis définit la taille par défaut d'un élément. La propriété flex est une propriété raccourcie combinant les propriétés "flex-grow", "flex-shrink" et "flex-basis" La propriété align-self correspond à l'application de la propriété "align-items" pour un seul élément Site Web Statique a propriété flex peut être définie avec une, deux ou trois valeurs. Avec une valeur, la syntaxe doit être : un nombre sans unité : celui-ci est alors interprété comme la valeur de flex-grow ou une valeur de largeur valide : celle-ci est alors interprétée comme la valeur de flex- basis ou le mot-clé none. Avec deux valeurs la première doit être un nombre sans unité qui correspond à la valeur de. la seconde valeur doit être : un nombre sans unité : celui-ci est alors interprété comme la valeur de ou une valeur de largeur valide : celle-ci est alors interprétée comme la valeur de Site Web Statique Avec trois valeurs la première valeur doit être un nombre sans unité : celui-ci est alors interprété comme la valeur de la deuxième valeur doit être un nombre sans unité : celui-ci est alors interprété comme la valeur de la troisième valeur doit être une valeur de largeur valide : celle-ci est alors interprétée comme la valeur de Site Web Statique TP Site Web Statique Site Web Statique Site Web Statique 6-7 Création d'apparences dynamiques Le CSS nous permet aussi de modifier l'apparence des éléments de façon dynamique, c'est-à-dire que des éléments peuvent changer de forme une fois que la page a été chargée. Nous allons faire appel à une fonctionnalité puissante du CSS : les pseudo-formats (pseudo-element et pseudo-class) Selector : pseudo-class { property: value; } Selector :: pseudo-element{ property: value; } Site Web Statique Une pseudo-class est utilisée pour définir un état spécial d'un élément. Par exemple, il peut être utilisé pour : Styliser un élément lorsqu'un utilisateur passe la souris dessus Stylez les liens visités et non visités différemment Styliser un élément lorsqu'il obtient le focus selector:pseudo-class { property: value; } Site Web Statique Au survol :hover signifie "survoler", peut donc se traduire par : "Quand la souris est sur le lien " (quand on pointe dessus). a: hover { text - decoration : underline ; color : green ; } vous pouvez modifier l'apparence des paragraphes lorsqu'on pointe dessus : p: hover { font-size:24px; color : green ; } Site Web Statique Au clic et lors de la sélection Vous pouvez interagir encore plus finement en CSS. Nous allons voir ici que nous pouvons changer l'apparence des éléments lorsque l'on clique dessus et lorsqu'ils sont sélectionnés ! :active au moment du clic Le pseudo-class :active permet d'appliquer un style particulier au moment du clic. En pratique, il n'est utilisé que sur les liens. On peut par exemple changer la couleur de fond du lien lorsque l'on clique dessus : a: active { background - color : # FFCC66 ; } Site Web Statique :focus lorsque l'élément est sélectionné Là, c'est un peu différent. Le pseudo-class :focus applique un style lorsque l'élément est sélectionné. a: focus { background - color : # FFCC66 ; } Site Web Statique Lorsque le lien a déjà été consulté Par défaut, le navigateur colore le lien en un violet, Vous pouvez changer cette apparence avec :visited (qui signifie "visité" ). a: visited { color : #AAA; } Remarque On dispose de pseudo-formats en CSS pour changer le style des éléments requis (:required) et invalides (:invalid). : required { background - color : red; } Site Web Statique Sélectionnez et stylisez chaque élément qui est le premier enfant de son parent : p:first-child { background-color: yellow; } Site Web Statique Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle. Ainsi, le pseudo-élément ::first-line permettra de ne cibler que la première ligne d'un élément visé par le sélecteur. p::first-line { color: blue; text-transform: uppercase; } Site Web Statique le pseudo-élément ::selection permettra de ne cibler que la partie sélectionner d'un élément visé par le sélecteur. p::selection { color: white; background-color: black; } le pseudo-élément ::first-letter Sélectionne et stylise la première lettre de chaque élément : p::first-letter { font-size: 200%; color: #8A2BE2; } Site Web Statique