CSS avancé : fenêtre coulissante et mise en forme d'un minuteur

Name: CSS avancé : fenêtre coulissante et mise en forme d'un minuteur
Author: Cliff Brozo

Dans ce cours, vous apprendrez à créer et à naviguer dans la fenêtre du curseur. Vous formaterez également une minuterie dans un tableau de style Jeopardy…

Preview the first lesson free — get full access to all 7 lessons.

Demander une démo Se connecter

Cours : à la demande

Créer un plateau de jeu Le jeu que j'ai décidé de créer est l'un de mes favoris. C'est Jeopardy, ça existe depuis 1964 et ça va toujours fort. Ce que vous voyez ici est un développeur en ligne. Il s'appelle CodePen IO. Et ce que tu as le droit de faire ici teste une partie du code avec lequel vous allez travailler. Ce que j'ai fait, c'est créer un petit document HTML qui veut imprimer quatre colonnes. Et pour cette conception, et pour ce cours, nous allons approfondir les capacités de la classe de grille. Et ce que nous allons pouvoir faire c'est créer un plateau de jeu réactif dans sa conception, et aussi attrayant pour les yeux. Donc, comme vous pouvez le voir, sur le côté gauche de l'écran dans mon document HTML, j'ai un simple HTML avec une division appelée classe, J'ai une section du programme qui est divisé en quatre colonnes, et j'ai deux classes là-bas, l'une s'appelle la classe de grille, et l'autre s'appelle la classe de colonne et nous verrons comment cela est stylé en CSS. Si vous regardez au milieu, c'est la fenêtre de code CSS, nous avons des trucs de base pour notre corps puis nous définissons quelle est la classe de grille. Si vous regardez attentivement dans le cercle rouge, tu verras que je crée quelque chose qui s'appelle une colonne de modèle de grille et je veux quatre colonnes, chacune occupant 25% de l'écran. Le problème, c'est quand je veux séparer ces colonnes avec quelque chose appelé un espace de grille. Et comme vous pouvez le voir, à la ligne 12, Je règle l'écart de grille à 10 pixels. Et cela me donne un espace entre chacune des colonnes. Que se passe-t-il avec les colonnes de modèle de grille et les 25% est qu'il n'inclut pas l'espace entre les colonnes et en conséquence, il crée une barre de défilement horizontale, quelque chose que nous ne voulons jamais voir. Si vous regardez sur le côté droit de la fenêtre qui est normalement réservé à JavaScript dans cet écran particulier, nous n'en avons pas, l'utilisation du 25% nous donne une barre de défilement horizontale au bas de la quatrième colonne. Au lieu de quatre et 25%, Je change la façon dont les colonnes du modèle de grille sont configurées. J'ai changé les 25% pour dire que j'aimerais utiliser une fraction de l'espace restant. Et ce que nous allons faire, c'est que nous allons apprendre exactement comment cela fonctionne. L'idée est qu'il calculera combien d'espace restant reste-t-il et ajustez la largeur de la colonne au lieu de 25%, ça va le faire tomber à 22 ou 23% pour s'adapter à la largeur des espaces. Et cette fraction, comme vous pouvez le voir, 1fr me permettra d'obtenir toute la largeur de quatre colonnes et incluez les espaces dans la largeur de la page. Voyons à quoi cela ressemble lorsque nous le concevons sur un plateau de jeu. Dans ce cas, nos catégories seront entièrement consacrées au CSS, et les choses sur lesquelles nous allons travailler. Nous avons des valeurs en dollars semblable à la façon dont Jeopardy les a. Et nous allons coder ce jeu pour qu'il fonctionne comme Jeopardy le fait avec une petite touche. Afin de faire fonctionner ce plateau de jeu, nous allons vouloir créer et utiliser la propriété de dimensionnement de la boîte. Ce que nous voulons faire, c'est créer une hauteur et une largeur que nous allons attribuer à cette boîte et manipulez tout ce qui se trouve dans la boîte. Les bordures et le remplissage sont ajoutés à la largeur pour nous donner la taille des cases rendues à l'écran et nous devons ajuster cette valeur. Encore une fois, comme je l'ai dit, si nous avons quatre cases à 25% chacune, tout rembourrage droit ou gauche, il ne rentrera pas sur une seule ligne dans la contrainte de ce conteneur de boîte. Donc ce que nous faisons, c'est que nous le changeons, au lieu d'utiliser la content-box, qui est la version par défaut, nous voulons le changer en border-box. Et cela permet au navigateur de compter des bordures et du rembourrage et de la largeur de l'espace et de tout le reste, et il réduira automatiquement la taille du document afin qu'il n'y ait pas de défilement horizontal. L'utilisation de border-box facilite la tâche avec n'importe quel élément qui élimine les problèmes avec la présentation de tout notre contenu. Positionnement relatif et absolu permet à ces valeurs d'être relatives au contenu et indépendamment des changements de bordure et de rembourrage. Donc nous allons toujours avoir des colonnes égales peu importe ce que nous faisons. Regardons le code qui génère cette zone de contenu et cette zone de bordure. Le premier, cette boîte plus grande, a notre propriété box-sizing à définir sur content-box. La boîte fera 160 pixels de large, 80 pixels de haut, il aura un rembourrage de 20 pixels, qui va déplacer les mots content-box 20 pixels de la bordure, et il aura une bordure de huit pixels. Si vous faites du calcul, les 160 pixels de la boîte, plus les deux ensembles de rembourrage, gauche et droit plus les deux ensembles de bordures, gauche et droite vous donnera vraiment une boîte de 216 pixels de large. Et la même chose va avec la hauteur. Au lieu de dire content-box, nous créons une classe appelée border-box. Ce remplissage est soustrait de toute la largeur de la boîte et nous obtenons une boîte beaucoup plus petite. Pourquoi le gros problème? Eh bien, lorsque les utilisateurs utilisent différents types d'appareils pour accéder aux pages, nous devons économiser autant d'espace sur l'écran que possible et l'utilisation de border-box nous aidera à le faire.

Avancé Fournisseur : Cliff Brozo 7 leçons · 43m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Dans ce cours, vous apprendrez à créer et à naviguer dans la fenêtre du curseur. Vous formaterez également une minuterie dans un tableau de style Jeopardy personnalisé. À la fin de ce cours, vous connaîtrez les fonctions et les caractéristiques des curseurs et des minuteries.

Objectifs de la formation:

Ce que vous allez apprendre

Créer une fenêtre coulissante (slider window) et naviguer à l'intérieur
Construire un plateau de jeu interactif de type Jeopardy
Formatter un minuteur pour un plateau de jeu personnalisé
Écrire le code qui génère le plateau de jeu
Concevoir une fenêtre coulissante en plusieurs étapes
Identifier les fonctions et les caractéristiques des curseurs (sliders) et des minuteurs (timers)

Points clés à retenir

Le cours enseigne comment créer et naviguer à travers une fenêtre coulissante (slider window).
Les apprenants formatent un minuteur (timer) au sein d'un plateau personnalisé de type Jeopardy.
À la fin, les apprenants comprennent les fonctions et les caractéristiques des curseurs (sliders) et des minuteurs.
Le cours aborde la génération d'un plateau de jeu avec du code et la conception d'un jeu interactif.
Les compétences abordées incluent les animations CSS, les frameworks CSS, le CSS orienté objet et l'apprentissage interactif.

Foire aux questions

Que vais-je apprendre dans ce cours ?

Vous apprendrez à créer et naviguer dans la fenêtre coulissante (slider window), à formater un minuteur dans un plateau personnalisé de type Jeopardy, et à comprendre les fonctions et caractéristiques des curseurs (sliders) et des minuteurs.

Quels sujets les leçons couvrent-elles ?

Les leçons couvrent la création d'un plateau de jeu, le code qui génère ce plateau, la conception d'une fenêtre coulissante (slider window) en deux parties, et le formatage d'un minuteur en trois parties.

Quelles compétences ce cours permet-il de développer ?

Ce cours développe des compétences en animations CSS, frameworks CSS, conception pédagogique, apprentissage interactif, CSS orienté objet et tutoriels.

Que serai-je capable de faire à la fin du cours ?

À la fin du cours, vous serez capable de créer une fenêtre coulissante (slider window), de créer un jeu interactif et de formater un minuteur (timer).