Transcription
1. Bande-annonce: Bonjour et bienvenue. Mon nom est des coddles lâches. Je suis ingénieur et développeur Web. Pour ces nouvelles classes, je vais créer un menu de navigation dynamique où vous pouvez voir toutes les
propriétés HTML CSS hors tension et la boîte Flax. Si vous êtes fatigué de créer les menus de navigation typiques, alors c'est la malédiction idéale pour vous. Faisons quelque chose que Bress est ensemble, et nous allons vous surprendre,
pensant que vous orteillez un niveau plus élevé. Nous allons créer, Transformer et facturer ensemble un menu de navigation interactif et moderne que vous pouvez appliquer dans vos propres sites Web ou entreprise en ligne, Alors commençons.
2. Menu de navigation dynamique / slider d'accordéon de l'image (1ère partie) - Création de la : Bonjour. Commençons par ce nouveau projet, où j'applique un modèle de spots flexibles et des effets CSS pour créer un type différent de
menu de navigation . Le projet a été conçu pour être une brûlure, comme le menu principal souvent galerie d'images, et pour cet exemple, je choisis un stockman. Vous morts cadeaux pour Image Cities enterrent Londres, New York et Madrid fichiers que je f dans mon Made Fuller di Di est de porter quatre
pages Web différentes pour chacun hors des villes. Et cette page que je vais créer dans les prochaines minutes travailler comme la mort du menu initial peut être liée à l'avenir aux quatre pages individuelles. C' est juste une idée possible pour utiliser cette page, mais bien sûr, vous pouvez l'utiliser dans de nombreuses situations différentes. Maintenant, vous voyez le enfin hors de la page dans le frère qui a été conçu avec la proposition mieux sur une des sections, créant un effet sur l'image et les textes respectifs. C' est juste dans l'image globale sur le lot unique que je vais maintenant développer. Je commence d'abord avec HTML froid. C' est très simple, où j'ai un conteneur et pour les éléments
flexibles, intérieurs, la
dette contenait l'image pour chacune des villes. Donc je crée mon DIF avec nom de verre, conteneur et pour les voleurs, nom de classe de
blé Mame contenant et ajoutant teg avec le nom hors des villes, commençant par Berries, Londres, New York et enfin, Madrid. Comme vous le voyez, code
HTML est très, très simple. Maintenant. Il est temps pour CSS de créer les différents styles, commençant par CSS coat. abord, j'ai défini le style pour le conteneur en verre qui a seulement besoin d'afficher la propriété avec la valeur
flex qui définit cet élément comme un conteneur flex et active le contexte flex pour tous les enfants directs qui sont à l'intérieur du conteneur Dave créant maintenant le style pour mes éléments flexibles. abord, j'ai défini la largeur et je voudrais propriétés orteil ont l'espace occupé par chacun des
éléments flexibles depuis I F. Quatre images différentes à occuper. Similaire avec je définit cette propriété, avec la valeur de 25% sur les parties de vue pour chaque image off par 1/4 sur les mauvaises herbes pour les yeux. Je veux que chacun comme sytem alimenté par 100% des parties de vue, puis je définit le texte la ligne que nous centrerions la valeur pour que le texte à l'intérieur des éléments flanques soit central. Pour le moment, il est visible que nous ne sommes pas leurs images dans les articles de lin. C' est la prochaine étape où je vais utiliser puis sélecteur enfant pour chacun des éléments flexibles
et la mort, une image d'arrière-plan commençant maintenant par flex Item un qui est mon premier enfant. J' ai utilisé pour cet élément à l'image de fond de propriété qui reçoit à l'intérieur qui sont la valeur de l qui est à l'intérieur du nom de fichier correspondant à l'image d'arrière-plan étant pour cette première image d'élément
flex Berry dot j peg. Vous voyez maintenant que l'image n'apparaît pas tout visible parce que je l'ai mentionné est beaucoup plus grande que la dimension de l'élément flexible. Pour résoudre cette situation, j'ai utilisé trois propriétés différentes dans notre classe principale. Tout d'abord, la position d'arrière-plan qui reçoit la valeur centrale pour centrer l'image à l'intérieur de l'
élément flexible . Ensuite, l'arrière-plan répète la propriété qui est utilisée avec la valeur aucune répétition qui a forcé l' image à apparaître sur les Lee. Et enfin, la taille d'arrière-plan de la propriété avec la valeur couverture Death redimensionner l'image d'arrière-plan pour dire avec la même dimension sur l'élément flexible. Après avoir ajouté ces trois propriétés, vous voyez que l'image d'arrière-plan est déjà complètement visible à l'intérieur des premiers
éléments Lex . Je vais maintenant effectuer la même procédure pour les deux autres éléments réflexe. abord, en utilisant le sélecteur d'enfant final pour le deuxième enfant, où je vais avoir une nouvelle image d'arrière-plan cette fois avec le nom de Londres dot jay Peak. Image suivante à insérer à l'intérieur du troisième élément flexible. Nous aurons une image de fond avec le fichier new york point j. Peg qui est maintenant visible après Londres, imaginé que vous mettez à l'intérieur du deuxième élément flex et pour finir nous f r reflète l'élément pour où je dois déposer avec le nom de Madrid Dodge a à insérer à l'intérieur de l' élément
flexible respectif. Nous avons ensuite finalisé cette partie du projet avec toutes les images insérées et avec la taille redimensionnée correctement en utilisant certaines propriétés d'arrière-plan.
3. Menu de navigation dynamique / Curseur de l'accordéon d'image (2e partie) - Mise en page de : L' étape suivante est définie textile ainsi que sur les effets afin de redimensionner les éléments flexibles, commençant par le texte que j'ai inséré dans l'ajout Tex. J' ai utilisé la ligne que j'ai propriété qui permettent l'alignement vertical sur les tests. Si je donne une valeur de 100% de la partie de vue à cette propriété, fait
qu'une seule ligne occupe tous les ICT, 15% sur la partie de vue pour être occupé au-dessus des ponts et l'autre 50% sur le port de vue en dessous des ponts. Si j'entre une valeur inférieure à 100%, vous voyez que dext ne sera plus central. Ensuite, je vais donner une marge avec la valeur zéro et de porter la couleur de fond à mon avoir que, comme je l'ai dit, occuper tout l'espace sur l'élément flex. J' utiliserai la propriété de fond avec le RVB, une fonction pour définir les valeurs de réception de couleur entre zéro et 2 155 pour l'arbre para meters , respectivement à 115 pour rev. 145 pour le vert et 46 4 bleu et le dernier offre de périmètre qui définit l'opacité du Golar que j'ai défini avec trois périmètres précédents donnant la valeur 0.32 alpha. Après avoir défini la couleur de fond ethnique qui occupent tout l'espace hors de l'élément flex, j'ai attribué une valeur blanche à la couleur des dettes et une famille amusante, les Piras avec la taille de police 15 pixels. J' ai maintenant complètement défini ma rubrique avant d'aller aux effets supérieurs. Je veux maintenant f un effet sur mon élément d'ajout qui change la couleur d'arrière-plan pour cet événement. J' ai utilisé sur le sélecteur toe affecte l'ajout d'éléments en utilisant à nouveau la propriété de fond avec RVB une fonction cette fois avec les valeurs zéro zéro zéro qui a défini la couleur Bleck et Alfa valeur 0.1, donnant une très grande capacité étant visible, le changement dans l'arrière-plan quand je le mieux sur les éléments flexibles pour gagner ces parties, j'ai utilisé la propriété d'espacement des lettres avec la valeur de loin pixels pour augmenter l'épice entre les lettres et pour la transition off. Cet effet ne soit pas très rapide. Je donne une valeur d'une seconde aux effets de transition. Nous avons atteint la fin des changements aux effets d'ajout lorsque je meilleurs miles pour terminer. Je veux un effet surélevé qui rend l'élément flex, a écrit son. Nous parlons de 50% de réduction sur les parties de vue pour faire ce changement. Je crée une règle pour la classe principale et quand je passe sur l'article flexible, le blé change simplement à 50% de réduction sur la partie vue. Comme je l'ai dit et j'applique un temps de transition d'une seconde à cette situation de changement qui se produit maintenant lorsque je passe sur un des éléments flexibles. À ce stade, j'ai 99% du projet puis et vous voyez quand je passe lorsque l'image,
l' effet se produit avec une légère position qui ne se produit pas lorsque j'ai arrêté de passer sur l' élément
flex, ce qui rend la transition hors flex élément avec très rapide se produisant la même chose avec la ligne que j'ai hors l'ajout Lorsque revient à notre valeur supplémentaire pour contourner la situation, je dois juste définir le temps de transition inégal lorsque l'élément flex est retourné aux premiers états où il n'y a pas plus qui a été défini par la mine de souffle initiale pour l' élément
flex avec et une situation similaire avec l'ajout de style pour définir cette transition, j'applique simplement la propriété de transition dans notre classe principale, avec la valeur off une seconde et la même situation pour le finissant, nous avons maintenant atteint la fin du projet avec tous les effets créés, comme prévu. Merci d'avoir regardé.
Luis Carlos, Engineer, Web Developer and Instructor
