Erstelle eine herausragende Website mit HTML, CSS und Web-Animationen

1. Einführung: suchen Sie ein bisschen Einzigartigkeit und Individualität in Ihre eigene Website oder Webanwendung selbst? Dann ist dies der Kurs für Sie. Hi, ich bin Sheila Brennan, eine Front von Web-Entwickler. In den letzten Jahren gab es viele Fortschritte in den Webbrowser-Technologien, die mehr Kreativität ermöglichen und wie Websites gut gestaltet und entwickelt werden. In diesem Kurs werde ich in verschiedene Techniken eintauchen, mit denen Sie nur HTML und CSS verwenden können, um Ihrer Website mehr visuelles Interesse zu verleihen . Einige Vertrautheit mit HTML und CSS wird empfohlen, aber nicht unbedingt erforderlich, da ich Konzepte erklären werde, während wir gehen. Dieser Kurs ist ideal für Freiberufler in Unternehmen, die effektivere Erfahrungen für die Kunden erstellen möchten . Während die Techniken werden Deckung sind ideal für Homepages und Landing Pages, sie könnten genauso einfach auf einem einfachen Block Site angewendet werden. Sind Sie bereit, eintauchen und einige dieser Techniken zu lernen? Dann lasst uns loslegen 2. Einführung in CodePen: in diesem Video werden wir darüber sprechen, in zu bewältigen, die für den Rest des Kurses verwendet werden wird. Wenn Sie bereits ein Codestift-Konto haben, können Sie dieses Video und Elsie im nächsten überspringen. Wenn Sie nicht tun, alles, was Sie tun müssen, ist gehen zu bewältigen beendet Io Klicken Sie auf diese Anmeldung für kostenlosen Link, Erstellen eines Kontos und dann werden Sie gut zu gehen. Ich seh dich den nächsten. 3. Background: In diesem ersten Video werden wir darüber nachgehen, wie Sie Grady INTS im Hintergrund verwenden können, um mehr visuelles Interesse an Abschnitten Ihrer Seite hinzuzufügen , jemanden, der mit der Erstellung eines Stifts beginnen kann. Und dann lassen Sie uns ein paar Stift-Einstellungen durchgehen. Ich werde diese während des gesamten Kurses für jede Frau verwenden, die ich tun werde, ist bei dieser Meditation, so dass, wenn ich Medienabfragen in meinem CSS beende, um verschiedene Eigenschaften wie Schriftgrößen zu ändern , das genau im Stift reflektiert wird. Wenn ich meinen Browser mit für CSS ändere, wähle ich diese Normalisierungsoption, um Unterschiede zwischen Browsern und wie Dinge in der Nähe gerendert und gespeichert werden zu minimieren . Und dann können wir auf jedem in den Mund beginnen. Ich werde die Vorteile der automatischen Vervollständigung von Cope in Aiken nehmen, nur treffen Periode, die unter meinem Klassennamen Hit Tab und es wird automatisch abgeschlossen. Und dann wird es für jeden Tag nach draußen kommen, und das wird es für all das HTML für diese erste Lektion sein, und dann werde ich ein bisschen HTML hinzufügen. Diese Stile. Diese werden auch für den Rest der Lektionen gelten, so dass, wenn ich den Bildschirm mit auf mindestens 800 Pixel für Keller wachsen wird 18 Pixel erhöht werden , so dass alle Fronten auf der Seite ein bisschen wachsen. Und dann gehen wir weiter und wählen eine Front. Sie können in und direkt von der Firma ziehen. Mit diesen Asset-Optionen, Sie werden einfach auf die Kopie Link Tank Ich habe tatsächlich vorgewählt Front von Google-Handys . Alles, was Sie tun müssen, ist, plus auf die, die Sie wollen, und dann kopieren Sie in dieser Schublade und fügen Sie das Link-Tag ein. Ich habe Front Ruhe und Zeit gewählt, also werde ich gehen. Sie werden Ihr Link-Tag Ihrer Wahl direkt hier einfügen. Jetzt ist es sogar nahe. Wir können tatsächlich in unserer Front-Familie, so dass wir sehen, dass Spaß erschien. Nein, wir haben auch einige Fallback-Schriftarten. Und dann lass uns gehen und uns aufstellen. Unsere CSS-Variablen werden diese durchgängig verwenden. Der Kurs ist, naja, es ist eine gute Möglichkeit, Werte zu setzen und sie dann wiederzuverwenden. Aber ich habe Sie in der ganzen Sache wieder auf diese Weise tippen, und ich habe eine grüne Farben. Nun, ich werde RGB für die Seekanus benutzen, Hexcodes wie das Weiß, das dir überlassen wird. Und dann lassen Sie uns als nächstes Einrichten unserer Helden Abschnitt, die der einzige Abschnitt, der in dieser Show Video erstellen wird 400 Pixel Männer mit. Und dann werden wir die Hintergrundfarbe setzen, um die Variable zu verwenden, die wir gerade Sweet erstellt haben. Es funktioniert, und dann werden wir haben, dass dies ein Rastercontainer ist und wir tun das nur für das Layout . Ich zeige Ihnen, warum wir in Sekundenschnelle auch eine Medienabfrage hinzufügen werden, damit breitere Bildschirme den Helden in Bezug auf die Höhe größer machen. Okay, also sind wir gut da. Und jetzt bei unseren Tagline-Stilen, sind wir in einem Senat Zehe. Warten Sie, damit wir es sehen können. Und dann werden wir eine lustige Größe und ein Gewicht von 400 einrichten, nur damit es standardmäßig ein fett für alle Ihre Überschriften-Tags ist. Wir wollen keine Fettdruck, damit Sie den Text besser lesen können. Und ich passe auch den Buchstabenabstand nur aus persönlichem Geschmack an. Und dann werden wir den Rand von auto festlegen, was eine Möglichkeit ist, dies als Rasterelement zentriert zu machen. Und das sieht gut aus. Und dann werde ich diese Medienabfrage noch einmal kopieren, und ich werde die Schriftgröße auf breiteren Bildschirmen erhöhen. Wir werden zu fünf gehen. Rim Ram ist eine relative Einheit, die verwendet wird, die diese Basisschriftgröße nimmt, die wir hier berücksichtigen. Okay, jetzt werden wir es tun, ist und in unserem strahlenden, das sieht ein kleines Flugzeug aus. Also gehen wir zu uni verwenden CSS Cranie in Ohio gehen. Sie können auch dieses Jahr verwenden. Ich gierigste dot com ist auch wirklich gut. Sie haben einfach nicht so viel Kontrolle über die Farben. Also werde ich gehen. Ich habe tatsächlich vorausgewählte Zutat. Aber alles, was Sie tun werden, ist die Farben, die Sie hier für Ihre verschiedenen die Stopps auf diesem wollen, und dann kopieren und einfügen Sie diese strahlend. Ich werde zu und in meiner Zutat, um diese in den Heldenbereich direkt hier hinzuzufügen. Stellen Sie sicher, dass Sie es richtig buchstabieren, und wir haben unsere erste gierige es. Und ich werde zeigen, wie man diese tatsächlich schichten kann, indem man eine zweite Zutat hinzufügt. Kommst du einfach eine separate sie? Das sieht also ein bisschen anders aus, und dann, aber immer noch ein wenig Flugzeug. Lassen Sie uns ein Bild dahinter hinzufügen. Ich habe dieses Bild von unspool ash dot com vorausgewählt. Diese sind einfach, da Sie sie verwenden können, ohne das Bild irgendwo hosten zu müssen. Achten Sie nur darauf, zu beachten, was sind die Ideen auf dem Bild? Weil du es so benutzen wirst. Und dann lassen Sie uns das beenden. Komm schon, wir haben dein L. und los geht's. Wir können standardmäßig sehen. Hintergrundbilder werden wiederholt. Wir werden sagen, dass es sich nicht wiederholen soll, und wir werden die hintere Seitenabdeckung einstellen. Und da gehen wir hin. Wir können sehen, wie es einfach ist, Becker-Inhaltsstoffe auf ein Bild zu schichten, um etwas Interesse hinzuzufügen und den Text auch leichter zu lesen. Du wirst sehen, ob ich die Grady INts ausschneide. Es ist ein wenig schwieriger, den Text zu lesen und Zutat darin zu haben, und es ermöglicht Ihnen auch, Elemente Ihrer Farbpalette in die Zutaten hinzuzufügen und ein einheitlicheres Aussehen auf der Seite zu haben . 4. Animierte Hero: in diesem Video werden wir darüber sprechen, wie wir CSS-Animationen verwenden und sie auf Helden-Sektion Text Toe anwenden können . Fügen Sie etwas Spaß und visuelles Interesse hinzu. CSS-Animationen sind eine Möglichkeit, CSS-Eigenschaften zwischen zwei verschiedenen Zuständen zu übergehen. Sie können steuern, ob sie mehrere Male wiederholen oder nur einmal laufen, wenn sie vorwärts oder rückwärts laufen , wenn sie eine spezielle Beschleunigungsfunktion haben, was im Grunde eine Möglichkeit ist, einen anderen Effekt hinzuzufügen. Zum Beispiel, von Bounce versus ein Fade in versus eine leichte und dann können wir auch eine Dauer festlegen, die bestimmt, wie lange die Animation läuft. Und das kann fünf Sekunden sein, eine Sekunde, oder wir gehen in Millisekunden. Schlüsselbilder sind die Magie, die in CSS eingerichtet wird. Dies ermöglicht es uns, dem Browser mitzuteilen, welche Eigenschaften an bestimmten Punkten in der Animation sein müssen , und der Browser behandelt alle mittleren Werte, die nicht direkt deklariert wurden. Und das wirst du in unserer Demo sehen. Alles klar, wir werden mit unserem zuvor erstellten Stift beginnen, also verwenden wir die vorherigen Lektionen abgeschlossene Arbeit, wo wir ah außerhalb Text haben und das erste, was wir tun werden, ist die Schlüsselbilder zu erstellen, die bestimmen, wie animieren diesen Text, und wir können es nennen, was wir wollen. Ich nenne es fade in up, weil wir nur eine Änderung der Deckkraft und der Position des Textes verwenden . Das ist also irgendwie beschreibend über das Tun. Und dann werde ich nur einige Prozentwerte deklarieren, so dass 0% der Text ausgeblendet wird. Und dann werden wir Playa transformieren, was eine ziemlich mächtige Sache in Bezug auf Animation ist. Sie könnten viel mit Transformation tun und ermutigen Sie, nach Indian zu gehen ist eine große Ressource. Schauen Sie sich ihre Docks an und sie haben auch eine Menge gutes Beispiel dort. Ich werde mit einem übersetzen drei D gehen, die in ihrer Dokumentation abgedeckt ist. Ich werde im Grunde nur die vertikale Position des Textes ändern, also ist es ziemlich einfach. Also, um damit zu beginnen, haben wir unseren 0% Wert. Dann, auf halbem Weg durch die Animation, werden wir eine leichte Veränderung der Deckkraft vornehmen. Der Text wird sichtbar und ich werde t einfach den Wert Null transformieren. Wir gehen 20% dorthin und dann werde ich nur 100% -Wert hinzufügen, und das geht mit einem zum Pesty. Also das Texas wirklich sichtbar, und wir werden keine Transformation mehr machen, also werde ich das auf keine setzen. So haben wir jetzt unseren CSS-Animationsschlüsselrahmen eingerichtet. Jetzt muss ich nur das auf unseren Slogan anwenden und es liegt an Ihnen. Manchmal sind die besser. Nur angewendet eine breitere Bildschirme, je nachdem, wo, was Sie mit Animation tun , für dieses Beispiel, Ich werde es nur alle Bildschirmbreiten anwenden. Ich werde für eine Sekunde den Punkt gehen. Das ist auf dieser Animation läuft für und füttert dann nach oben. Das war der Name des Schlüsselbilds, den ich erstellt habe, und Sie können bereits sehen, dass es wirksam wird. Und dann könnten wir einfach Saison gebrauchen. Das ist eine der häufigsten Erleichterungsfunktionen, die verwendet werden können. Das war also das. Zuerst schauen wir es uns an. Es wird vorwärts laufen. Es wird sich nicht wiederholen. Das liegt nur daran, dass ich die Werte ändere. Es führt es erneut aus, und dann ist eine gute Sache, dass wir mehr davon tun werden, wenn wir in Debug gehen und Sie sehen können. Es ist ein guter Weg, wenn ich Option, klicken Sie auf Mac oder klicken Sie mit der rechten Maustaste und überprüfen Sie. Ich kann wirklich graben, was meine Werte für die Animation sind, die Aiken ändern sie nach Bedarf und Sie werden sehen, hier kann ich ändern. Ich könnte nur Deweys. Wenn ich in Chrome taub Tools darauf klicke, kann ich die Werte in der Vorschau anpassen, wie sie aussehen. Also für dieses Beispiel werde ich ein wenig schicker sein und einen kubischen beschäftigt eine Funktion verwenden. Ich habe einige Werte vorausgewählt, einige dünn. Kopiere die rein und da gehen wir. Es ist etwas subtiler. Nur neu geladen. Werfen Sie einen weiteren Blick darauf, und das ist eine einfache Möglichkeit, ein wenig visuelles Interesse in hinzuzufügen. Ich würde das nicht überverwenden, aber für etwas wie eine Landingpage oder einen Homepage-Helden ist es definitiv etwas, das Sie in Erwägung ziehen sollten 5. CSS Formen: in diesem Video werden wir behandeln, wie Sie CSS-Formen verwenden können, um visuelles Interesse an der Gestaltung von Text hinzuzufügen . Sie können sie tatsächlich verwenden, um Text an einer Form auszurichten, so dass Sie ein benutzerdefiniertes Aussehen haben. Also werden wir mit unserem HTML beginnen. Wir werden sagen, das ist, als würden wir das für eine Mitarbeiter-Bio-Sektion verwenden, also wird das unser Haupttiv sein. Und dann hier drinnen haben wir Artikel-Tag mit der tatsächlichen Biografie, und dann werden wir den Mitarbeiternamen haben. Die sind fiktiv. Natürlich kannst du hier reinstellen, was du willst, und dann für das wir ein Avatar-Foto haben , was die Sache ist. Wir werden uns eine CSS-Form benutzen, aber ich werde Bilder von dieser Seite heranziehen. Privat sind dot cc. Sie haben bereits Menschen Bilder, die wir verwenden können. Ich gehe voran und wählte einige spezifische, wo Sie auf dieses Bild klicken können, und durchsuchen Sie, wenn Sie in welchen spezifisch sein wollen. Also werde ich Image-Tank benutzen und das ist Bild 16. Ich werde auch Klasse hinzufügen, damit ich es stylen kann, und da ist unsere fiktive Gina, und dann werde ich tun, ist das Hinzufügen von Haartransplantat-Tag. Wir werden etwas Text hinzufügen, wir um die Form wickeln werden, damit Sie hier auch alles einfügen können, was Sie wollen. Und lasst uns noch einen Absatz bekommen. Es ist einfacher, diesen Effekt zu sehen, wenn Sie mehr Text haben, anstatt nur, dass Sie nicht wirklich in der Lage sein, es zu sehen. Wenn es nur ein paar Zeilen sind, okay, und dann beginnen wir mit unseren Styles. Wir werden die Platte benutzen ist eine Farbe, und dann sollte das wirklich tun. Lassen Sie uns mit unserer reaktionsschnellen Typografie enden, die wir bisher im Rest der Klasse gemacht haben. Die Grundfinanzierung wird also 60 Pixel betragen, und es wird für dieses eine, es ein bisschen anders zu machen, Ähm, oder die Schriftarten mit 700 Pixeln anzupassen, und wir werden es 20 Pixel machen, was zeigt hier gerade jetzt, weil ich auf einem breiteren Bildschirm mit und dann können wir in unserem Fuchs nächsten Schritt hinzufügen, können Sie durch den Prozess des Hinzufügens eines Google Funt direkt von zu bewältigen in gehen, wie wir über gesprochen . Kopieren Sie einfach das Link-Tag. Ich habe eine Google-Front namens Katamaran vorgewählt, so werde ich sicherstellen, dass mein Meta-Tag und dann sagte Cameron hier. Und Sie können auch Ihre Schriftfamilie als CSS hinzufügen Sehr fett. Empfehlen Sie es also definitiv, wenn Sie es wiederverwenden werden. Okay, jetzt haben wir Katamaran geladen. Es sieht besser aus, und ich werde auch die Zeilenhöhe für meine Absätze anpassen. Es ist gerade ein bisschen eng. Das ist etwas, das Sie auch in Betracht ziehen möchten, eine andere Medienabfragen anzupassen. Sie können eine engere Lichthöhe haben, , wie einen kleineren Wert von Mobil. Okay, jetzt arbeiten wir an unseren Angestellten Bios, und wir werden Max mit, damit sie nicht so warum sein werden, und ich werde es zentrieren , die sich bewerben wird. Das sieht gut aus. Und dann fügen wir dazu unsere individuell angewendeten Bio-Stile hinzu. Hier werden wir anfangen, das hinzuzufügen, das wir den Witz zunächst auf 80% dieser 1200 Pixel beschränken werden. So werden die Dinge noch schmaler und senden das auch und nur die untere Polsterung ist gut durch den Rand markiert, weil ich eine zweite Bio hinzufügen werde und ich möchte, dass sie etwas Platz zwischen ihnen haben. Dann werden wir die Medienabfrage von früher dieser 700 Pixel wiederverwenden. Und ich gehe Teoh, passe die Mischung so an, dass es auf breiteren Bildschirmen noch eingeschränkter ist, nur um die Zeilenlänge vernünftig zu halten. Client-Lungenlinien sind schwieriger zu schlagen. Hoppla, ich meinte 50%. Okay. Okay. Das ist ein Teil davon, dass wir inneres CS hinzufügen, dieses Schaf. Ich habe eine Fotoklasse auf das Foto angewendet. Ich werde eine Breite davon abnehmen. Und wir wollten ein Kreis sein. Etwas verwendete Grenzradius von 50%. Jetzt ist es ein Kreis, und dann werde ich hier Schwimmer benutzen, was eine ältere Technik ist. Aber sie waren großartig für diesen besonderen Gebrauch. Und jetzt schweben wir es nach links. Sie können sehen, dass der Text noch irgendwie um den Kreis eingeschlossen ist. Also werden wir unsere CSS-Form hinzufügen. Sie ist ein Schaf außerhalb des Kreises und da haben wir es. Wir können sehen, dass der Text nun sehr eng an dieser Kreisform ausgerichtet ist. Aber ich wollte eigentlich ein wenig Atemraum haben, also werde ich sagen, 25 Pixel hinzufügen und das sieht ziemlich gut aus. Und nur um eine wiederholte Verwendung davon zu zeigen, werden wir einen zweiten Mitarbeiter hinzufügen, das liegt ganz an Ihnen. Ich denke, es wird vollständiger aussehen. Wir fügen Ted hinzu. Ähm, ich verwende die Bio im Grunde wieder. Alles, was ich tat, war, das Foto und den Namen in der Aussprache zu ändern. So können Sie sehen, wie Sie damit definitiv etwas Interessantes schaffen können. Und das ist etwas, das definitiv funktionieren wird. Okay, wirklich. Alte Browser und unterstützen dies auch nicht. Wir werden das einfach ignorieren, damit sie mehr aussehen werden. Sie werden einfach quadratisch aussehen, was auch völlig in Ordnung ist. In Bezug darauf, wie der Text, diejenigen, wenn sie Rahmenradius unterstützen, immer noch den Kreis sehen. Es sieht nicht wirklich schlecht aus, aber das gibt es ein wenig extra 6. Winkelkanten: in diesem Video werde ich behandeln, wie Sie Winkelkanten auf Abschnitten Ihrer Seite verwenden können, um ein visuelles Interesse hinzuzufügen . Wir werden wieder einen Teil des Codes aus der ersten Lektion der Heldenabteilung verwenden. Also werde ich getroffen worden sein. Attagirl. Und dann gehe ich Teoh an der gleichen Front, der gleiche Google-Fonds, den wir dort benutzt haben. Und jetzt gehe ich zu und meinen Markt für die Heldenabteilung. Alles, was ich getan habe, ist anders, da ich auch eine jede Klasse hinzugefügt habe, die für das Styling verwendet wird. Und dann lassen Sie uns voran und fügen Sie unsere CSS-Variablen, die die gleichen sind, die wir früher in unserer reaktionsfähigen HTM ill Media Abfrage verwendet haben, ist gut basierend Schriftgröße. Also das ist alles von früher ein Swell und lassen Sie uns in unserem Held Abschnitt Stile als auch hinzufügen, die wir in diesem ersten hören verwendet. Also, jetzt haben wir etwas auftaucht, was gut ist, und lassen Sie uns unsere H one Stile hinzufügen, die für diesen Slogan gelten wird. Wir wollen auch, dass dies wartet und wir haben unsere Body Class-Stile noch nicht hinzugefügt, also können wir das jetzt tun, werden wir unsere Schriftart dort einrichten, was verrückt ist, dass wir auch früher getan haben. Und wir werden auch ein paar andere Überschriften verwenden. Also werde ich etwas Styling für diejenigen hinzufügen, die ich nur minimal bin, ich will nicht, äh, Rand oben drauf, da das Layout beeinflussen wird. Und während ich wirklich toe erscheint, fügen Sie alle meine HTML-Tags-Stile oben hinzu. Ich werde dies nicht tun, um sicherzustellen, dass die Bilder unsere Breite des Browsers nicht überschreiten, was Sie überall sehen werden. Es ist gut zu benutzen. Okay, jetzt haben wir unseren Heldenbereich. Es ist Anzeigeraster, wie wir es zuvor getan haben. Wir haben unseren Slogan. Geben wir uns hier ein bisschen mehr Platz, okay? Ich werde Wir werden ein H zwei Klassen benutzen. Nun, also werde ich einfach und in den Stilen. Und dann werde ich auch die Slogline-Stile kopieren, die aus der ersten Lektion stammen. Das wird es zentrieren, weil es ein Gitter-Kind verwendet. Und es hat eine Marge von Auto genau hier. Also jetzt haben wir unseren ersten Abschnitt fertig. Und dann im nächsten Abschnitt, der neu sein wird, werden wir diese abgewinkelten Kanten hinzufügen. Also werde ich etwas HTML kopieren und einfügen, nur um der Zeit willen. Für einen zweiten Abschnitt wird es unser Laden sein und es wurde bemerkt. Ich sitze in der Farbe Weiß, damit wir das nicht mal sehen können. Okay, ja, wir haben schon die Farbe Weiß. Das gilt nur für den Slogan. Und dann brauchen wir 1/3 Abschnitt, nur so dass ein wenig die Winkelkante sein wird. Also werde ich einen sehr einfachen dritten Abschnitt hinzufügen. Das werden Ereignisse sein, die ich gemacht habe, all diese Bilder aus unspool Asche zu ziehen. Das ist also eine gute Option, wie ich bereits erwähnt habe. Also, jetzt müssen wir nur hinzufügen, sind einige Styling für diesen Store Abschnitt, nur so dass wir einen realistischeren Blick bekommen , wie dies funktionieren würde. Also werde ich hinzufügen, Wir verwenden ein Containertiv in diesem zweiten und dritten Abschnitt, und wir werden statt mit dafür vermischt. Okay, das haben wir erledigt. Dann werde ich einige Stile für unsere Filialabteilung hinzufügen, die im zweiten Abschnitt, an dem wir arbeiten, ein wenig mehr ist. Ähm, ich werde Position relativ verwenden, weil wir das später brauchen, sowie einen C-Index für die Winkelkanten, also ist das da. Und dann lassen Sie uns einige weitere Shop-detaillierte Stile hinzufügen. Dies ist getrennt von den Winkelkanten, und es ist nicht wichtig. Also werde ich das nur um der Zeit willen kopieren. Sie können wirklich, was Sie wollen in diesem Abschnitt setzen. Ich mache nur ein Drei-Spalten-Layout mit CSS Grid, das Onley ist ein einzelner Kometen auf Handy gestapelt und dann bei 100 Pixeln geht es zu drei kommt und dann fügen wir in unserem Event-Abschnitt ist, Nun, es gibt nicht zu viele Stile dafür. So und Sie können setzen, was Sie wollen in diesem Abschnitt ist gut, nur, dass Ah, dritten Abschnitt in der Lage sein, genau die Winkelkanten zeigen. Und jetzt können Sie beginnen, diese Kanten hinzuzufügen, wenn ich verwenden werde, ist eine gute Referenz. Ist dieser Artikel darüber, wie man die Kanten mit Transformationen macht? Ihre Beispiele erwähnten SAS, die nur CSS verwendeten, aber es ist der gleiche allgemeine Ansatz, den diese hier in diesem Artikel behandelt wurden . Okay, also werden wir dem Abschnitt „Shop-Details“ entsprechende Elemente hinzufügen, und das ist es, was diese Winkelkanten erlauben wird, damit wir nach oben gehen, um Details zu speichern , und das ist, wo ich einfach kopieren und fügen Sie dies ein, weil einmal ein bekommen es begonnen , weil es irgendwie eine Menge ist. Und dann werde ich es erklären. Schicken wir es zunächst in Farbe zurück, obwohl an Weiß. Und dann werden wir aufbauen, behauptet zu sein. Und das ist für die harte Kante zuerst, und Sie können sehen, dass es nicht so schwer ist, einzurichten. Also manchmal erfordert es etwas finagle ing. Was ist in diesen Abschnitten, der höchste Wert, den Sie benötigen. Sie passen ebenso wie die Höhe an, aber die Vergis mit Position absolut und das Elternteil ist relativ positioniert und die Magie ist schräg. Das ist also, dass der Winkel 3,5 Grad angewendet wird. Und dann machen wir dasselbe für das untere Bild. Sehr ähnlich. Wir werden die gleiche Hintergrundfarbe verwenden, und das Einzige, was sich ändern wird, ist, dass es sich unten setzen wird, weil wir auf Null sitzen . Also ist es unterhalb der unteren Kante der diese Eltern, die unser Store-div ist. Also jetzt haben wir unsere abgewinkelten Kanten und dann eine andere Sache, die ich hier zeigen wollte, ist, dass man tatsächlich ein Hintergrundbild verwenden könnte. Das ist so etwas wie ein sich wiederholendes Muster und das funktioniert auch mit der Winkelkante. Also werde ich das in Nein hinzufügen und es dann zu unseren beiden Pseudo-Elementen hinzufügen. Und ich werde es auch den Eltern hinzufügen. Dies waas etwas, das ich online generieren konnte. Es gibt Tonnen von SPG Petr Generatoren. Das ist definitiv, dass ich gerade erkannte, dass ich das auf den falschen Abschnitt hatte. Also ist es definitiv etwas zu überlegen, ähm, nach unserem Laden zu suchen. Und da haben wir es. Wir haben abgewinkelte Kanten genauso wie ein bisschen extra. Und es ist definitiv etwas, das Sie tun können, wenn Sie sogar ein sich wiederholendes Muster verwenden, können Sie nur sicherstellen, dass Sie das gleiche Muster anwenden, um Sie zu sind. So verklagen Elemente in diesem Abschnitt und Sie sind gut zu gehen 7. CSS Filter: in diesem Video werden wir behandeln, wie Sie CSS-Filter verwenden können, um visuelles Interesse an Photoshopped wie Effekte alle CSS hinzuzufügen . Der HTML-Code, den wir verwenden, ist also sehr einfach. Wir werden nur den Heldenbereich haben und das war's. In unserem Slogan wird Explorer sein. Und dann gehen wir weiter und stellen sicher, dass Stift-Einstellungen, wie wir die Antwort des Minuten-Tags haben und ich werde die Schriftart hinzufügen, damit ich nur einen Google-Fonds ausgewählt habe. So dass in und das ist es für lehren, zu mähen Sehr einfach. Und ich werde als nächstes hinzufügen Sind CSS-Variablen wirklich weiß? Es wird die Abkürzung benutzen. Wenn alle Zeichen der gleiche Buchstabe sind, können Sie einfach die 1. 3 eingeben und dann werde ich einrichten. Wir werden dies später als unsere CSS-Filtereinstellung verwenden. Ich werde ein Invert von 20% verwenden, das Sie später sehen werden und wie wir es vorher getan haben , lassen Sie uns unsere HTML-Stile hinzufügen. Ich werde auch eine Hintergrundfarbe für den Ausgabemoment festlegen, der aufgrund von Fehlern mit CSS-Filtern benötigt wird . Derzeit auf dem, was ich sah, seine Chrom und Firefox. Also müssen wir diesen Aker und Farbset haben. Es kann nicht transparent sein. Ok? Und dann werden wir einfach unsere Körperstile dafür hinzufügen. Wir werden ein vorausgewähltes Hintergrundbild verwenden, das Sie verwenden können, was auch immer Sie wollen , dass von auf Splash ziehen, wie wir es schon getan haben. Und ich bin in einem verwendet die Szene Hintergrundeigenschaften, die wir verwendet haben. Lassen Sie uns das aufräumen. Ok? Nein, mir wurde gerade klar, dass wir das duplizieren. Ich will keine 100% Deckung, und dann werden wir diesen Beat haben eine volle Höhe der Ihr Teil Harmonien ah, 100 VH mit nur 100% der Höhe. Und dann werden wir hier eine Farbe für den Text festlegen, um zu warten. Und wir haben unsere Frontfamilie noch nicht geklärt. Also wird es das jetzt tun, und das wird auch ein Rasterelement sein, und dann ist der einzige andere Abschnitt der „Wir sind der einzige Abschnitt dieser Seite. Es wird in voller Höhe sein, und das wird ein Flex-Container. Ich habe nicht nur meine Flex-Werte kopieren und einfügen, um Zeit zu sparen. Es stellt es nur in die Richtung des Kamms ein und dann sind wir auch, du weißt schon, zentriert den ganzen Text. Und weil der Körper ein Gitterelemente ist, können wir Marge von Auto wieder in die Mitte Kribbeln machen. Dann werden wir tun, ist und in den Slogline-Stilen werde ich mit einem nicht Gewicht von 600 gehen. Wir beginnen mit der Schriftgröße von vier Freunden für relative Einheiten. Ich werde nur den Buchstabenabstand nur für persönliche Vorlieben. Machen Sie die Dinge ein bisschen näher zusammen. Und dann für weißere Bildschirme, werden wir den Slogan viel größer haben. Wir werden mit 10 Zimmern gehen. Bumm! Es ist groß. Und dann hat der einzige Italiens den Filter gesetzt. Also werden wir den CSS-Filter auf den Körper setzen, Ted. Werfen Sie einen Blick auf das, was wir jetzt haben. Dies ist ohne Filter. Dies ist nur mit unserem Styling an Ort und Stelle. Es ist eine Art Kontrast e mit dem Hintergrund hat viele dunkle Farben und dann warten. Und dann ist unser Text reiner weißer Filter. Wir liefern unseren Invertfilter in Blau. Das ist das Ergebnis davon. Es invertiert grundsätzlich die Farben, aber nur um 20%. Also ist es irgendwie subtil, aber es macht es tatsächlich irgendwie zusammenhängender aussehen. Ähm, und Sie könnten diese Werte definitiv nach Bedarf anpassen. Wenn ich das Debuggen Sie in meinen Dev-Tools öffne, wäre das eine gute Möglichkeit, sich diese Werte anzusehen, und Sie könnten mit anderen Filtern herumspielen. Du könntest große Geschicklichkeit machen. Also, das ist alles schwarz-weiß, was du tun könntest. Es gibt Tonnen von zu Hause, so dass ich auf jeden Fall empfehlen, mit denen zu spielen, um zu sehen, was Sie mögen, was gut aussieht , hängt wirklich davon ab, was Sie auf der Seite als auch haben, so können Sie die Deckkraft anpassen. Es gibt diese sind sehr mächtig, und ich helfe dir, eine Chance zu geben und zu zeigen, dass ich draußen bin. 8. CSS Mischmodi: und in diesem Video werden wir darüber gehen, wie Sie Mischmodi in CSS verwenden können, um Fotoshop wie Effekte hinzuzufügen und wird auch auf das aufbauen, was wir in der vorherigen Liste getan haben. Also lassen Sie uns unser HTML einrichten. Wir werden die Verantwortlichen in einem Tag beenden, und ich werde die szenenbasierten Stile als die vorherigen Lektionen verwenden. Also wird es mit Geld enden und ich möchte eine Kopie und Einfügen in die 20 Bit Markup, die wir verwendet haben , weil das alles ist, was wir auch in diesem Stift verwenden werden. Und wir werden ähnliche CSS-Variablen wie das verwenden, was wir vorher getan haben. Wir werden das Warten in benutzen. Wir werden auch schwarz dieses ein verwenden, und sind gemischt gemischt niedrig, die verwendet werden wird. Wir werden es zum Overlay schicken. Aber es gibt genau wie bei den Tierheimen. Es gibt Tonnen von Optionen und dann später das Ende, Ich werde die Möglichkeit geben, den Filter anzuwenden, den wir in den vorherigen Lektionen verwendet haben. Das werden wir auch zur Verfügung haben. Dann können wir unsere Basis-HTML-Stile einrichten, die wir haben, aber wir haben so Kochstück verwendet, dass und ähnlich wie die CSS-Filter. Es gibt tatsächlich einen Bug in Chrome. Das scheint Crumb auf Lee zu sein. Wir müssen eine Hintergrundfarbe auf dem HTML-Tag setzen. Es kann nicht transparent sein. Andernfalls wird keines der Verschmelzungsmodus angezeigt. Das ist also das. Dann werde ich die Körperstile wiederverwenden, die wir in der vorherigen Lektion verwendet haben. Wir werden das gleiche Hintergrundbild und auch das gleiche ein Helden-Stil verwenden. Also werde ich kopieren tut in diesem gut noch Flex-Container und tatsächlich mit Puts impliziert , dass es 100% mit ist. Also haben wir unseren Helden, die gleichen Stile vorher. Und dann werden wir den Tiger in Stilen wiederverwenden, Wells Büro, kopieren und einfügen. Das ist gut, und dann werde ich den Text nicht in die Mitte stellen, nur weil für die Lesbarkeit die Effekte angewendet wurden . Es macht es schwer, auf dem hinteren Raum zu lesen, deshalb ist das etwas anders als das letzte. Hören Sie, und dann werde ich hier den gemischten Mischmodus anwenden. Es wird auf den Helden Abschnitt gehen, und es ist ein wenig subtil, aber Sie können sehen, wie das Feuer. Entfernen Sie es. Wir haben schwarzen Text, da dies die Standard-Textfarbe ist. Und wenn ich dann den Mischmodus anwende, beginnt er es einfach mit dem Hintergrund zu mischen. Es ist eine Art interessanter Effekt, und es gibt eine Menge von Optionen dafür ist, gut, dass Sie mit spielen könnten. Wenn Sie in den Debug-Modus gehen, könnten Sie inspect tun, und dann können Sie mit C spielen Wir sagten, ist eine CSS-Variable, so dass Sie einfach herumspielen können. Es tut mir Leid. Das ist das Falsche. Wir wollen mit gemischten Blut Stimmung spielen, so dass Sie es auf es könnte einfacher sein. Sagte es nur direkt hier. Okay, angetrieben und Hero Tag Farbe brennen Bildschirm macht es im Grunde verschwinden. Goldversorgung sieht ziemlich ähnlich wie Schwarz aus. Es gibt viele Möglichkeiten hier, also macht es Spaß, damit herumzuspielen. Und dann das andere, was ich Waas zeigen wollte. Wenn wir möchten, könnten wir auch diesen CSS-Filter anwenden, den wir in der vorherigen Liste verwendet haben. Auf diese Weise können Sie sehen, dass Sie die CSS-Filter zusammen mit dem Mischmodus zur gleichen Zeit verwenden und noch mehr Optionen erhalten können , und ich werde einen Link für Code-Stift bereitstellen, den ich erstellt habe, wo Sie Kantate zwischen den beiden gehen und verschiedene Kombinationen und sehen, wie das aussieht. Und ich wollte auch zeigen, dass du versuchen könntest, eine andere Schriftfarbe zu sitzen, wenn wir hier weiß setzen . Das ist auch ein interessanter Effekt, in dem Sie sehen können, wie es wie unbegrenzte Kombinationen Sie tun könnten, so hoffe ich definitiv, dass dies Sie inspiriert, einige dieser ausprobieren. Selbst wenn Sie nur den Filter oder im Mischmodus einzeln verwenden, haben Sie immer noch jede Menge Optionen, und es ist definitiv kann viel visuelles Interesse bieten, also probieren Sie es aus. 9. Bonus: Bonus: Teil I: und diese nächsten zwei Videos werden wir über SPG sprechen und wie wir Elemente von SPG-Dateien mit nur CSS animieren können. Wenn Sie nicht so interessiert an SPG, zögern Sie nicht, Thies zu überspringen, um sie als Bonus-Videos zu betrachten, und Sie können mit dem nächsten die letzte Lektion danach gehen. Also, was ist SPG? SPG ist eine Skala von Wählergrafiken, und das Tolle an ihnen ist, dass sie auf allen Bildschirmgrößen gestochen sind, einschließlich Retina-Displays und Nicht-Retina-Displays. Sie können mit nur CSS animiert werden, wie wir Dio werden. Sie können auch mit JavaScript animiert werden, und sie sind sogar mehrere Möglichkeiten, sie zu verwenden. Sie können sie mit Justin Bild-Tag wie ein normales Bild verwenden. Sie können sie auch direkt in Ihren HTML einbetten, was wir tun werden, um mehr Kontrolle über das Styling zu geben, damit sie ziemlich mächtig sind. Und um Edit S P G's zu erstellen, empfehle ich definitiv Vektorbearbeitungssoftware wie Adobe Illustrator oder es gibt viele freie gibt es gut, ich glaube zu entkommen. Also fühle dich für dich, Zeh, sieh dich um. In Ordnung, fangen wir mit unserer Phase eins unseres SPG-Bones Video an und in dieser ersten Phase werden wir die Assets vorbereiten, die für die zweite Phase verwendet werden, wenn wir sie nach Copan bringen. Wir werden diese kostenlose Winter-Berg-Landschaft benutzen, P und G, und dann werden wir sie ein bisschen zuschneiden, und ein Illustrator wird eine SPG erstellen, die darauf sitzt. Und dann fügen wir unsere Sterne und Illustrator hinzu. Und dann bringen wir alles in den Copan und animieren Sterne. Und weil alles die gleiche Größe hat, wird es mit dem Browser mit zwei nach oben und unten skaliert. So können Sie dieses Bild von hier herunterladen, um loszulegen. Das habe ich schon getan. Ich werde ein neues Dokument in Illustrator erstellen. Sie können jede Vektorbearbeitungssoftware verwenden, die Sie haben. Ich werde mit 2000 Pixeln von 9 60 langen Pixeln für mein Dokument gehen, weil ich das im Bergbild skalierte. Aber Sie können jede Rechteck-Größe verwenden, die Sie wollen. Dann werde ich Aktenordner machen. Ich werde das Bergbild einbringen, und ich werde zeigen, wie Sie das Bild direkt hier in Illustrator herstellen können. Also werde ich Mist machen. Dann wird es automatisch auswählen, was es denkt, dass ich fallen sollte. Aber ich werde das außer Kraft setzen. Ich werde das Schloss treffen, um das Seitenverhältnis beizubehalten. Ich werde auf 2000 Pixel gehen und drücken, anwenden, und dann ist es immer noch ein bisschen zu groß. Also ernte ich wirklich wieder. Es beginnt die automatische Auswahl aus einer Außerkraftsetzung. Das und dann habe ich dieses Seitenverhältnis unisoliert, weil wir jetzt nur noch leeren Raum reiben wollten . Also werde ich die Größe unseres Brettes ungefähr anpassen und dann bewerben wir uns. So ist jetzt unser Bergbild fertig. Der Berg. Es ist gut, Ihre Layer zu benennen. Ich werde es zum Flughafen bringen. Dann werden wir eine neue Ebene für unsere Sterne erstellen. Und zuerst erstellen wir ein Rechteck, nur um sicherzustellen, dass die Sternenebene die gleichen Abmessungen wie dieses Foto hat. Ich kann tatsächlich das Hoch hier eingeben, und es wird dann das Rechteck erstellt, und ich werde das einfach mit dem Bild ausrichten. Und jetzt, wo wir das haben, wird es wirklich verstecken, damit wir sehen können, was wir tun. Die Sterne für die Sterne. Ich werde eine schwarze Füllung und einen transparenten Strich verwenden. Und dann werde ich das Stern-Tool verwenden, und ich werde Sterne in drei verschiedenen Größen von Stern erstellen, wie ein normales Zeichen aus dem Zoom in seiner Wir sehen besser. Das wird also wie die normale Größe sein. Dann verwenden wir diese Ebenennamen später für das Styling. Also rufe ich nur den Star an. Und dann erstellen wir einen etwas größeren Stern, der unser mittlerer Größe sein wird. Wir nennen das Sternengericht Medium und dann erstellen wir einen anderen Stern einen größeren. Es wird aufgerufen, dass gestartet, und dann werde ich tun, ist Kopieren und Einfügen, um mehr von diesen zu erstellen. Und ich werde die gleichen Layer-Namen beibehalten, die später verwendet werden. Wenn Sie auf eigene Faust weitermachen möchten, fühlen Sie sich frei. Ich werde den Rest des Videos beschleunigen. Aber zuerst erkläre ich, wie wir diese Vermögenswerte für die Sterne exportieren werden, die wir tun werden. Stellen Sie sicher, dass wir das Rechteck sichtbar haben, um Dateiexport Auswahl zu tun und dann haben wir die richtige gesetzt hat. Einer sieht gut aus. SPG ist ein Format und stellen Sie sicher, dass dieses Objekt Ideen sagte, um Einkommen zu legen, da sonst die Layer-Namen nicht in der SPG sein. Und das brauchen wir für Styling. Und Sie werden Export-Asset und dann ähnlich für das Bergbild tun. Wenn Sie es beschnitten haben, müssen Sie das auch exportieren. Wir können den Export für Bildschirme tun. Ich vergaß, Teoh will eigentlich nur hoch die Sterne beginnen, damit du nicht verwirrt wirst. Also machen Sie Datei-Export für Bildschirme und wählen Sie unseren Port einen, der unsere Berge enthalten wird. Und PNG ist das Format ein X ist in Ordnung und Export Flughafen. Und jetzt werde ich einfach weiter Sterne erschaffen. So fühlen Sie sich frei, beobachten zu bleiben. Sie können es verlangsamen, wenn nötig, oder ich werde Sie sonst in der nächsten Phase 2 Video sehen und wir sind bereit. 10. Bonus: SVG, Animation, Teil II: Alles klar, jetzt sind wir bereit, unsere Vermögenswerte im Unternehmen zu nutzen. Nur noch einen Schritt, den ich tun werde, was optional ist. Ich werde meine SPG optimieren, indem ich dieses Online-Tool namens SPG org verwende. Es ist kostenlos, das einzige zu verwenden, was ich sicherstellen möchte, dass ich keinen zusammengeführten Pfad festgelegt habe , weil sich das ändern wird. Die tatsächlichen zugrunde liegenden Sterne, die wir sie beibehalten wollen, sind separate Pfade. Solange du auskochst, markierst und es so aussieht und die Sterne hier drin siehst, bist du gut zu gehen. Ich werde das von dort herunterladen und dann sind wir bereit, an ihrem Stift zu arbeiten. Ich habe hier bereits einen neuen Stift angefangen, und ich habe das Meditative hinzugefügt, das wir benutzt haben. Und ich fügte auch Tanzskript hinzu, das ist ein Google Funds. Und ich fügte hinzu, sind HTML-Stile, die wir verwendet haben, sowie dieses responsive Bild-Styling. Nur um sicherzustellen, dass das Bild angemessen skaliert und jetzt können wir an unserem HTML arbeiten. Wir werden eine Div-Klasse von Helden haben, und dann werde ich einen Container haben, um meine Heldenbilder zu halten. Und dann ist es jetzt an der Zeit, diesen SPG tatsächlich zu nutzen. Wir werden es wirklich kopieren und einfügen. Also werde ich es öffnen und steuern ein oder wie Sie wählen, um eine Auswahl alle und dann kopieren und dann einfügen. Und das einzige, was ich tun möchte, ist eine Klasse von Sternen hinzuzufügen. Und während ich hier bin, als du den Titel auch in Sterne geändert hast und dann werde ich diesen ersten Pfad entfernen , der dieses Rechteck war, weil wir ihn nicht mehr brauchen. Also ist unser SPD gesetzt und in demselben div werde ich unser Bild einschließen. Sie können sich frei fühlen, die Stift-Links, die ich zur Verfügung gestellt. Verwenden Sie mein Bild, wenn Sie möchten, oder Sie können. Wenn Sie co print pro Konto haben, können Sie Ihre eigene Datei direkt auf Copan hochladen. Andernfalls können Sie es auf einem Image-Service wie Flimmern hosten oder es funktioniert sogar von Dropbox aus. Also werde ich meine mal sehen, was sie Berg-Mist schließen. Also habe ich die zur Verfügung, die ich hier reinkleben werde. Es ist immer gut, ein Notiz-Tag zu senden. Jetzt haben wir also unsere Berge und unsere Sterne, damit wir anfangen können, während ich hier bin. Ich werde nur den Rest des HTML hinzufügen. Es ist nur ein Slogan. Und jetzt sind wir fertig mit HTML. Anders als ich sehe, habe ich vergessen, unsere Klasse hinzuzufügen, die ihr Styling auf dem Bild braucht, das eine Klasse von Bergen sein wird. Und jetzt haben wir definitiv etwas Styling zu tun. Zuerst werde ich einige CSS-Variablen kopieren und einfügen, die einschließlich unserer Schriftart verwenden werden. Und jetzt können wir voran gehen und anfangen, unsere Stile hinzuzufügen. Ich werde etwas Styling verwenden, das das Bild, es, das Bergbild und unser SPG stapelt es, . Es wird Position lto sein. Wir werden einige Positionierungswerte Marge links von Dame von 100% verwenden. Und das ist nur eine andere Möglichkeit, Dinge übereinander zu stapeln. Jetzt, wo wir können, sehen wir, dass sie gestapelt sind und ich werde auch einen Hintergrund für den Heldenbereich einrichten ,der standardmäßig auf Heldenbereich einrichten , blau und als nächstes werde ich Teoh gehen, also die Heldenbilder taten. Ich werde einige Stile dort über voller versteckter hinzufügen, nur um sicherzustellen, dass alles in das passt , dass unser Container fällt in Null nur versichert. Es gab eine Lücke zwischen dem Bergbild und dem Rand des Aussichtshafens. Das wird also loswerden, weil wir normalerweise nicht Display-Schwarz verwenden können, aber wir wollen das in diesem speziellen Layout nicht verwenden. Als nächstes werde ich nach Tagline-Stilen hinzufügen und ich werde in einigen Medienabfragen hinzufügen, die nur die Seiten erhöhen , weil es auf dem Desktop ein bisschen klein aussieht, der gut aussieht. Und dann können Sie sehen, dass SPG braucht etwas Styling. Die Sterne benutzen immer noch ihre dunklen Phil, und wir wollten warten, damit wir einfach die fill Eigenschaft verwenden können, um das und die Höhe von 100% zu ändern und zu sparen. Okay, jetzt ist der Punkt, an dem wir unsere Sternanimationen hinzufügen werden. Ich werde ein paar verschiedene Schlüsselbilder nur für einige Variationen verwenden. Aber du könntest definitiv eine davon erstellen und sie für alle deine Stars verwenden. Also diese 1. 1 ist für die regulären Größe Sterne, und es ändert nur die Kapazität an verschiedenen Punkten in der Animation auf. Dann bekommen die größeren Sterne diese Schlüsselbilder. Es ist also nur eine Änderung der Deckkraft, aber nur etwas unterschiedliche Eigenschaftswerte zu verschiedenen Zeiten. Und dann für die mittleren Sterne habe ich sogar einen anderen. Also wollte ich nur viel Variation hinzufügen, aber das musst du definitiv nicht tun. Und dann werden wir die Animationen hinzufügen, so dass wir diese Keyframes verwenden. Also müssen wir die Datenattribute und R-Selektoren verwenden. Das wird also für die kleinsten Sterne sein. Und ich werde vier Sekunden den Animationsschlüssel gehen, ehrlich gesagt, funkelnder Stern, er wird sich für die Lockerung erholen. Ich bin in einem verzögerten es für den ersten Lauf für 0,2 Sekunden nur für einige weitere Variation starten. Es wird sich für immer wiederholen, in alternative Richtungen gehen und tatsächlich rückwärts laufen. Und dort kann man sehen, dass es bereits wirksam wird. Und die Kopie dieses und wir werden eine ähnliche Sache didieren. Aber für die mittleren Sterne gehen wir mit drei Sekunden. Es ist gut, diese Ereignisse nur für ein paar mehr Interesse zu variieren. Nur weil die Natur ist, hat auch eine Menge Varianz. Wir gehen mit vier Sekunden Verzögerung dorthin und wir werden nicht die Rückwärtsfahrt benutzen und dann werden wir die Sterne und ich werde zwei Sekunden dort gebrauchen, und das wird die großen, großen Stern-Schlüsselbilder bekommen . Und wir werden auch wieder rückwärts gehen, nur zur Variation, und Sie können sehen, dass das schon passiert. Jetzt werde ich Dinge wiederholen und sieht gut aus, und es gibt nur einen anderen Satz von Schlüsselbildern, die ich hinzufügen werde. Und das ist für den Heldenbereich, die Hintergrundfarbe. Ich habe beschlossen, dass ich das auch wollte . Ändern Sie sich. Es wird mit dem Blau beginnen, das wir gesetzt haben, und dann geht es zu einem dunkleren Blau und dann zu einem noch dunkleren Blau, und wir werden das auf den Find our our Held Bereich anwenden. Wir werden mit Faultieraufzeichnung auf Schlüsselbildern gehen, die ich gerade erstellt habe. Ich werde eine Dauer von festlegen. Das war etwas, was ich brauchte. Sie können mit den Werten sicher spielen. Ich werde mit zwei Sekunden Verzögerung gehen, wenn ich der erste Lauf vielleicht für eine Weile ausgeht, und dann sind wir auch an Ort und Stelle gewesen, und Sie können sehen, wie Sie viel mit diesen subtilen Animationen zusammen machen können. Es ist etwas ziemlich Einzigartiges. Ich hoffe, dass dies Sie dazu inspiriert, einige Animationen mit SPG auszuprobieren und sie definitiv mit einem PNG für zusätzliche Styling-Optionen zu überlegen . 11. Standortübersicht: und schließlich, in diesem Video, wollte ich einige Überlegungen zu beachten, wenn Sie eine der Techniken, die wir in diesem Kurs behandelt haben, verwenden . Zunächst einmal einige Richtlinien für Animationen, die Sie vermeiden möchten, in Animationen hinzuzufügen, die die Fähigkeit Ihrer Benutzer, mit Ihrer Website zu interagieren, beeinträchtigen . So, zum Beispiel, eine Block-Site, die Sie nicht wollen, um eine lange Animation, die über den ganzen Bildschirm fliegen. Das macht es schwierig für Benutzer, Ihre Blutposten oder auf einer Händler-Site etwas zu lesen , das es einem Benutzer schwer macht, den Checkout-Float durchzugehen. Sie sollten auch Ihre Animationsdauer entsprechend einstellen, also wäre dies normalerweise eine halbe Sekunde oder weniger so kurz, dass es nicht für immer läuft und den Benutzer ablenkt und dann in Bezug auf Leistung, die besten Eigenschaften, um unsere Fähigkeit zu Feind und verwandeln diejenigen geben die reibungslose Leistung. Und wenn Sie weitere Informationen dazu suchen, werde ich einige Links zur Verfügung stellen und die Ressource ist in Bezug auf Stile. Sie sollten sicherstellen, dass Text lesbar ist, wenn unter dem Text viel los ist. Offensichtlich gibt es definitiv eine Möglichkeit. Der Text wird nicht so lesbar sein. Sie möchten also sicherstellen, dass Sie Ihre Schriftfarbe, Ihre Hintergrundfarbe und jede körnige und auch geliefert berücksichtigen. Aziz. Die Farben des verwendeten Bildes und die Vorderseite, die Sie verwenden, sollten Sie ein Farbkontrastwerkzeug verwenden, wenn Sie die Farbpalette für Ihre Website auswählen. Dies wird Farben für Hintergründe und für Fox enthalten, und ich werde auch einige Links dafür zur Verfügung stellen. Und dann, wenn Sie neuere CSS-Eigenschaften verwenden, einschließlich CSS-Raster-CSS-Filterkombinationsmodi , sollten Sie die Browserunterstützung berücksichtigen, die Sie verwenden können. Kann ich Dot Orgs Zehe verwenden? Schauen Sie nach, was die Browser-Unterstützung ist, und stellen Sie dann sicher, dass Sie einige Fallbacks für ältere Benutzer bereitstellen , so dass sie immer noch eine gute Erfahrung haben. Leslie. Sie möchten Ihre Bilder optimieren. Sie können Bild Optima Fear auf Mac verwenden. Sie können webbasierte Tools verwenden, und ich werde einige weitere Links zur Verfügung stellen. sicher, dass Sie diesen zusätzlichen Schritt machen, nur um Ihre Benutzer daran zu hindern, für immer riesige Bilder auf Ihrer Website herunterzuladen, und ich hoffe, das war hilfreich 12. Schlussbemerkung: Sie haben den Kurs abgeschlossen. Herzlichen Glückwunsch und vielen Dank, dass Sie diese Klasse genommen haben. Ich hoffe, dass Sie mit einigen neuen Techniken weggehen, die Sie in Ihrem nächsten Webprojekt verwenden können , wo Sie ein wenig visuelle Interessen für das Klassenprojekt betrachten, Sie werden zwei oder mehr der Techniken, die wir in dieser Klasse gelernt haben, und wenden Sie sie in Ihr eigenes Webprojekt an. auch einen Cope bereit, der als Ausgangspunkt verwendet werden könnte, wenn Sie kein aktuelles Projekt haben . Wenn Sie möchten, dass Ihre Codestift-Vorlage zu der Klassensammlung hinzugefügt wird, die ich auf Copan erstellen werde , lassen Sie es mich wissen. Nochmals vielen Dank und bis zum nächsten Mal.