Erste Schritte mit HTML5 / CSS3: Tipps, Vitrinen und Codierungsbeispiele

HTML5 wird immer beliebter und beginnt, die gesamte Weboberfläche zu entwickeln. Sogar einige Webentwickler zitierten, dass HTM5-Elemente und visuelle Effekte mit Flash vergleichbar sind. Der neue Skriptstil ist leicht zu verstehen und die Möglichkeiten zur Verbesserung der Weboberfläche sind unbegrenzt. Wie interessant ist dieses HTML5 überhaupt??


Dieser Artikel soll den Lesern einen Einblick in das geben, was Sie über HTML5 wissen sollten, und vor allem einige Tipps & Tricks zum Erstellen leichter, attraktiver und interaktiver HTML5-Seiten.

1. Grundlegend in HTML5

HTML5

Bevor wir mit diesem Thema in HTML5 fortfahren, sollten Sie zuerst Ihren aktuellen Browser überprüfen. Da sich viele der Browser noch im Entwicklungsmodus befinden (Erweiterung zur Anpassung an HTML5), können einige der hier genannten Funktionen möglicherweise nicht unterstützt werden.

Hier finden Sie kurze Tipps zur Überprüfung Ihrer Browser-Kompatibilität.

Um die Einschränkungen eines bestimmten Browsers besser zu verstehen, können Sie sich darauf beziehen Hier.

2. Texteffekte – Hinzufügen von Schatten und Erweitern des Texteffekts in HTML5

Texteffekte in HTML5

Grundlegender Schatteneffekt auf Text

Dies ist der einfachste Code für eine Zeichenfolge, der Ihre normale Überschrift in einen cool aussehenden Text verwandelt. Unterschätzen Sie niemals den Schatteneffekt. Um diesen ähnlich aussehenden Effekt zu erzielen, muss der Webdesigner mehrere Schritte der Bildbearbeitung in Photoshop ausführen. Und jetzt ist nur noch eine Codezeile erforderlich. Der Schattenabstand und die Farbe können nach Herzenslust geändert werden.

Codierungsprobe

#shadow h1 {
Textschatten: 0px 1px 1px rgba (0,0,0, .2);
}}

Text zum vorab feuerähnlichen Effekt

Der nächste Tipp zeigt Ihnen, wie Sie die HTML5-Codierung in einen noch cooleren Text umwandeln können. Wenn Sie genug experimentieren oder andere Beispiele finden, gibt es unendlich viele Möglichkeiten, die Effekte anzupassen. Hinweis: Dieses Beispiel wird von keiner Bildbearbeitungssoftware erstellt. Nur einfache Codes in HTML5.

Codierungsprobe

#fire h1 {
Textausrichtung: Mitte;
Rand: 200px Auto;
Schriftfamilie: "Liga-Gotik", Kurier;
Schriftgröße: 200px; Texttransformation: Großbuchstaben;
Farbe: #fff;
Textschatten: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10px -90 80px # 451b0e;
}}

Ein weiteres gutes Beispiel: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Abgerundete Ecke in HTML5

Abgerundete Ecke in HTML5

Das Styling des Webseitenlayouts in HTML5 war seit Einführung von CSS noch nie so einfach. Und jetzt können Sie sogar abgerundete Ecken Ihrer Layoutelemente haben! Stell dir das vor; Kein Schneiden von Hintergrundbildern mehr, keine unordentlichen Bildfragmente mehr. Dies wird den Webdesignern da draußen viele Beifall bringen.

Codierungsprobe

div {
Rand: 2px fest # 434343;
Polsterung: 10px;
Hintergrund: # e3e3e3;
-Moz-Rand-Radius: 10px;
-Webkit-Rand-Radius: 10px;
Breite: 500px;
}}

Hinweis: Moz bedeutet Mozilla und Webkit ist für Safari und Chrome.

Ein weiteres gutes Beispiel: http://fjd1.com/roundcorner.html

4. Skalierbare Vektorgrafik (SVG) in HTML5

HTML 5-Tutorials, Anleitungen und Beispiele

Skalierbare Vektorgrafiken oder allgemein bekannt als (SVG) sind zweidimensionale Vektorgrafiken, die in XML-Textdateien definiert sind. Mit anderen Worten, da ihre DNA auf einer XML-Textdatei basiert, können sie auf der Webplattform erstellt oder bearbeitet werden. Dies bedeutet auch, dass die Skalierung einfach ist und Suchmaschinen das Bild lesen und verstehen können.

Beispielcode

Andere gute Beispiele:

5. Einbetten der Filmdatei in HTML5

Video in HTML5

Hier ist ein weiterer interessanter Teil, um die Funktionen von HTML5 zu demonstrieren. Viele der Online-Videos werden dem Webbenutzer normalerweise in Form von Flash präsentiert. Bis vor kurzem gewann die Einbettung von Videos in HTML5 langsam an Dynamik (YouTube ist ein gutes Beispiel), und Flash verliert langsam an Attraktivität. Warum ist das so? Mobile Benutzer. Wenn Sie möchten, dass Ihr Video sowohl auf iPhone- als auch auf Android-Handys abgespielt werden kann, ist HTML5 der richtige Weg, um voranzukommen.

Um das Video einzubetten, müssen Sie wissen, dass derzeit 3 ​​Formate von verschiedenen Browsern unterstützt werden. .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Beispielcode

Ein weiteres gutes Beispiel: https://www.html5rocks.com/de/tutorials/video/basics/

6. Folienpräsentation in HTML5

HTML 5-Tutorials, Anleitungen und Beispiele

Powerpoint ist ein Synonym für die Präsentation von Folien. Aber warum sollten Sie sich auf eine Offline-Präsentation beschränken, in der Sie Folien für das Webpublikum erstellen können? HTML5 hat sich als hilfreich erwiesen, indem es leistungsstarke Präsentationsfolien mit Übergangs- und Navigationsmenü erstellt hat. Das Beste daran ist, dass Sie sogar eine 3D-Transformation auf Ihre Präsentation anwenden können.

Beispielcode

Vor {
Übergang: alle 1s Easy-Inout;
}}

pre: hover {
Hintergrundfarbe: # F2F5FE;
Randfarbe: schwarz;
}}

div {
transformieren: drehen3d (1,1,0, 45 Grad);
}}

Andere gute Beispiele:

7. Bearbeitbarer Inhalt in HTML5

HTML 5-Tutorials, Anleitungen und Beispiele

Statischer Text ist in Zeiten, in denen Flexibilität und Dynamik die Welt beherrschen, so altmodisch. In HTML5 können Sie einen Textbereich definieren, der vom Webbenutzer ohne Texteditor bearbeitet werden kann.

Beispielcode

Dieser Inhalt kann bearbeitet werden!

Ein weiteres gutes Beispiel: http://html5demos.com/contenteditable

8. Interaktives Web Canvas in HTML5

HTML 5-Tutorials, Anleitungen und Beispiele

Neben SVG in HTML5 ist Canvas das nächstbeste, was jemals im Web passiert ist. Mit Canvas können zweidimensionale Formen gerendert werden, die die Interaktivität ohne die Hilfe von Flash auf ein ganzes Niveau bringen.

Dennoch ist die einfache Codierung in HTML5, die eine erstaunliche Animationsinteraktion erzeugt, hier erwähnenswert.

Ein weiteres gutes Beispiel: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Ziehen und Ablegen in HTML5

HTML 5-Tutorials, Anleitungen und Beispiele

Drag & Drop (manchmal auch als DnD bezeichnet) ist eine weitere coole Funktion, die HTML5 zur Verfügung steht. Ein gutes Beispiel wäre die Implementierung von Google in Google Mail. Wenn Sie einen der von HTML5 unterstützten Browser verwenden, können Sie einfach eine Datei von Ihrem Computer ziehen und in das Fenster zum Erstellen von Nachrichten ablegen. Es wird automatisch als Anhang hinzugefügt. Wie cool ist das?

Beispielcode (natives DnD)

document.addEventListener (‘dragstart’, Funktion (Ereignis) {
event.dataTransfer.setData (‘text’, ‘Customized text’);
event.dataTransfer.effectAllowed = ‘copy’;
}, false);

Ein weiteres gutes Beispiel: http://www.html5rocks.com/de/tutorials/dnd/basics/

10. Reines CSS-Datendiagramm in HTML5

HTML 5-Tutorials, Anleitungen und Beispiele

Vor HTML5 ist es auch unmöglich, ein präsentierbares Diagramm zu erstellen, indem nur die Codierung in HTML verwendet wird. Darüber hinaus ist es keine einfache Aufgabe, den Datenwert zu ändern und im Diagramm wiederzugeben. Wieder HTML5 zur Rettung. Zusammen mit CSS können Sie ein wunderschönes Diagramm erstellen, das Microsoft Excel in den Schatten stellt. Die Codes sind einfach und Sie müssen nur Zeit aufwenden, um die perfekte Farbe und den perfekten Effekt für Ihr Diagramm anzupassen.

Ein weiteres gutes Beispiel: http://cssglobe.com/pure-css-data-chart/

Ich kann nicht genug von HTML 5 bekommen?

Wir auch! Hier erfahren Sie mehr zum Thema. Schauen Sie sich diese an.

* * 30 sehr coole Beispiele für HTML 5-Websites
* * Erste Schritte mit HTML 5
* * Muss HTML 5 Tutorials im Jahr 2012 lesen
* * Lernen Sie HTML 5: 10 Lektionen müssen gelesen werden

Schauen Sie sich auch an  Dieser HTML 5 Crashkurs von Robin Nixon. Robin Nixon ist der Autor von Learning PHP, MySQL und JavaScript. Der Kurs behandelt so ziemlich alles, was ein Neuling in HTML5 wissen muss – einschließlich grundlegender HTML-Codierung, HTML5-Zeichenfläche zum Zeichnen, Geolokalisierung, lokaler Speicherung sowie HTML5-Audio und -Video.

Der Originalartikel wird erstmals am veröffentlicht WHSR Blog;; Es wird jetzt von BuildThis.io-Mitarbeitern verwaltet und aktualisiert.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map