Webdesign mit HTML5 + CSS3 Sondereffekten :: Drehende Gizmos erstellen | Jeb Riordan | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Webdesign mit HTML5 + CSS3 Sondereffekten :: Drehende Gizmos erstellen

teacher avatar Jeb Riordan, Project Manager | Web Developer | jebriordan.com

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

5 Einheiten (12 Min.)
    • 1. Einführung:: Erstellen von zwei rotierenden Gizmos

      1:23
    • 2. Flexibles Box

      2:34
    • 3. Gizmo drehen :: Beispiel 1

      3:14
    • 4. Gizmo drehen :: Beispiel 2

      3:26
    • 5. Schlussgedanken

      1:12
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

148

Teilnehmer:innen

2

Projekte

Über diesen Kurs

Kombiniere HTML und CSS in deinem Webdesign, um tolle Sondereffekte zu machen.

Mit der Einführung von HTML5 und CSS3 gibt es eine ganze Reihe von Sondereffekten, die wir in unsere Webentwicklung ohne ein einziges PHP-, Jquery oder Java-Skript enthalten können

Und das ist gut richtig?

In dieser Reihe von Kursen untersuchen wir eine ganze Reihe von Spezialeffekten, um unser Webdesign zu verschönern und unseren Website-Besuchern zu zeigen, was wir wollen, was sie tun.

In diesem Kurs erstellen wir:

Zwei sich drehende Gizmos. Nicht wirklich nützlich, aber wird Interesse für deine Website-Besucher hinzufügen.

Und du kannst deine Codierungsfähigkeiten anwenden, richtig...

Achte auf mehr Webdesign mit HTML5 und CSS3 Kursteilnehmern auf. Bald kommen: Fancy Knöpfe, Fancy und Karussell...

Triff deine:n Kursleiter:in

Teacher Profile Image

Jeb Riordan

Project Manager | Web Developer | jebriordan.com

Kursleiter:in

My name is Jeb Riordan and I've been a project manager for, well, too long.

Primarily in the telecommunications sector I have managed multi-million dollar projects in more than ten different countries, including, the UK, Australia, Thailand, Indonesia, Pakistan, Cambodia and the Caribbean.

I am a past member of the UK based Association for Project Management (APM) and the USA based Project Management Institute (PMI).

Although no longer a member of any professional institution I have maintained my PMI Project Management Professional Certification (PMP) status because it includes an element of continuing professional development (and it looks good on my resume!)

Now my focus is on managing web development projects. And moving from the traditional waterfall proj... Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung:: Erstellen von zwei rotierenden Gizmos: mit der Einführung von Eile, TML fünf und CSS drei. Es gibt eine ganze Reihe von Spezialeffekten, die wir in unsere Webseiten-Designs ohne ein einziges Schweine BJ Kriel, JavaScript und das ist eine gute Sache, richtig? In dieser Reihe von Kurzkursen werden wir eine ganze Reihe von Spezialeffekten erkunden, um unsere Websites zu verschönern und unsere Website-Besucher zu zeigen. Was wir wollen, dass sie in dieser Klasse tun, wird einige Dinge schaffen, die sich drehen. Das Ergebnis ist nicht wirklich nützlich, aber es sieht cool aus, wenn wir dazu kommen, um CSS drei Schlüsselbilder zu verwenden und die Flex-Box-Schicht des Modells zu erkunden. Diese Klasse ist eine von einer Serie, in der wir Spezialeffekte mit übereilten ML Kämpfen erstellen. Ist seine drei, die Sie heute auf Ihrer Website verwenden können, genau so. Hi, ich bin Jeff Reardon, ein Projektmanager, der sich mit dem Entwickler beschäftigt hat. Aber das reicht über mich, oder? Wenn Sie Ihre Website aufhellen möchten, machen Sie es mehr Spaß Kraftstoff Leser als folgen. Zusammen mit diesem Siri Klassen, denn bald kommen schicke Knöpfe, gleitende Bilder und Auto-Zellen. Also registrieren Sie die Klasse und lassen Sie uns einige rotierende Zifferblätter machen. Ja, drehbare Zifferblätter 2. Flexibles Box: bevor wir anfangen, die Row Taters zu erstellen, möchte ich Ihnen sagen, wie ich die Beispiele auf dem Bildschirm zentriert habe. Damals gab es alle Quellen von Tricks und Hacks, die versuchen, Inhalte in der Mitte zu zentrieren . Div, sowohl horizontal als auch vertikal mit der Einführung von aufhört drei. Wir brauchen keine Floats oder Hacks zu verwenden, weil wir dieses CSS drei flexible Box-Layout ein oder Flex-Bücher kurz haben . Dieses Flex-Box-Modell sorgt dafür, dass sich Elemente auf der Seite so verhalten, wie wir sie wünschen und bietet auch Platz für die verschiedenen Bildschirmgrößen und Geräte. Und es wird getan, indem das Anzeigeeigenschaftenofenelement flex und insight deklariert wird. Dieser Flex-Container ist ein oder mehrere Flex-Elemente. Lassen Sie uns demonstrieren. Also hier haben wir hier konfrontiert, Mel, wir haben ein div mit Klasse Flex-Container. Innerhalb der Haben wir einen Hass eine Überschrift und drei verschachtelte ifs mit Klasse flex Element und senden Text. Der Browser sieht so aus und zeigt die Überschrift auf dem Text im drei Nest an. Es gibt in der CSS. Lassen Sie uns die Klasse für den Flex-Container erstellen, geben Sie ihm eine gewisse Höhe und eine Hintergrundfarbe auf dem Prozess zeigt den Platz, den das DIV belegt . Wir deklarieren die display-Eigenschaft mit value flex im Preiser. Sieht so aus. Die Standardrichtung für die verschachtelten Flexed-Elemente ist wie folgt horizontal, aber wir möchten, dass alle Elemente innerhalb des übergeordneten Containers übereinander stapeln, sodass der Flexrichtungswert auf Spalte festgelegt ist. Jetzt zentrieren wir uns entlang des vertikalen Zugriffs mit dem Justify Content Center. Jetzt zentrieren wir uns entlang des horizontalen Zugriffs mit einem Zeilenpunktcenter und dort haben Sie es . Schauen wir uns nun das Nest an, das es mit den Klassenflex-Elementen gibt. Denken Sie daran, dass alles, was außerhalb des Flex-Containers passiert, normal ist und das Gleiche gilt für alles innerhalb des Flex-Elements. Es gibt auch viele andere Eigenschaftenwertpaare, um das Rendern der Flex-Elemente innerhalb des Flex-Containers zu manipulieren . Aber das Zentrieren ist alles, woran wir gerade interessiert sind. In der nächsten Lektion beginnen wir die Reihe taters 3. Gizmo drehen :: Beispiel 1: beginnen wir mit der ersten Rotatoren-Demonstration. Beginnen wir mit den hassten TML in der Index-Start jagte ihn aus Seite für das erste rotierende Zifferblatt. Wir haben einen Container mit Klassencontainer, jeweils ein Überschrift auf einem Dip mit Klasse, Rotator eins und so Matty Text, so dass wir im Browser zugeben. Und das ist es für den HTML in der Stil-Punkt-CSS-Datei, wir müssen anfangen, den Flex-Container zu finden, den wir es genannt haben, enthielt einen. Wir setzen die Anzeige auf Flex, und jetzt zeigen wir, dass Container mit einem festen Rahmen mit Stil Anfang, weißem Hintergrund, weißem Hintergrund, etwas Polsterung am unteren und etwas Rand außerhalb dieses Containers, um es von der nächsten zu trennen Rotator. Und der Preis ergibt sich so, neben dem Zurücksetzen der Flex-Richtung. Zwei Säulen. Der Ausrichtungsinhalt in den Zeilenelementen, die beide zentriert werden, positioniert diese Flex-Elemente in der Mitte des Containers eins. Und es sieht so aus. Und jetzt der Rotator mit Klasse Rotator eins. Der Tod hat eine Breite und eine Höhe von 100 Pixel in der Hintergrundfarbe von mittelgrau Sieht so aus, als würde der Grenzradius auf 50% den Verteidigungskreis bilden. Wenn Sie den Rand mit 24 Pixel einstellen, wird ein Kreis um acht Pixel Durchmesser Streu am Rand transparent, so dass die Hintergrundfarbe durchscheint. Lassen Sie uns nun das Brett eine obere Farbe auf ein tiefes Rot am Rand unten auf die gleiche tiefrote Farbe setzen . Und dann sind wir im Magic. Die Animation wird durch das Schlüsselbild mit dem Namen Drehen eins definiert. Es vervollständigt in zwei Sekunden in einer linearen Art und Weise auf unbestimmte Zeit. Jetzt müssen wir die Animation finden. Festlegen des Schlüsselbilds. Drehen Sie eins. Die Transformation ist eine Rotation und auch eine Skala bei 0% des Zeitraums. Ihre Drehung ist Null Grad auf einer Skala ist man 50% des Zeitraums haben. Das DIV dreht sich um 180 Grad und skaliert bis zu 1,2 bei 100% des Zeitraums. Die Dip wird auf den vollen Kreis gedreht, und die Skala wurde auf eins reduziert. Jetzt schauen wir uns an, wie es funktioniert. Wir können mit dem Animations-Timing auf die Transporteigenschaften spielen, um die verschiedenen Effekte zu sehen . Zum Beispiel, entfernen wir die Transformation 50% Jetzt dreht es sich nur. Spielen Sie mit dem Timing, den Drehgraden auf der Skala herum und sehen Sie, welche seltsamen und wunderbaren Formen wir machen können. Und das war's für den Rotator. Einer in der nächsten Lektion, auch Rotator . 4. Gizmo drehen :: Beispiel 2: in diesem zweiten Beispiel wird die Richtung von eins umkehren. Dave und ich haben die Schlüsselbilder für Rotator auskommentiert. Willst du damit aufhören, sich zu drehen? Es könnte ein wenig nervig werden. Schneiden Sie es ab. Fangen wir nun auch mit dem übereilten Mel für Rotator an. Wir haben einen Container mit Klassencontainer zu H eins, Überschrift investigativ mit Klassenrotator, auch, auch, und ein anderes verschachteltes Dip mit Klasse gedreht, um zu wiegen. Und das ist es für den HTML. Im CSS definieren wir den Container auf den gleichen wie Container eins mit dem Display-Flex-Modell. Das Styling für die Container-Flexrichtung ist ein Kahlan. Legal ex-Elemente im Flex-Container werden übereinander gerendert und dann Inhalte rechtfertigen Online-Inhalte, die gesagt werden, um alle Flex-Elemente zu überzeugen, in der Mitte des Containers zu rendern . Und es sieht so aus, als wäre dies eine Kopie des Rotators gleicher Größe mit einem hellgrauen Hintergrund. Sie machen das Rechteck Kreis. Wir haben eine Grenze für Pixel breit, solide mit einer rosa Farbe, so dass wir es für jetzt sehen können. Fügen Sie dann Farbe zum Rahmen hinzu. Reden Sie im Hafen der Begnadigung. Die Animation trägt den Namen Drehen zu hat eine lineare Form von vier Sekunden Zykluszeit. Es hört nicht auf. Die zweite Drehung zu a ist ähnlich, aber anders. Wir müssen es relativ zu seinem Container positionieren die Breite und die Höhe wird um ein Pixel erhöht und für jetzt, machen Sie die Hintergrundfarbe gelb. Nun, beide Rotator zehr sichtbar. Wir können den Text in HTML entfernen gibt Wir machen das Rechteck in einen Kreis. Lassen Sie uns den Port sichtbar machen, indem Sie die Farbe zu blau ändern, und wir können die Hintergrundfarbe entfernen, ändern Sie sie von gelb zu transparent. Jetzt müssen wir den zweiten Rotator rechts oben auf dem ersten Rotator positionieren, ihn um 12 Pixel nach links bewegen, bewegen ihn um 30 Pixel nach oben. Oh nein, nicht 30 Pixel, 12 Pixel. Und dann setzen wir die Grenze links eine schöne grüne Farbe. Und dann haben wir gesagt, die Grenze direkt auf der gleichen schönen grünen Farbe. Entfernen Sie dann den blauen Rand und machen Sie ihn transparent. Auf der Animation wird Rotate to A mit einem zwei Sekunden Timing linear unendlich genannt, und es sieht so aus. Jetzt müssen wir die Animation mit einer Reihe von Schlüsselbildern starten, die erste, wenn drehen wird im Uhrzeigersinn 360 Grad in vier Sekunden drehen, die zweite, wenn zu einem drehen wir drehen wir gegen den Uhrzeigersinn, 360 Grad in zwei Sekunden. Mal sehen, ob es funktioniert und da hast du es. 5. Schlussgedanken: Durch die Kombination von HTML five und CSS three ist es möglich, einige ziemlich interessante Spezialeffekte für Ihre Website zu machen. Dieses Beispiel von rotierenden Dips macht visuell Spaß, aber ehrlich gesagt, hat keinen wirklichen Zweck außer Ihnen eine Codierungspraxis zu geben und Ihre versierten CSS-Fähigkeiten zu zeigen . Und das ist keine schlechte Sache, oder? Wir haben die Verwendung der folgenden CSS-Eigenschaften untersucht, Ausrichten von Elementen mit dem flexiblen Box-Layer-Modell relative Positionierung Rahmenstile, Randradius, um einen Kreis Rahmeneigenschaften für die Spitze zu machen. Für die Verzeihung Langeweile links Porter rechts Animation mit Schlüsselrahmen und die Transformation drehen im Uhrzeigersinn und gegen den Uhrzeigersinn und Skalierung. Wenn Sie Fragen haben, ich bin hier, um zu helfen Bitte fragen Sie mich etwas. Wenn Sie die Klasse nützlich finden, geben Sie mir bitte einen Daumen hoch und posten Sie die Ergebnisse Ihres Projekts im Projektbereich. Diese HTML- und CSS-Dateien finden Sie im Projektbereich unter Suchen Sie nach mehr Webdesign. Spezialeffekte mit HTML fünf und CSS drei