Quelques techniques CSS¶

Ci-bas, vous trouverez des exemples d'attributs CSS et leur utilisation qui peuvent permettre de créer des interfaces aux effets visuels simples, mais efficaces.

Image de fond¶

Pour insérer une image de fond sur un élément, on utilise l'attribut CSS :

background-image

!note "image de fond" On peut appliquer une image de fond sur toutes les balises de type bloc, ainsi que directement sur le bodyde la page.

Exemples sur `body`¶

Voici un exemple d'image de fond appliquée sur le body, avec une petit image source :

  body {
    background-image: url(../img/petite_salade.jpg);
  }

small

Remarquez que l'image est automatiquement répétée sur toute la page.

Certaines images sont faites pour être appliquées en mosaique alors que d'autres non.

Ici, on ne veut pas de mosaique, on doit donc ajouter du CSS pour empêcher ce comportement.

Empêcher la mosaique¶

On ajoute l'attribut background-repeat pour éviter la mosaique.

body {
    background-image: url(../img/petite_salade.jpg);
    background-repeat: no-repeat;
}

Couvrir le body¶

Parfois, l'image ne possède pas les bonnes dimensions pour couvrir le body.

Ainsi, lorsqu'on bloque la mosaique, l'image ne couvre plus tout le fond de la page:

small

On peut forcer l'image à couvrir tout le fond de body :

body {
    background-image: url(../img/fond.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

cover

L'image est redimensionnée pour remplir l'espace, mais conserve ses proportions.

Ainsi, il est fort possibe que la totalité de l'image ne soit pas visible lorsqu'elle est étirée pour couvrir la largeur si les proportions ne sont pas les mêmes que celles de l'écran.

Empêcher le défilement¶

Une grande image sur le body défile avec la page par défaut :

defilement

Pour éviter ce défilement et fixer l'image :

body {
    /*Image de fond*/
    background-image: url(../img/plantes.jpg);
    background-repeat: no-repeat;  
    background-size: cover;
    background-attachment: fixed;

Image de fond sur un bloc¶

Appliquer une image de fond sur un bloc fonctionne de la même façon : avec l'attribut background-image.

taille du bloc

Un bloc prend uniquement la hauteur nécessaire pour afficher son contenu. Donc l'image de fond qui n'a pas les bonnes dimensions ne s'affichera complètement si le contenu n'est pas suffisamment grand.

Exemple :

Fond

Il faut donc ajouter de l'espacement intérieur pour agrandir le bloc :

header{
  background-image:url(../img/header.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

Fond

Coins arrondis¶

Nous avons vu que dans les débuts du Web 2.0, tout avait les coins arrondis sur une page web! C'était une nouveauté avec le CSS3.

De nos jours, on utilise encore parfois cette technique, généralement pour créer des tuiles ou des boutons.

L'attribut border-radius permet de définir des coins arrondis pour un élément donné sur la page.

On peut appliquer des coins arrondis sur un élément qui a une couleur ou une image de fond ou encore sur un élément qui a une bordure (sans couleur de fond) ou les deux!

Exemple:

Coins ronds

En donnant une seule valeur à border-radius, on définit ainsi les quatre coins. Mais il est possible de définir des valeurs différentes pour chacun des coins et ainsi obtenir des formes différentes. Pour ce faire, soit qu'on attribut 4 valeurs à l'attribut border-radius, soit qu'on utilise les quatre attributs border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

Au même titre, on peut fournir 3 ou même 2 valeurs, ou utiliser qu'une seule, deux, ou trois des quatre attributs, et le navigateur sera capable d'appliquer le style en suivant le fonctionnement démontré dans les exemples suivants.

Exemples :

Coins ronds

Évidemment, il existe d'autres exemples d'utilisation de l'attribut border-radius, à un point d'obtenir des ellipse! Il suffit de faire des essais...

Ombrages¶

Parfois, pour mettre en évidence ou encore pour donner un aspect surélevé à un élément de la page, on ajoutera de l'ombrage. Ceci est une pratique utilisée souvent pour afficher des fenêtres déroulantes (dropdown).

popup

Il existe deux attributs CSS pour ajouter de l'ombrage :

1- box-shadow : ajoute un ombrage à une balise de type bloc.

Box-shadow

2- text-shadow : ajoute un ombrage sur du texte.

L'ombrage sur le texte fonctionne pratiquement de la même façon que l'ombrage sur des blocs.

La seule différence, c'est que la valeur optionnelle d'étalement (spread) n'existe pas dans l'attribut text-shadow.

On a donc les valeurs suivantes :

décalage en X - obligatoire
décalage en Y - obligatoire
estompement (blur) - optionnel
couleur - optionnel

Exemples :

Text-shadow

Opacité ou transparence¶

On obtient souvent des résultats intéressants dans la présentation du contenu en appliquant des effets de transparence sur des éléments de la page.

Ceci est utile lorsque, par exemple, on veut voir une image de fond à travers un bloc de contenu texte.

Il existe deux façons d'appliquer de la tranparence :

Opacity : rend transparent tout le bloc y compris son contenu
rgba : rend le bloc transparent, mais pas son contenu

Exemple de comparaison:

Opacity

Transitions¶

Les transitions en CSS permettent d'ajouter du dynamisme sur des éléments de la page. Une transition s'effectue sur des attibuts de style tels que la largeur, la hauteur, la couleur, etc.

La transition s'effectue au moment où l'attribut (ou les attributs) indiqué(s) change(nt) de valeur.

Pour qu'une transition soit fonctionnelle, il faut minimalement deux éléments d'information :

l'attribut sur lequel ajouter un effet de transition
la durée de l'effet

Il existe d'autres valeurs possibles, notamment :

transition-timing-function : courbe de vitesse de transition
transition-delay : délai avant le début de la transition

Exemples:

Transition

Style :

#transitionOne {
  background-color : purple;
  color: white;
  width: 25rem;
  transition: width 2s, font-size 2s;
}

#transitionOne:hover {
  width: 50rem;
  font-size: 2rem;
}

Exemple de menu en images

Transition

Contenu

<div id="div3">
    <img src="img/assassin.png" alt="assassin">
    <img src="img/dragon.png" alt="dragon">
    <img src="img/skull.png" alt="skull">
    <img src="img/hatman.png" alt="hatman">
</div>

Style

img{
    width:3rem;
    transition: padding-left 0.2s ease;
}

#div3{
    width:6rem;
    height:12rem;
}

#div3 img:hover{
        padding-left: 1rem;
}

Pour plus d'information sur les transitions, visiter la page CSS Transitions du site w3Schools.

Transformations¶

Les transitions, c'est bien, mais une transition sur certaines propriétés comme la largeur (width) ont un impact sur toute la page.

Exemple:

Transition

Ainsi, quand on veut modifier la taille des objets sans décaler le reste du contenu de la page, il peut être préférable d'utiliser les transformations sur les transitions.

Exemple :

Transformations

Le CSS pour obtenir ce résultat est vraiment tout simple :

img {
    transition: transform 0.15s;
}

img:hover {
    transform: scale(1.5);
}

Défilement doux (smooth scrolling)¶

Vous avez sans doute déjà vu des sites web où les liens d'ancrage (qui mènent soit plus haut ou plus bas sur la page), font défiler la page de façon douce, graduellement.

Scroll

Grâce au CSS 3, il suffit d'ajouter dans la feuille de style, une seule propriété à la balise racine du site web .

html {
    scroll-behavior: smooth;
}

Bouton retour¶

Pour créer un bouton de retour vers le haut de page très simple, on utilise un lien d'ancrage, qu'on peut styliser grâce aus icônes Fontawesome (icônes vus dans le laboratoire 4.)

Exemple:

To Top

Celui-ci est fixe sur la page. Lorsque nous verrons le Javascript, nous verrons comment le faire apparaître/disparaître au besoin.

Cet exemple débute avec un icône cliquable dans un ancrage vers le haut de la page :

HTML

<a href="#entete">
  <span class="fas fa-arrow-alt-circle-up" id="to_top"></span>
</a>

CSS

/*Positionnement dans le bas de la page*/
#to_top {
    font-size: 3rem;
    position: fixed;
    bottom: 2rem;
    left: 2rem;
}
/*Changement de couleur lorsque la souris passe au-dessus*/
#to_top:hover {
    color: rgb(230, 139, 3);
}

Élément toujours visible¶

Il est possible de rendre un élément toujours visible et qu,il ne défile pas avec la page.

On utilise l'attribut : position

Valeurs possibles pour l'attribut :

Valeur	Définition
fixed	L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. Il est ensuite positionné selon les valeurs fournies par top, right, bottom et left à l'intérieur du navigateur.
sticky	Défile jusqu'à atteindre une position donnée avec les attributs top ou bottom.
static	Valeur par défaut.
relative	L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par top, right, bottom et left.
absolute	L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné selon les valeurs fournies par top, right, bottom et left à l'intérieur de son parent.

Exemple : menu collant

Sticky Menu

 nav {
   background-color: rgb(51, 51, 51);
   position: sticky;   /*menu collant à 0 du haut de page*/
   top: 0;
   text-align: center;
 }

Positionnement de blocs¶

Les balises de type block par défaut ont deux attributs appliqués automatiquement par le navigateur :

Retour de ligne appliqué avant et après
Largeur de 100% de l'espace du parent

Ainsi, pour positionner un bloc, on doit modifier ces attributs CSS automatiques, selon ce qu'on veut atteindre comme résultat dans la page.

Centrer¶

Centrer un bloc consiste à le positionner au centre de son parent.

Pour le positionner au centre on doit :

Avoir de l'espace libre
Appliquer des marges égales de chaque côté du bloc

Donc on doit :

S'assurer que le bloc ne prenne pas 100% de la largeur
Lui appliquer des marges égales

Supposons la page suivante :

blocs

Afin de tout traiter la page en un bloc, on crée un bloc autours de tout le contenu :

HTML

<body>
    <!-- Division qui sert uniquement à positionner le contenu de la page, tout en laissant le body pleine largeur pour l'image de fond -->
    <div id="page_entiere">

        <!--Bloc d'en-tête-->
        <header>
        </header>

        <!--Bloc de navigation-->
        <nav>
        </nav>  

        <!--Contenu principal-->
        <main>
        </main>

        <!--Bloc de pied de page-->
        <footer>
        </footer>

    </div>
</body>

Il ne reste plus qu'à paramétrer le CSS du bloc <div> pour centrer le tout :

CSS

#page_entiere {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
}

blocs

Aligner côte à côte¶

Aligner des blocs un à côté de l'autre consiste à :

S'assurer que les blocs ne prennent pas 100%
Annuler le retour de ligne automatique

Supposons la page suivante :

blocs

Si on veut positionner le bloc À propos de nous à côté de Notre boutique, nous procéderons ainsi :

HTML

<section id="about">
    <h2>À propos de nous</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat consectetur dui in gravida. Donec pretium, sem
        ac semper hendrerit, ........
    </p>
</section>

<section id="boutique">
    <h2>Notre boutique</h2>
    <p>
        Aliquam hendrerit lobortis ipsum, at feugiat velit volutpat nec. In id lacinia ligula. Cras tempus neque ac libero
        scelerisque, tincidunt ............
    </p>
</section>

CSS

main section{
    /*alignement cote à cote*/
    display: inline-block;
    width: 45%; 

    /*autres éléments css*/
    text-align: justify;
    margin-left: 1rem;
    margin-right: 1rem;
    vertical-align: top;
}

blocs

Effet de couches (parallax)¶

L'effet de couches de contenu permet de défiler du contenu comme s'il y avait des couches qui s'empilaient les unes sur les autres.

Exemple :

Empile

Pour obtenir cet effet, on doit utiliser des blocs de contenu (les couches) et par CSS créer des couches virtuelles et stoper le défilement des couches une par une.

<main>
    <section id="couche_fond">
        <!--Contenu de la section-->
    </section>

    <section id="couche_centre">
        <!--Contenu de la section-->        
    </section>

    <section id="couche_dessus">
        <!--Contenu de la section-->        
    </section>   
</main>

#couche_fond {
    height: 100vh;          /*couvrir la hauteur du navigateur*/
    background-image: url(../img/coffee.jpg);
    background-size: cover;
    position: sticky;       /*stoper le défilement lorsque la section*/
    top: 0;                 /*atteint le haut du navigateur*/    
    z-index: -99;           /*couche négative = sous les autres*/
}

#couche_centre {
    position: sticky;       /*stoper le défilement*/
    top: 0;
    z-index: -70;           /*couche au-dessus du fond*/
}

Effet parallax sur une div¶

L'effet parallax peut aussi être utilisé uniquement pour créer une division de page lors du défilement :

parallax

Pour obtenir cet effet:

on crée une division vide
on lui donne une hauteur (puisqu'elle est vide, elle prend 0 de haut par défaut)
on lui donne une image de fond
on rend l'image de fond fixe

Division HTML

<div id="division_parallax"></div>

Code CSS

#division_parallax {
    height: 60vh;
    background-image: url(../img/theatre.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Quelques techniques CSS¶

Image de fond¶

Exemples sur body¶

Empêcher la mosaique¶

Couvrir le body¶

Empêcher le défilement¶

Image de fond sur un bloc¶

Coins arrondis¶

Ombrages¶

Opacité ou transparence¶

Transitions¶

Transformations¶

Défilement doux (smooth scrolling)¶

Bouton retour¶

Élément toujours visible¶

Positionnement de blocs¶

Centrer¶

Aligner côte à côte¶

Effet de couches (parallax)¶

Effet parallax sur une div¶

Exemples sur `body`¶