5. Développement Web - CSS Extra

5.1. Introduction

Nous allons voir dans ce chapitre des notions liées aux CSS mais qui ne sont pas à connaître pour le contrôle continu. Elles permettent d'agrémenter une page pour la rendre plus conviviale et attrayante.

Les notions traitées dans cette page sont étudiées afin de découvrir d'autres aspects des CSS.

5.2. Effets visuels simples

Il existe plusieurs propriétés qui permettent de créer des effets visuels qui peuvent s'appliquer à du texte, à des images, ou à tout autre élément grâce à l'utilisation de propriétés comme text-shadow, box-shadow, filter, click-path, mask-image.

5.2.1. L'opacité

L'opacité désigne le degré de transparence ou de visibilité d'un élément. Elle est contrôlée par la propriété opacity qui accepte une valeur numérique comprise entre 0 (complètement transparent) et 1 (complètement visible).

Voici un exemple avec plusieurs valeurs d'opacité appliquées à une image :

5.2.2. Décoration du texte

La propriété text-decoration permet de modifier l'apparence d'un texte en y ajoutant des effet simples comme underline, overline, line-through, blink :

Texte souligné ondulé : underline wavy red

Texte surligné en pointillés : overline dotted red

Texte barré avec tirets : line-through dashed green

La valeur blink ne fonctionne plus, il faut passer par une animation (voir plus loin sur cette page).

On peut également modifier la propriété text-decoration-thickness afin de moduler l'épaisseur de la ligne affichée. Dans les exemples ci-dessus elle est définie à 3px.

Consultez la documentation liée à cette propriété.

5.2.3. Ombre du texte

Il est possible de donner des effets d'ombre sur un texte. On utilise pour cela la propriété text-shadow qui demande plusieurs paramètres :

text-shadow: h-shadow v-shadow blur-radius color

• h-shadow : déplacement horizontal en pixels
• v-shadow : déplacement vertical en pixels
• blur-radius : rayon de flou en pixels
• color : couleur de l'ombre

Exemple avec un niveau d'ombrage :

Exemple avec deux niveaux d'ombrage :

Effet 3D :

Gravage :

Relief :

Veuillez consultez la documentation afin d'en savoir plus.

5.2.4. Boîte aux bords arrondis

La propriété border-radius permet de créer une boîte aux bords arrondis. Elle peut consister en une seule distance qui, plus elle est grande, arrondit plus les bords.

On peut également utiliser deux valeurs :

voire quatre valeurs :

On peut aussi créer un effet elliptique :

Consultez la documentation officielle pour de plus amples informations.

5.2.5. Ombre de boîte

La propriété box-shadow permet de donner un effet d'ombre à une boîte :

On fixe :

• un décalage horizontal (10px)
• un décalage vertical (10px)
• un rayon de flou (20px)
• une couleur de l'ombre (rgba avec transparence 0.5)

5.2.6. Filtrer les images

La propriété filter permet d'appliquer des effets visuels comme des flous, des ajustements de couleur, ou des déformations sur un élément telle une image. On peut utiliser

• blur(5px) afin d'ahouter du flou
• constrast(150%) afin d'augmenter ou diminer le contraste (la netteté)
• sepia(70%) afin de donner un aspect vieilli
• invert(70%) afin d'inverser les couleurs
• brightness(1.2) afin d'ajuster la luminosité (> 1, plus clair)
• grayscale(50%) applique un effet noir et blanc

5.2.7. Mélange de calques d'arrière-plan

On peut définir un fond avec :

• une image
• et un gradient linéaire de couleurs passant du rouge au jaune

puis mixer (blend) les deux avec la propriété background-blend-mode :

• le fond est : background: url('img/mobo.jpg'), linear-gradient(to bottom, red, yellow)
• la fusion est de type : multiply, hard-light ou difference

Voir la documentation pour en savoir plus.

5.2.8. Masque d'image

On est susceptible d'ajouter un masque à un élément, en utilisant des images ou des dégradés pour contrôler la visibilité comme sur cet exemple :

5.2.9. Découpe

Grâce à la propriété clip-path on peut découper un élément en une forme définie par des points en pourcentage (x% y%).

On peut par exemple utiliser un cercle : clip-path: circle(50% at center); qui extrait un cercle d'une boîte de carrée de 200px :

Pour obtenir un pentagone, on utilise clip-path: polygon(...): :

• 50% 0% : haut centre (x,y)
• 100% 25% : coin supérieur droit
• 80% 100% : bas droit
• 20% 100% : bas gauche
• 0% 25% : coin supérieur gauche

5.3. Rotation, translation, mise à l'échelle

On dispose de la possibilité de modifier la disposition des éléments en appliquant des opérations géométriques comme la translation, la rotation ou la mise à l'échelle.

5.3.1. Rotation

On utilise la propriété transform dont la valeur est rotate en spécifiant entre parenthèses le nombre de degrés de la rotation

5.3.2. Mise à l'échelle

On utilise la propriété transform dont la valeur est scale en spécifiant entre parenthèses le ratio pour le changement.

5.3.3. Translation

On utilise la propriété transform dont la valeur est translateX et/ou translateY en spécifiant entre parenthèses le nombre de pixels pour le déplacement.

5.3.4. Transition

La propriété transition dans le container permet de définir comment va être réalisée une transformation (rotation, mise à l'échelle, translation). Elle utilise différentes valeurs :

transition: [property] [duration] [timing-function] [delay];

• property indique quelle propriété doit être impactée (ex: background-color, transform), utilisez all pour impacter toutes les propriétés
• duration temps nécessaire pour réaliser l'animation (ex: 0.5s, 300ms)
• timing-function définit le changement de transition (ex: ease, linear, ease-in, ease-out)
• delay (optionnel) indique le temps d'attente avant de commencer l'animation (ex: 1s)

Voir la documentation afin de comprendre les changements de type ease, linear, ease-in, ease-out.

5.4. Animations

5.4.1. Animation simple

Les animations sont enregistrées dans une structure appelée keyframes. Il s'agit de décrire l'évolution des propriétés d'un objet au cours du temps comme dans l'exemple suivant pour lequel on fait apparaître et disparaître un carré.

Pour cela on change l'opacité (on pourrait également jouer sur la propriété display) :

• opacité 0 (invisible) à 0% de l'animation (début)
• opacité 0.5 (moyennement visible) à 50% de l'animation
• opacité à 1 (visible) à 100% de l'animation (fin), couleur rouge

L'animation :

• a été appelée fade_in
• possède une durée de 5s
• elle est affectée à tout élément de classe square
• elle se répète indéfiniment (infinite)

5.4.2. Animation plus complexe

Dans cet exemple on déplace deux carrés suivant la même animation mais l'animation du second carré commence 2s après la première :

5.4.3. Animation complexe

Voici deux exemples avec des flocons de neige :

Le premier utilise des cercles et une image de fond: snowflake_css1.html.

Le second utilise une image de flocon et un fond avec gradient : snowflake_css2.html.

Voir d'autres animations de ce genre sur le site https://freefrontend.com.

Voici quelques animations ou effets CSS en particulier :

• paysage
• Neon
• Neon open
• Transition

5.5. Dernier point

Dernier point qui n'a rien à voir avec CSS mais concerne le TP4. Comment faire pour calculer la moyenne des notes avec leurs coefficients dans la page resultats.html.

Les notions ci-après seront vues en L2 et L3.

Il est impossible de faire le calcul directement en HTML ou CSS, ces deux langages ne sont pas des langages de programmation mais des langages de description de données.

Il faut pour cela utiliser un langage spécifique comme PHP ou Javascript:

• le langage PHP (Personal Home Page Tools, devenu PHP Hypertext Preprocessor), conçu par par Rasmus Lerdorf en 1994, est un langage de programmation impératif et objet interprété qui permet de gérer du code HTML
• le langage Javascript (à ne pas confondre avec Java), conçu par Brendan Eich (1995), est un langage de programmation de scripts interprété, orienté objet (à prototype), impératif et fonctionnel, principalement employé dans les pages web interactives et intégrés aux navigateurs

5.5.1. Première solution : PHP

Un code PHP à l'intérieur de la page génère les lignes de la table et réalise les calculs.

Matière	Note	Coef.
Français	12	2
Mathématiques	14	6
Physique	16	4
Total :	14.33

Au final, PHP génèrera :

5.5.2. Deuxième solution : Javascript

La table est féjà générer au format HTML mais ne contient pas la moyenne. Celle-ci est calculée au chargement de la page. Il suffit pour cela de donner aux cellules qui contiennent des données, une classe, par exemple node.

Grâce à Javascript on récupère les notes et on réalise le calcul.

L'exemple qui suit est à adapter en ajoutant une colonne pour les coefficients.

<< CSS