Kreativer CSS-Code: Accordion mit einfacher Hand Codierung

1. Trailer: Hallo und willkommen. Mein Name ist lose Kütze. Ich bin Ingenieur und Webentwickler. Für diese neue Klasse werde ich ein dynamisches Navigationsmenü erstellen, in dem Sie alle ausschalten HTML-CSS-Eigenschaften und Flax-Box sehen können . Wenn Sie müde sind, die typischen Navigationsmenüs zu erstellen, dann ist dies der ideale Fluch für Sie. Lass uns etwas tun, das du zusammen Bress ist, und wir werden dich überraschen und denken, dass du ein höheres Level bekommst. Lassen Sie uns erstellen, Transformieren und fakturieren zusammen eine interaktive und moderne Navigationsmenü, die Sie in Ihren eigenen Websites oder Online-Geschäft anwenden können , Also lasst uns beginnen. 2. Dynamisches Navigation Slider (Teil 1) – Layout-Erstellung: Hallo. Beginnen wir mit diesem neuen Projekt, wo ich Flex Spots Modell und CSS-Effekte anwenden, um eine andere Art von Navigationsmenü zu erstellen . Das Projekt wurde entworfen, um eine Fäule zu sein, wie das Hauptmenü oft Bildergalerie, und für dieses Beispiel, wähle ich einen Aktienmann. Sie tote Geschenke für Image Cities begraben London, New York und Madrid Dateien, die ich f in meinem Made Fuller di Di ist, vier verschiedene Webseiten für jede aus den Städten zu tragen . Und diese Seite, die ich in den nächsten Minuten erstellen werde, kann als erstes Menü Tod in der Zukunft auf die vier einzelnen Seiten verlinken. Es ist nur eine mögliche Idee für die Verwendung dieser Seite, aber natürlich können Sie es in vielen verschiedenen Situationen verwenden. Jetzt sehen Sie die endlich aus der Seite in dem Bruder, der mit dem Vorschlag am besten über einen von den Abschnitten entworfen wurde , einen Übereffekt im Bild und den entsprechenden Texten zu schaffen. Dies ist nur im Gesamtbild über die einzelne Charge, die ich jetzt entwickeln werde. Ich fange zuerst mit HTML kalt an. Das ist sehr einfach, wo ich einen Container habe und für Flex-Artikel, Innereien, Schulden enthielten das Bild für jede der Städte. Also erstelle ich meine DIF mit Glasnamen, Behälter und für Diebe, Weizenklasse Name Mame enthält und Teg mit dem Namen aus den Städten hinzufügen, beginnend mit Beeren, London, New York und schließlich Madrids. Wie Sie sehen, ist HTML-Code sehr, sehr einfach. Jetzt. Zeit für CSS, um die verschiedenen Stile zu erstellen, beginnend mit CSS Mantel. Zuerst habe ich den Stil für den Glasbehälter definiert, der nur Eigenschaft mit dem Flex-Wert anzeigen muss, der dieses Element als Flex-Container definiert und den Flex-Kontext für alle direkten Children aktiviert , die sich innerhalb des Containers Dave befinden jetzt den Stil für meine Flex-Elemente erstellen. Zuerst habe ich die Breite definiert und ich würde Eigenschaften toe den Raum haben, der von jedem der Flex-Elemente seit I F belegt ist. Vier verschiedene Bilder zu besetzen. Ähnlich mit definiere ich diese Eigenschaft, mit dem Wert von 25% auf die Ansichtsteile für jedes Bild off um 1/4 off das Unkraut für die Augen. Ich möchte, dass jedes wie Sytem um 100% der Ansichtsteile stoked wird, und dann definiere ich Text die Zeile, die wir für den Text innerhalb der Flankenelemente zentrieren würden, um zentral zu sein. Im Moment ist es sichtbar, dass wir nicht ihre Bilder in den Flachsgegenständen sind. Das ist der nächste Schritt, in dem ich dann den Kind-Selektor für jeden von den Flex-Elementen und dem Tod verwenden werde , ein Hintergrundbild, das jetzt mit Flex-Element eins beginnt, das mein erstes Kind ist. Ich habe für dieses Element verwendet, um Hintergrundbild zu Eigenschaft, das innerhalb der l-Wert empfängt , der innerhalb des Dateinamens ist, der dem Hintergrundbild entspricht, das für dieses erste Flex-Element Bild Beeren Punkt j peg ist. Sie sehen jetzt, dass das Bild nicht alle sichtbar erscheint, weil das, was ich erwähnt habe, viel größer ist als die Dimension aus dem Flex-Element. Um diese Situation zu lösen, habe ich drei verschiedene Eigenschaften in unserer Hauptklasse verwendet. Zuerst die Hintergrundposition, die den Mittelwert erhält, um das Bild innerhalb des Flex-Elements zu zentrieren . Dann wiederholt der Hintergrund Eigenschaft, die mit dem Wert no repeats verwendet wird, wodurch das Bild auf Lee angezeigt werden musste . Und schließlich die Eigenschaftenhintergrundgröße mit dem Wertdeckel Tod die Größe des Hintergrundbildes, um mit der gleichen Dimension aus dem Flex-Element zu sagen . Nachdem Sie diese drei Eigenschaften hinzugefügt haben, sehen Sie, dass das Hintergrundbild bereits in den ersten Lex-Elementen vollständig sichtbar ist . Ich werde jetzt das gleiche Verfahren für die verbleibenden zwei Reflexpunkte durchführen. Zuerst benutze ich den End-Kind-Selektor für das zweite Kind, wo ich dieses Mal ein neues Hintergrundbild mit dem Namen von London dot jay Peak haben werde. Das nächste Bild, das innerhalb des dritten Flex-Elements eingefügt werden soll. Wir werden ein Hintergrundbild mit der Datei New York Punkt j. Peg, die jetzt nach London sichtbar ist, imaged, dass Sie innerhalb der zweiten Flex-Element setzen und zum Abschluss wir f r reflektiert Element für wo ich mit dem Namen Madrids Dodge a Datei Peg, um in den jeweiligen Flex-Artikel einzufügen. Wir haben dann diesen Teil aus dem Projekt mit allen eingefügten Bildern abgeschlossen und die Größe mit einigen Hintergrundeigenschaften korrekt angepasst. 3. Dynamisches Navigation Slider (Teil 2) – slider: Der nächste Schritt ist Textil sowie über Effekte definiert, um die Flex-Elemente zu ändern, beginnend mit Text, den ich innerhalb des Hinzufügens Tex eingefügt habe. Ich habe die Linie, die ich habe, verwendet, die eine vertikale Ausrichtung auf den Tests ermöglicht. Wenn ich dieser Eigenschaft einen Wert von 100% des View-Teils gebe, macht das, dass eine einzelne Zeile die gesamte IKT einnimmt, 15% Rabatt auf den View-Teil über den Decks und die anderen 50% aus dem View-Port unter den Decks belegt ist. Wenn ich einen Wert von weniger als 100% eingebe, sehen Sie, dass dext nicht mehr zentral ist. Dann werde ich eine Marge mit dem Wert Null geben und die Hintergrundfarbe zu tragen, um mein zu haben , dass, wie gesagt, den gesamten Raum aus dem Flex-Element besetzen. Ich werde die Hintergrundeigenschaft mit dem RGB verwenden, eine Funktion, um Farbempfangswerte zwischen Null und 2 155 für die Baum-Para-Meter zu definieren , bzw. 115 für rev. , 145 für grün und 46 4 blau und die letzte Perimeter-Angebot, das die Deckkraft des Golars definiert, die ich mit drei vorherigen Umfängen definiert, die den Wert 0,32 Alpha geben. Nachdem ich die ethnische Hintergrundfarbe eingestellt habe, die den ganzen Platz vom Flex-Element einnimmt, habe ich der Farbe der Schulden und einer lustigen Familie weißen Wert zugewiesen, die Piras mit der Schriftgröße 15 Pixel. Ich habe jetzt meine Überschrift vollständig definiert, bevor ich zu den Over-Effekten gehe. Ich möchte jetzt einen Übereffekt auf mein Hinzufügeelement f, das die Hintergrundfarbe für dieses Ereignis ändert . Ich habe über Selektor Toe beeinflusst das Hinzufügen von Elementen wieder Hintergrundeigenschaft mit RGB eine Funktion dieses Mal mit den Werten Null Null Null, die die Bleck-Farbe und den Alfa Wert 0.1 definiert , was eine sehr hohe Kapazität sichtbar ist, die Änderung im Hintergrund, wenn ich am besten über die Flex-Elemente, um diese Teile zu gewinnen, habe ich die Buchstabenabstands-Eigenschaft mit dem Wert von weit Pixeln verwendet, um das Gewürz zwischen Buchstaben und für den Übergang aus zu erhöhen . Dieser Effekt ist nicht sehr schnell. Ich gebe den Übergangseffekten eine Sekunde Wert ab. Wir haben das Ende der Änderungen an den Hinzufügeffekten erreicht, wenn ich am besten Meilen über zu beenden. Ich möchte einen Übereffekt, der das Flex-Element macht, schrieb seine. Wir sprechen um 50% Rabatt auf die Ansichtsteile, um diese Änderung vorzunehmen. Ich erstelle eine Regel für die Hauptklasse und wenn ich den Flex-Artikel übergebe, ändert sich der Weizen einfach zu 50% vom View-Teil. Wie ich sagte, und ich wende eine Übergangszeit von einer Sekunde auf diese Änderungssituation an, die jetzt passiert, wenn ich eine von den Flex-Elementen übergebe. An diesem Punkt habe ich 99% des Projekts dann und Sie sehen, wenn ich übergehe, wenn Bild, der Effekt passiert mit einer leichten Position, die nicht passiert, wenn ich aufgehört habe, über das Flex-Element zu gehen, so dass Flex-Element zu gehen, der Übergang aus Flex Artikel mit sehr schnell passiert das gleiche mit der Zeile Ich habe das Hinzufügen Wenn zu unserem zusätzlichen Wert zurückkehrt, um die Situation zu umgehen, muss ich nur eine ungleiche Übergangszeit definieren, wenn das Flex-Element in die ersten Zustände zurückgekehrt ist, in denen es kein Ende gibt Effekte, die durch die anfängliche Explosion Mine für das Flex-Element mit und ähnliche Situation mit Hinzufügen von Stil definiert wurde, um diesen Übergang zu definieren, wende ich einfach die Übergangseigenschaft in unserer Hauptklasse an, mit dem Wert von einer Sekunde und der gleichen Situation für die haben wir nun bis zum Ende des Projekts mit allen Effekten erreicht, wie erwartet. Danke fürs Zuschauen.