Header avec taille proportionnelle facilement modifiable via Sass CSS


Aperçu

Apercu du snippet

Description

Code

Connaissez-vous le Sass ?

Sass est un langage de programmation qui permet de faire du CSS plus rapidement et avec quelques nouvelles fonctionnalités ! Il est important de noter que tout ce qui est créé en CSS peut-être créé en Sass et vice-versa. Le code peut être écrit avec la syntaxique CSS3. On peut donc convertir notre code Sass en CSS facilement avec par exemple Scout-App ou avec le langage de programmation Ruby. L'extension de fichier de Sass c'est .scss.

Ce snippet utilise des fonctionnalités intéressantes de Sass: les variables et les opérateurs ! Qui permettent de coder un header (entête de page) où on peut modifier facilement la taille proportionnellement.

Si vous voulez modifier la taille proportionnellement du header il suffit de modifier la valeur de la variable tailleHeader. Seule l'unité pixel (px) est pris en compte.

Vous pouvez supprimer, rajouter ou modifier autant d'éléments au header. Cependant il faudra modifier les valeurs des media queries du code Sass.


Statistiques

Ajouté par rom100main
le 11/07/2018 à 19h32
100
lignes de code
167
vues

1 vote


Code CSS

//Code Sass (.scss)
//Variable
$tailleHeader: 60px; //Variable pour modifier la taille du header proportionnellement

//Générale
body {
  margin: 0;
  font-family: verdana;
  color: white;
}
h1 {
  margin: 0 $tailleHeader / 6;
  padding: $tailleHeader / 6 0;
  display: inline-block;
  vertical-align: text-top;
  font-size: $tailleHeader / 2;
}
a, a:hover {
  color: white;
  text-decoration: none;
}

//Header
header {
  min-height: $tailleHeader;
  background-color: #999999;
  text-align: left;
  font-size: $tailleHeader / 3;
  overflow: hidden;
  img {
    margin: $tailleHeader / 12 0 $tailleHeader / 12 $tailleHeader / 2;
    width: $tailleHeader / 1.2;
    display: inline-block;
    vertical-align: text-top;
    border-radius: $tailleHeader / 12;
  }
  ul {
    margin: $tailleHeader / 6 0 0 0;
    padding: 0;
    display: inline-block;
    vertical-align: text-top;
    list-style: none;
    li {
      margin: 0 $tailleHeader / 6;
      display: inline-block;
      line-height: $tailleHeader / (4 /3);
      div {
        position: relative;
        top: $tailleHeader / 12;
        height: $tailleHeader / 12;
        background-color: white;
        transition: all 0.25s ease-out;
      }
      &:hover div {
        top: 0;
      }
    }
  }
}

@media (max-width: $tailleHeader * 35 / 3) { //Valeur à modifier en cas de modification des éléments ou du texte du header
  header nav {
    text-align: center;
    img {
      margin: $tailleHeader / 12 0;
    }
    ul {
      margin: $tailleHeader / 12 0 0 0;
    }
  }
}

@media (max-width: $tailleHeader * 8.5) { //Valeur à modifier en cas de modification des éléments ou du texte du header
  header nav ul {
    display: none;
  }
}

Code HTML

<!DOCTYPE html>
<html lang="fr">
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <meta name="viewport" content="width=device-width"/>
    <meta charset="UTF-8">
  </head>
  <body>
    <header id="top">
      <nav>
        <a href="lien"><img src="images/logo.png" alt="Logo"/></a> <!--Logo-->
        <a href=""><h1>Nom</h1></a> <!--Titre-->
        <ul class="noMobile"> <!--Menu-->
          <li><a href="lien">Élément 1</a><div></div></li>
          <li><a href="lien">Élément 2</a><div></div></li>
          <li><a href="lien">Élément 3</a><div></div></li>
          <li><a href="lien">Élément 4</a><div></div></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

1 commentaire

Nazario

11/07/2018 23h06

Profil

Bon exemple d'utilisation et bonnes explications, merci pour le partage ! 🙂