Dies ist ein häufiger Fehler, da trotz der Auswahl guter Schriftarten die Art und Weise, in der der Text zur Größe des Fensters passt, sehr wichtig ist, da dies die Lesbarkeit der Informationen verbessert, die wir auszudrücken versuchen.
REM die neue Maßnahme
Wenn wir das Wort REM hören oder lesen, denken wir wahrscheinlich an die Pop / Rock-Band der 90er Jahre, aber in HTML5 ist es ein neues Maß, um die Größe unserer Schriften auszudrücken, und es ergibt sich aus der Vereinigung des Wortes Root und der Maßeinheit EM .
Wir werden ein Paar Stile erstellen, die aktiviert werden, wenn sich unser Bildschirm im Hoch- oder Querformat befindet. Auf diese Weise können wir ein entsprechendes Dienstprogramm anzeigen. Es ist nicht so, dass Leute unsere Bildschirmgröße ändern, aber dies ist besonders nützlich, wenn unsere HTML- Seite beispielsweise in Tablets oder Smartphones verwendet wird .
Unser erstes Beispiel
Um dieses Beispiel zu erstellen, benötigen wir einen relativ langen Text. Das Ideal ist, dass es sich um zwei oder drei Zeilen handelt. Auf diese Weise können wir in einem besseren Kontext bewerten, wie sich der Text ändert, wenn wir die Größe des Bildschirms ändern Beispiel: Wenn wir das klassische ” Lorem Ipsum ” im Internet verwenden, können wir mehrere Seiten erhalten, die Testtexte generieren, einschließlich einiger, die kinematische Beispiele zur Generierung von Testtexten verwenden.
– Vamos a crear un documento HTML que va a contener dos párrafos y cada párrafo va a tener una clase diferente de esta forma a través de CSS3 podremos dar el estilo responsive , veamos el código que debemos incluir en nuestro archivo .html: 1 – Wir erstellen ein HTML- Dokument, das zwei Absätze enthält, und jeder Absatz hat eine andere Klasse. Auf diese Weise können wir über CSS3 den Antwortstil festlegen. Sehen wir uns den Code an, den wir in unsere HTML-Datei aufnehmen müssen:
<! DOCTYPE html> <html lang = "de"> <head> <meta charset = "UTF-8"> <title> Responsive Typografie </ title> </ head> <body> <p class = "first"> Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Donec hendrerit leo sapien, nec efficitur dolor vestibulum in. Vestibulum pretium, ex ut eleifend placerat, meine ante accumsan neque, nicht rutrum ante urna id diam. </ p> <p class = "second"> Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Donec hendrerit leo sapien, nec efficitur dolor vestibulum in. Vestibulum pretium, ex ut eleifend placerat, meine ante accumsan neque, nicht rutrum ante urna id diam. </ p> </ body> </ html>
– Ahora debemos crear dentro de la etiqueta <head> una etiqueta <style> donde vamos a crear los estilos necesarios, en primer lugar debemos crear el tamaño raíz para nuestras tipografías y luego vamos a crear el tamaño para la clase segunda. 2 – Jetzt müssen wir innerhalb des <head> -Tags ein <style> -Tag erstellen, in dem wir die erforderlichen Stile erstellen. Zuerst müssen wir die Stammgröße für unsere Schriftarten und dann die Größe für die zweite Klasse erstellen. Schließlich verwenden wir für die erste Klasse die Ressource @media , um die Ausrichtung des Bildschirms zu ermitteln und damit die entsprechenden Anpassungen vorzunehmen. Sehen wir uns den Code für unsere Stile an:
<style> html {Schriftgröße: 14px;} p.second {Schriftgröße: 1rem;} @media screen und (Ausrichtung: Hochformat) {p.primera {Schriftgröße: 3rem;}} @media screen und ( Ausrichtung: Querformat) {p.primera {font-size: 1rem;}} </ style>
Sehen wir uns nun an, wie unsere Absätze aussehen, wenn wir unseren Bildschirm neu dimensionieren. Zunächst sehen wir, wie er im Hintergrund aussieht:
Hier bemerken wir keinen großen Unterschied, aber wenn wir in den Hochformatmodus wechseln, werden wir sehen, wie die auf unser Dokument angewendeten Stile ihre Arbeit erfüllen:
Hier konnten wir sehen, wie das REM- Maß funktioniert. Im Querformat wird die Größe im Verhältnis 1: 1 beibehalten, und wenn wir in den Hochformatmodus wechseln, ändert sich der von uns erstellte Stil in ein Verhältnis 3: 1 , sodass der Größenunterschied für die erste Klasse, in der die zweite Klasse unterhalten wird.
Hinzufügen von Schatten zu Texten innerhalb einer Leinwand
Ein weiterer Aspekt, den wir für unsere reaktionsfähigen Websites verwalten müssen, ist die Anwendung von Effekten, da wir mit ihnen unterschiedliche Gefühle und Empfindungen in Bezug auf die Informationen erzielen können, die wir auf unseren Websites anbieten.
Eine Möglichkeit, diese Effekte anzuwenden, ist das Canvas- Label. Hier können wir die Wörter zeichnen und dann den erforderlichen Stil anwenden. Die einzige Besonderheit ist, dass wir ein bisschen JavaScript- Code benötigen, um das folgende Beispiel erstellen zu können. Sehen wir uns die Schritte an, die wir unternehmen müssen, um dies zu erreichen:
– Vamos a crear un documento HTML con un elemento canvas dentro del body , donde le aplicaremos un identificador único, esto con la finalidad de poder ubicar dicho elemento desde JavaScript y así poder manipular su aspecto de forma más sencilla. 1 – Wir erstellen ein HTML- Dokument mit einem Canvas- Element im Körper , in dem wir einen eindeutigen Bezeichner anwenden, um dieses Element in JavaScript zu lokalisieren und auf diese Weise seine Darstellung auf einfachere Weise zu ändern.
– Luego al final del body vamos a crear una etiqueta <script> y ahí vamos a crear un objeto obteniendo nuestro canvas a través de su identificador, aquí podremos ir modificando sus propiedades como la difusión, el color y la posición de la misma. 2 – Dann erstellen wir am Ende des Körpers ein <script> -Tag und dann erstellen wir ein Objekt, indem wir unsere Zeichenfläche über seine Kennung beziehen. Hier können wir seine Eigenschaften wie Diffusion, Farbe und Position ändern.
– Finalmente con un método podemos colocar el texto dentro del elemento canvas, obteniendo así nuestro texto dibujado y con sombras. 3 – Schließlich können wir mit einer Methode den Text innerhalb des Canvas- Elements platzieren , wodurch unser Text gezeichnet und mit Schatten versehen wird. Sehen wir uns den Code für unseren HTML- Code an, der auch den JavaScript-Code enthält:
<! DOCTYPE html> <html lang = "de"> <head> <meta charset = "UTF-8"> <title> Text mit Schatten </ title> </ head> <body> <canvas id = "shadow" > </ canvas> <script type = "text / javascript"> var canvas = document.getElementById ('shadow'); var ctx = canvas.getContext ('2d'); ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = "rgba (0, 0, 0, 0,5)"; ctx.font = "20px Times New Roman"; ctx.fillStyle = "Schwarz"; ctx.fillText ("Unser Text mit Schatten", 5, 30); </ script> </ body> </ html>
Sehen wir uns nun das Ergebnis an, das wir in unserem Browser sehen können:
Dieses Beispiel ist sehr einfach, aber die Verwendung von JavaScript kann mehr als einen Designer erschrecken, der nur HTML und CSS kennt. Es lohnt sich jedoch, diese Art von Lösungen zu verstehen, um mehr Ressourcen für die Entwicklung besserer Benutzeroberflächen für den Benutzer zu haben.
Drehen Sie den Text
Ein weiterer großartiger Trick, den wir auf unserer responsiven Seite implementieren können, ist die Rotation des Texts. Auf diese Weise können wir Inhalte erstellen, die anders aussehen, als wir normalerweise die Informationen finden.
In diesem Beispiel behalten wir den vorherigen Code bei, da wir auch JavaScript verwenden , um die gewünschten Effekte zu erzielen. Wir werden jedoch einige Änderungen im Skript-Tag vornehmen:
<! DOCTYPE html> <html lang = "de"> <head> <meta charset = "UTF-8"> <title> Text mit Schatten </ title> </ head> <body> <p> </ p> <canvas id = "shadow"> </ canvas> <script type = "text / javascript"> var canvas = document.getElementById ('shadow'); var ctx = canvas.getContext ('2d'); canvas.width = 250; canvas.height = 250; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = "rgba (0, 0, 0, 0,5)"; ctx.font = "20px Times New Roman"; ctx.fillStyle = "Schwarz"; ctx.rotate (Math.PI / 4,0,0); ctx.fillText ("Unser gedrehter Text", 140, 1); ctx.strokeText ("Unser Text gedreht", 140, 1); </ script> </ body> </ html>
Wie wir sehen, gibt es einige Unterschiede zum vorherigen Beispiel. Zuerst definieren wir eine neue Größe für unsere Leinwand , damit unsere ursprüngliche Leinwand nicht aufgrund der Standardgröße deformiert wird. Dann wenden wir die Rotationsmethode auf unsere an Objekt des Kontexts und schließlich, nachdem Sie den ursprünglichen Text gezeichnet haben, müssen Sie ihn beim Drehen neu zeichnen, damit er angezeigt wird. Daher verwenden wir die strokeText- Methode.
Sobald der gesamte Vorgang abgeschlossen ist, erhalten wir das folgende Ergebnis, wenn wir unsere Seite im Browser ausführen:
Sehr interessant ist, dass Sie wahrscheinlich bemerkt haben, dass der Text trotz Drehung die Schatten beibehält, die wir angewendet haben. Dies zeigt, dass wir Effekte kombinieren können, um die gesamte Identität unseres HTML-Codes ohne Probleme zu entwickeln.
Es gibt zwar mehrere Beispiele für JavaScript- Code, die schwierig oder kompliziert erscheinen können. Der Trend geht jedoch dahin, dass alles, was weborientiert ist, zunehmend mit dieser Programmiersprache zu tun hat. Daher ist es immer eine gute Investition, ein wenig Zeit darauf zu verwenden Lernen Sie es zu benutzen, vielleicht nicht, um großartige Anwendungen zu erstellen, aber zumindest, um zu wissen, wie Sie Ergänzungen und Methoden implementieren, da Sie mit ihnen gute Funktionalitäten entwickeln können, wie in diesem Tutorial gezeigt.
Damit beenden wir dieses Tutorial, da wir verschiedene Techniken anwenden können, um Effekte zu erzielen, die uns dabei helfen, reaktionsschnelle Seiten zu erstellen, die für die Benutzer immer angenehmer und komplexer werden.
