Le langage SASS

Une définition de Wikipedia :   Sass (Syntactically Awesome Stylesheets) est un langage de génération de feuilles de style initialement développé par Hampton Catlin et Nathalie Weizenbaum. Sass est un langage de feuilles de style en cascade (CSS). C’est un langage de description qui est compilé en CSS. SassScript est un langage de script pouvant être utilisé à l’intérieur du code Sass. Deux…Continue reading Le langage SASS

Flexbox

Le module CSS3 Flexbox Layout fournit une façon efficace de disposer, aligner et distribuer l’espace entre les items d’un container. L’idée principale est de donner à un élément contenant (container) la possibilité de changer les largeur et hauteur des éléments contenus (items), afin de remplir au mieux l’espace disponible, et de s’adapter à tous les terminaux et…Continue reading Flexbox

Responsive design – Intégrer un menu responsive

Dans notre exercice de mise en page en Responsive Design, une précision sur l’utilisation d’un menu « burger » et de son menu déroulant, avec deux méthodes possibles, en sachant que la seconde version est adaptée aux mobiles. VERSION 1 : au passage de la souris sur le burger Le code HTML (avec raccourci Emmet) : <!– raccourci…Continue reading Responsive design – Intégrer un menu responsive

Responsive design – Utiliser les media queries

Les requêtes média (media queries) permettent de modifier l’apparence d’un site en fonction du type d’appareil et de ses caractéristiques, que ce soit sa résolution d’écran ou la largeur de la zone d’affichage (viewport). Cet exercice a permis de travailler sur trois types d’affichage : le mobile, la tablette et le PC. Ci-dessous, le code HTML…Continue reading Responsive design – Utiliser les media queries

Habiller la page en CSS ‐ les dégradés

Nouvel exercice pour ajouter et créer des dégradés CSS. Ci-dessous le résultat à obtenir : Première étape, construction de la page HTML et de la mise en forme des cases : Voici le résultat : Puis, nous avons appliqué les différents dégradés mis en forme avec le CSS : Dégradé n°1 : .test:nth-child(1) { background: linear-gradient(black, #26f); } Dégradé n°2 : .test:nth-child(2)…Continue reading Habiller la page en CSS ‐ les dégradés