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
Catégorie : CSS
La newsletter en MJML
Qu’est-ce que MJML ? MJML est un langage de balisage conçu pour faciliter la création de newsletter. Le moteur open-source se charge de traduire le MJML en HTML. Ce langage va aider pour la création d’e-mails responsive en générant le code qui formera la newsletter. Les utilisateurs de cet outil n’ont plus qu’à rédiger leur mailing…Continue reading La newsletter en MJML
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
Évaluation sur le Responsive Design
Pour évaluer nos compétences sur le Responsive Design, notre formateur nous a demandé de créer une page d’un blog fictif, avec les indications suivantes : Il m’aura fallu une vingtaine d’heures pour réaliser le travail ci-dessous : Mon code HTML : Le CSS a été mis dans deux fichiers. Le premier permet de regrouper tous…Continue reading Évaluation sur le Responsive Design
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 bordures
L’objectif de ce cours et de créer 13 exemples de bordures et ombres avec du CSS à partir d’une capture écran fournie par le formateur. Ci-dessous le résultat à obtenir : A partir de l’exemple 14, le formateur nous a demandé d’en créer d’autres. Ci-dessous vous pouvez voir mes travaux : On commence par la…Continue reading Habiller la page en CSS ‐ les bordures
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
Habiller la page en CSS ‐ les fonds
Retour au codage avec un exercice pour ajouter et créer des fonds CSS. Pour cela, nous avons construit la page HTML en nous servant des raccourcis Emmet de Brackets. Puis nous avons mis en forme la page web en utilisant le CSS pour obtenir le résultat suivant (menu et section 1 seulement visible) : Le code CSS ci-dessous : Pour…Continue reading Habiller la page en CSS ‐ les fonds
Mettre en page 1 (flottants)
Première mise en page basée sur les flottants (Extrait du site CoursWeb) Un élément flottant se place à la suite du flux, tout à gauche ou tout à droite de la ligne courante, selon qu’on lui ait attribué la valeur left ou right. Le flux principal poursuit sur le côté de la boîte flottante et…Continue reading Mettre en page 1 (flottants)