Ob groß oder klein – mit Aspect Ratio kannst Du jedes Format meistern!

aspect-ratio

In der Welt der Programmiersprachen und des Webdesigns ist es wichtig, ein passendes Layout für Webseiten zu erstellen. Ein Begriff sollte dabei nicht zu kurz kommen: Aspect Ratio. Aber was ist das überhaupt? Wie drückt sich das im CSS aus? Und wozu wird es verwendet?

Worum handelt es sich bei Aspect Ratio?

Im Allgemeinen bezeichnet der Begriff Aspect Ratio, auch Seitenverhältnis genannt, das Verhältnis der Breite zur Höhe eines Bildes oder Videos. Man verwendet es häufig in der Film- und Videoproduktion, um das richtige Bildformat zu bestimmen, und kann es auf verschiedene Arten ausdrücken, wie zum Beispiel 4:3, 16:9 oder 21:9.

Aspect Ratio im CSS

Wie drückt sich diese Bezeichnung nun im CSS aus?

Aspect Ratio in CSS beschreibt eine Technik, die es Entwicklern ermöglicht, ein Seitenverhältnis für ein Element auf einer Webseite festzulegen. Normalerweise verwendet man es, um Inhalte auf einer Webseite in einem bestimmten Seitenverhältnis anzuzeigen. Dies kann dazu beitragen, dass die Webseite einheitlich aussieht, unabhängig davon, ob es sich um ein Video, ein Bild oder ein anderes Element handelt.

Man besetzt sie mit bestimmten Werten, die die jeweilige Höhe und Breite der Seitenverhältnisse angeben. Meist basiert das auf vorgefertigten Proportionen. Diese bezeichnet man häufig als „goldene Seitenverhältnisse“. Im Code gibt man sie immer nach der Eingabe der Seitenverhältnisse ein.

Der Standardwert ist 1:1. Man kann ihn für ein bestimmtes Element aber ändern. Beispiele dafür sind sind:

aspect-ratio: 0.5

Wenn ein Element ein Aspect-Ratio von 0,5 hat, bedeutet dies, dass es ein Quadrat ist, das doppelt so breit wie hoch ist. Aspect-Ratio 0,5 verwendet man, um Elemente wie Bilder, Videos und Widgets auf einer Website anzuzeigen. Es wird auch häufig für die Erstellung von kleinen Elementen wie Symbole oder Schaltflächen genutzt oder um ein Element zu skalieren. Passiert dies, geschieht die Skalierung gleichmäßig in beide Richtungen, so dass es immer noch ein Quadrat mit einem doppelten Breite-Höhe-Verhältnis ist. Dies ist besonders nützlich, wenn es darum geht, Elemente auf verschiedenen Bildschirmen gleich aussehen zu lassen.

aspect-ratio: 1 / 1

Es wird oft verwendet, um ein Element in ein quadratisches Format zu bringen, und ist besonders nützlich bei der Erstellung von responsive Webdesigns.

Hierbei wichtig: Der erste Teil der Aspect-Ratio-Deklaration ist eine Zahl, die die Breite des Elements angibt, gefolgt von dem Zeichen „/“. Der zweite Teil ist eine Zahl, die die Höhe des Elements angibt. Mit diesen beiden Zahlen kann man das Verhältnis von Breite und Höhe des Elements berechnen.

aspect-ratio: 16 / 9

Die hierbei angebenen Seitenverhältnisse sowie das daraus resultierende Format gleicht Breitbildfernseher und moderneren Computermonitoren. Man bezeichnet es häufig als „widescreen“, da es ein breiteres Seitenverhältnis hat als das klassische 4:3-Format bei TV und Co.

Außerdem ermöglicht 16:9-Format es, dass ein Bild schärfer und detaillierter angezeigt werden kann. Da es ein breiteres Seitenverhältnis hat, können mehr Details in einem Bild gezeigt werden. Ein 16:9-Bild wird auch als „HD-fähig“ bezeichnet, da es das Bildformat ist, das von HDTV-Geräten und Blu-ray-Playern verwendet wird.

Aber: Das 16:9-Format ist auch sehr nützlich bei der Anzeige von Videos sowie Fotos. Da es ein breiteres Seitenverhältnis hat, können beide Dinge in diesem Format in der Regel ohne Verzerrungen und Verzerrungen angezeigt werden.

aspect-ratio: auto

Die Eigenschaft „aspect-ratio: auto“ ist ein spezieller Wert, der es einem Webentwickler ermöglicht, das Seitenverhältnis des Elements automatisch anzupassen. Der Browser bestimmt das Seitenverhältnis basierend auf der Größe des Elements und passt es an, um das bestmögliche Ergebnis zu erzielen.

Dies kann sehr nützlich sein, wenn ein Entwickler das Layout einer Webseite an verschiedene Bildschirmgrößen anpassen möchte. Wenn das Element über die Eigenschaft „aspect-ratio: auto“ verfügt, passt der Browser das Seitenverhältnis automatisch an die jeweilige Bildschirmgröße an, wodurch die Webseite auf verschiedenen Geräten gut aussehen kann.

Diese Seitenverhältnisse können im Rahmen des CSS-Codes festgelegt werden, um sicherzustellen, dass das Element in jedem Fall eine bestimmte Größe und Breite hat.

Warum wird Aspect Ratio gebraucht?

  • Es stellt eine nützliche Technik dar, um Webseiten einheitlich und ansprechend aussehen zu lassen.
  • Weiterhin kann dabei helfen, die Ladezeiten zu optimieren, da Elemente, die man in einem bestimmten Seitenverhältnis anzeigt, normalerweise kleiner sind als Elemente, die in einem variablen Seitenverhältnis dargestellt sind.
  • Darüber hinaus kann es auch dazu beitragen, dass Elemente auf verschiedenen Geräten konsistent angezeigt werden.

Auf einen Blick

Aspect Ratio gibt die Seitenverhältnisse eines Elementes auf einer Webseite an. Ähnlich wie andere Aspekte wie Gradient oder Platzhalter kann man es im CSS-Code verwenden. Es gibt verschiedenste verschiedene Höhen- und Breitenmaße, die man mit diesem Befehl eingeben kann, doch greift man im Regelfall auf Formate wie 1/1, 16/9, 0.5 oder die automatische Einstellung zurück.

FAQ zu Aspect Ratio

Was ist Aspect Ratio?

Dieser Begriff gibt die Seitenverhältnisse in Bezug auf die Darstellungen von Medienformaten wie Bilder, Videos und Ähnlichem an. Verwendet findet die Bezeichnung nicht nur bei TV und Co., sondern auch im Programmieren und Webdesign.

Welche Seitenverhältnisse sind im CSS mit Aspect Ratio möglich?

Darunter fallen der Standartwert (1/1), das Format 16/9 (wie bei Fernseh- und Computerbildschirmen), die 0.5-Einstellung sowie das automatische Format.

Kann man Aspect Ratio berechnen?

Ja, das ist möglich. Wenn Du Dir zum Beispiel bei bestimmten Werten unsicher bist, kannst Du zum Beispiel Online-Calculator nutzen, um Aspect Ratios genauer zu berechnen.

HTML Input – eine Eingabehilfe mit vielen Möglichkeiten

Es gibt viele Möglichkeiten, eine Webseite zu erstellen und zu gestalten. Nicht nur für CSS – zum Beispiel durch CSS Display oder CSS Transition -, sondern auch im HTML-Code. Eine von ihnen ist der sogenannte HTML Input. Was bewirkt er? Wie funktioniert er? Und: Wie gebraucht man ihn?

Was ist ein HTML Input?

HTML Input ist ein Element, das man in HTML-Seiten verwendet, um es Benutzern zu ermöglichen, Daten einzugeben, zu bearbeiten und zu speichern. Daher ist es eine Form der Benutzereingabe, die die Benutzeroberfläche einer Website beeinflusst.

Formen von HTML Input

HTML Input kann in den verschiedensten Formen (type) vorliegen. Beim Erstellen einer HTML-Seite kann ein Entwickler außerdem verschiedene Arten von HTML Input verwenden, um eine bestimmte Funktionalität zu ermöglichen. Hierbei spricht von von sogenannten Attributen. Zu den wichtigsten Formen gehören unter anderem Textfelder, Checkboxen, Dropdown-Menüs und Adressen-Angaben (zum Beispiel von Webseiten, E-Mail-Adressen oder Hauadressen).

Zum Beispiel kann ein Entwickler ein Textfeld verwenden, damit Benutzer einen Text eingeben können, oder ein Dropdown-Menü, um Benutzern eine Liste der Optionen anzuzeigen. HTML Input gebraucht man ebenfalls für die Erstellung von Formularen, in denen Benutzer ihre persönlichen Daten eingeben können.

Außerdem kann man einen HTML-Input ebenfalls in JavaScript-Code nutzen, um eine Webanwendung zu erstellen. Zum Beispiel: Wenn ein Benutzer eine bestimmte Aktion auf einer Website ausführt, kann der entsprechende JavaScript Code verwendet werden, um bestimmte Elemente auf der Seite zu ändern oder anzuzeigen.

Wie erstellt man nun einen HTML Input?

Willst Du zum Beispiel ein herkömmliches Textfeld auf Deiner Webseite erstellen, in dem Du Deinen Namen angeben kannst, so verwendest Du den folgenden Tag im HTML:

<input type=“text“ id=“name“ name=“name“>

In der Regel wird ein HTML Input in Zusammenhang mit einem Label bzw. einer übergreifenden Form angegeben. Entsprechend sitzt der Input-Tag dazwischen.

Im Falle eines Textfeldes hast Du weiterhin die Möglichkeit, die Länge des Textfeldes mit Mindestanzahl (minlength) und Maximalanzahl (maxlength) sowie der Größe (size) der anzugebenden Buchstaben zu konkretisieren. Durch die Angabe von Namen, Buchstabenanzahl und Größe sprichst Du dem Input-Tag also Attribute zu.

Die weiteren Input-Formen werden nach demselben Prinzip angegeben. Welche Attribute sie haben können, ist von den jeweiligen Formen selbst abhängig.

Der Input-Tag im CSS

Den Input-Tag kann man ebenfalls im CSS angeben. Auch in diesem Fall muss man zuvor ein Label erstellen und darauf achten, wie die Anzeige auf der Webseite letztlich gestaltet werden soll. Dies wird mit den jeweiligen CSS-Eigenschaften (zum Beispiel CSS Display) geschaffen.

Auf einen Blick

Insgesamt ist HTML Input ein sehr mächtiges Werkzeug, das Entwicklern hilft, Websites und Webanwendungen auf Laptop und Co. zu erstellen, die für Benutzer zugänglich und interaktiv sind. Mithilfe dieses Tools sollen Benutzer in der Lage sein, ihre Daten anzugeben. Es gibt verschiedene Formen, wie man das macht, zum Beispiel mithilfe eines Textfeldes. Die jeweiligen Formen können weiterhin mit Attributen spezifiziert werden.

FAQ zu HTML Input

Was ist ein HTML Input?

Wie die Bezeichnung als solche bereits vermuten lässt, geht es hierbei um die Eingabe – in diesem Fall um die Eingabe von Benutzerdaten, zum Beispiel Namen und Adressen. Die Art und Weise, wie diese Daten eingegeben, bearbeitet und gespeichert werden, steuert man mit einem HTML Input.

Wie schreibst Du einen HTML Input?

Der entsprechende Tag befindet sich im HTML-Format in einem Label-Tag. Der Input-Tag spezifiziert zuvor die Form des Inputs und kann mithilfe von Attributen spezifiziert werden: <input type=“hierkommtdieFormhin“ hierkommtdasAttributhin>

Was sind Input-Formen?

Input-Formen regeln die Art und Weise, wie die entsprechenden Daten von Benutzern auf einer Webseite eingegeben, bearbeitet sowie gespeichert werden können. Dies ist zum Beispiel in Form von einem Textfeld, als Checkboxen, etc. möglich.

Warum und wie Media Query Deine Webseite verbessern kann

Benutzerfreundlichkeit ist ein wichtiges Thema, gerade im heutigen digitalen Zeitalter. Eines der besten Tools, um die Erstellung Deiner Webseite den Nutzern so angenehm wie möglich zu gestalten, ist, ist Media Query. Du fragst Dich nun sicher: Was ist das überhaupt? Warum verwendet man sie? Und vor allem: wie?

Worum handelt es sich bei einem Media Query?

Eine Media Query ist eine Anweisung, die man Cascading Style Sheets (CSS) schreibt – ähnlich wie zum Beispiel die Eingabebefehle rund um CSS Display, CSS Padding, CSS Transition und ähnliches. Durch seine Funktionsweise spielt es eine essenzielle Rolle im sogenannten Responsive Webdesign.

Wofür nutzt man es?

Man nutzt sie, um den Inhalt einer Website basierend auf verschiedenen Eigenschaften des Nutzers und des Geräts zu optimieren. Man verwendet Media Queries häufig, um eine Website oder eine Anwendung für verschiedene Bildschirmgrößen anzupassen – zum Beispiel die mobile Variante für Smartphones, die Desktop-Ansicht für PCs und Laptops oder für Tablets.

Darüber hinaus nutzt man sie, um Inhalte anzupassen, wenn bestimmte Eigenschaften vorliegen, zum Beispiel, ob der Nutzer eine Bildschirmlupe oder einen Hochskalierungsmodus verwendet, oder ob die Bildschirmgröße kleiner als ein bestimmter Wert ist.

Media Queries gebraucht man also, um den Inhalt einer Website zu optimieren, damit dieser auf verschiedenen Geräten und Bildschirmgrößen gut aussieht und funktioniert. Dies hilft, die Benutzerfreundlichkeit zu verbessern, da die Benutzer die jeweiligen Seite auf ihrem Gerät benutzen können, ohne, dass sie Schwierigkeiten beim Wahrnehmen der angezeigten Elemente wie Texten oder Bildern haben.

Und wie verwendet man es?

Man schreibt sie in CSS-Dateien, um bestimmte Eigenschaften des Geräts oder des Nutzers zu überprüfen und dann den Inhalt der Website entsprechend anzupassen. Um Media Queries überhaupt nutzen zu können, muss man sie zuvor mit einem entsprechenden Eingabebefehl festlegen. In diesem wird bestimmt, dass man zur Optimierung der Geräte bestimmte CSS-Eigenschaften abfragen kann. Hierfür wird das Attribut „media“ an die entsprechende Stelle im Link gesetzt.

Die Syntax für Media Queries selbst ist relativ einfach: Nach dem Befehl „@media“ beginnen sie mit einer Anweisung, die den Namen des Media Types (zm Beispiel screen, print, etc.) und die Eigenschaft des Nutzers oder Geräts beschreibt, die überprüft werden soll. Danach werden die Anweisungen geschrieben, die dann ausgeführt werden, wenn die Bedingungen erfüllt sind.

Eine allgemeine Webseitenoptimierung für den Bildschirm eines PCs würde demnach wie folgt starten:

@media screen (and min-width 1024 px) {css-eigenschaften}

Je nach Maße des Bildschirmes – auch mit „landscape“ oder „portrait“ erfasst und abhängig jeweils von den Nutzungsgeräten – können die Eigenschaften im CSS variieren. Bei kleineren Displays wie bei Smartphones ist die Ausrichtung der Webseite samt ihrer Inhalte daher anders als bei größeren Bildschirmen wie von Tablets. Um den Punkt anzugeben, ab welchem sich das Layout quasi an ein bestimmtes Maß anpassen soll, verwendet man den sogenannten „breakpoint“.

Welche Eigenschaften können mithilfe der @media-Regel nun genauer bestimmt werden? Dazu gehören unter anderem:

  • die Seitenverhältnisse des Sichtpunktes mit „aspect-ratio“
  • die Gesamtzahl an möglichen, auf einem Gerät anwendbaren Farben mit „color-index“
  • die Darstellung von Grid bzw. Bitmap durch „grid“
  • die Sichtpunkthöhe mit „height“

Alle Eigenschaften, die im Media Query abgefragt werden können, können durch das Eingeben von „min-“ oder „max-“ erweitert werden. Diese geben die Mindest- oder Maximalanzahl der jeweiligen Eigenschaft an.

Zu tragen kommen Media Queries überall. So können sie zum Beispiel im Rahmen eines style-Elementes vorkommen oder als externe sowie interne CSS-Datei.

Auf einen Blick

Media Queries sind ein wichtiges Werkzeug, um die Benutzerfreundlichkeit von Websites und Anwendungen zu verbessern. Sie ermöglichen es Entwicklern, ihren Inhalt an verschiedene Bildschirmgrößen und Geräte anzupassen, ohne dass viel zusätzliche Arbeit erforderlich ist. Mit den richtigen Media Queries können Entwickler Websites und Anwendungen erstellen, die auf jedem Gerät gut aussehen und funktionieren.

FAQ zu Media Query

Was beudetet „min“ und „max“ bei Media Query?

Sie stehen für die Mindest- bzw. Maximalanzahlen einer bestimmten Eigenschaften, die im Rahmen der Media Queries abgefragt und optimiert werden.

Wofür nutzt man Media Query?

Um die Benutzerfreundlichkeit auf unterschiedlichen Geräteoberflächen – zum Beispiel von Smartphones und Tablets – zu optimieren und entsprechend anzupassen.

Was sind die Breakpoints in Media Query?

Sie stellen den Punkt dar, an dem sich – insbesondere bei der Nutzung von Geräten mit größeren Bildschirmen wie zum Beispiel bei PCs – das Layout der Webseite entsprechend anpassen soll.

Du hast Post! 📧 Der Mailto Link und alles, was Du dazu wissen solltest

Egal, ob am Laptop, am PC, daheim oder auf der Arbeit: E-Mails zu verschicken, gehört mittlerweile zum alltäglichen Standard. Gerade als Unternehmen ist es daher wichtig, Mails nicht nur schnell und effizient zu verschicken, sondern auch zu erhalten. Ein Mailto Link kann dabei helfen. Aber was ist das überhaupt? Wozu und wie wird es eingesetzt? Und: Wie kannst Du selbst einen solchen Link erstellen?

Was ist ein Mailto Link?

Ein Mailto Link ist ein spezieller Hyperlink, der es dem Benutzer ermöglicht, eine E-Mail an eine bestimmte Adresse zu senden, ohne die E-Mail-Anwendung öffnen zu müssen. Mailto Links platziert man auf Webseiten und in E-Mails; sie sind daher ein einfacher Weg, um Kontaktinformationen zu teilen.

Sie haben ein einheitliches Format, vorangestellt mit einem mailto:, gefolgt von der jeweiligen E-Mail-Adresse. Wenn man den Link auf eine Webseite einsetzt, erscheint er normalerweise als ein blauer, unterstrichener Text. Dieser enthält den Link. Wenn man den Link in eine E-Mail einsetzt, passiert dasselbe.

Wozu wird er genutzt?

Links dieser Art sind ein sehr nützliches Werkzeug, um Kontaktinformationen zu teilen und die Benutzerinteraktion zu erleichtern. Sie sind einfach einzurichten und bieten eine einfache Möglichkeit, E-Mails zu schicken. Wann kann er verwendet werden? Zum Beispiel, wenn ein Unternehmen standardisierte Anfragen ermöglichen möchte, seien es Anfragen an den Kundensupport oder Anfragen zwecks Angeboten.

Das heißt: Befindet sich auf einer Webseite zum Beispiel ein Button, der auf eine Kontaktanfrage hinweist („Schreib uns“ oder Ähnliches), kannst Du ihn direkt anklicken. Im Code der entsprechenden Webseite ist der entsprechende Mailto Link platziert. Über diesen wird ein neues Fenster mit einer bereits voreingestellten E-Mail-Vorlage aufploppen, in der Regel im Default-Programm.

Je nachdem, inwieweit die E-Mail-Vorlage bereits eingestellt ist, können bereits einige Felder ausgefüllt sein. Darunter um Beispiel die Betreffzeile (subject), der Nachrichtentext (body) oder eine Mail-Kopie (cc bzw. bcc).

Wie kann ich einen erstellen?

Mailto Links können in einem HTML-Code voreingestellt werden. Sie werden im Rahmen des entsprechenden attributiven Tags (<a>href=…</a>) in den Code eingesetzt. Eingefügt könnte der Mailto Link zum Beispiel so aussehen:

<a href=“mailto:beispiel@irgendeinemailadresse.de“>An diese Mail soll etwas gesendet werden</a>

Hierbei kannst Du auch variieren und Mails an beliebig viele Empfänger senden. Wichtig ist, dass Du jeweils darauf achtest, die unterschiedlichen Mailadressen mit einem Komma voneinander abzutrennen.

Weiterhin wurde zuvor von bestimmten Parameter gesprochen, mit deren Hilfe Mailto Links erweitert werden können. Zum Beispiel kann ein Mailto Link ein Betreff-Feld einschließen, so dass der Benutzer nicht das Feld für den Betreff ausfüllen muss. Das sieht in etwa so aus:

<a href=“mailto:beispiel@irgendeinemailadresse.de?subject=Nachricht von Seite XY“>An diese Mail soll etwas gesendet werden</a>

Ein Mailto Link kann auch eine CC- oder BCC-Adresse enthalten, um eine Kopie der entsprechenden Mail (als normale und als Blindkopie) an weitere Personen weiterzuleiten. Die Stelle im Code würde wie folgt aussehen:

<a href=“mailto:beispiel@irgendeinemailadresse.de?cc=zweiteadresse@irgendeineanderemailadresse.de, dritteadresse@irgendeineanderemailadresse.de, &bbc=vierteadresse@irgendeinenmailadresse.de&subject=Nachricht von Seite XY“>An diese Mail soll etwas gesendet werden</a>

Willst Du nun noch einen Textkörper vorab einstellen, wird das entsprechend nach dem Betreff getan. Fertig sieht die codierte Zeile dann so aus:

<a href=“mailto:beispiel@irgendeinemailadresse.de?cc=zweiteadresse@irgendeineanderemailadresse.de, dritteadresse@irgendeineanderemailadresse.de, &bbc=vierteadresse@irgendeinenmailadresse.de&subject=Nachricht von Seite XY&body=Hier steht dann irgendwas“>An diese Mail soll etwas gesendet werden</a>

Auf einen Blick

Mailto Links sind optimal zur breitgefächerten Kommunikation via E-Mails. Sie können zum Beispiel auf Support-Seiten eingesetzt werden, wenn ein Kunde sich zwecks irgendwelcher Frage an ein bestimmtes Unternehmen wenden möchte.

Wie funktionieren sie? Klickt man auf den entsprechenden Link, ploppt ein voreingestelltes E-Mail-Fenster (in der Regel das Standart-Programm) mit entsprechenden, ebenfalls voreingestellten Parametern auf. Diese Parameter können bestimmten, inwieweit welche der in der Mail zu besetzenden Felder bereits ausgefüllt sind oder nicht. Dazu gehört zum Beispiel die Betreffzeile, die BCC- und CC-Zeilen sowie der Textkörper in der Nachricht.

Um einen Mailto Link beim Programmieren zu erstellen, kann man an entsprechender Stelle im HTML-Code einen attributiven Tag mit <a> href=…</a> einfügen und bereits mit den gewollten Parametern ausfüllen.

FAQ zu Mailto Link

Was ist ein Mailto Link?

Ein Link dieser Art ist ein Hyperlink, durch den ein neues E-Mail-Fenster im Standart-Programm aufploppt. Über dieses Fenster kann man dann die Mail verschicken und braucht sich nicht extra in seinen privaten Account einloggen.

Wie erstellt man einen Mailto Link?

Wie man einen Mailto Link erstellt, wird oben gezeigt. In der Regel kann man einen Link dieser Art in den Code einfügen, mittels attributen Tag <a> href=…</a>.

Wie kann ich einen Link in eine Mail einfügen?

Um einen Hyperlink in einen Mail einzufügen, ist nichts Großartiges zu beachten. Du markierst hierfür einfach den Teil der Nachricht, in den Du den Link einfügen möchtest, und gehst über den Rechtsklick der Naus auf „Einfügen“ und „Hyperlink“ einfügen. Danach kannst Du den entsprechenden Link dort platzieren.

Jetzt mach mal Platz! Placeholder im CSS verwenden

Die Arbeit mit und an einem Code kann langwierig sein, gerade, wenn man so viele Sachen zur gleichen Zeit beachten muss: Position, Gradient, Padding … Dabei kann das Platzieren eines Placeholders Erleichterung schaffen. Doch: Was ist ein Placeholder? Wozu verwendet man ihn? Und wie platziert man ihn?

Was ist ein Placeholder?

Placeholder – zu Deutsch: Platzhalter – stellen eine großartige Möglichkeit dar, Deinen Code sauber und organisiert zu halten. Durch die Verwendung von Platzhaltern kannst Du angeben, wo bestimmte Elemente platziert später werden sollen, ohne zusätzliche CSS-Klassen oder IDs hinzufügen zu müssen. Dies kann besonders bei der Arbeit mit Grid-Systemen hilfreich sein.

Welchem Zweck dient er?

Wie die Bezeichnung suggeriert, wird er vor allem dazu gebraucht, Platz für später eingegebene Elemente auf einer Webseite zu schaffen. Das kann vor allem Texte betreffen, die nachträglich eingefügt werden, oder Ähnliches. Auf diese Weise ist es beispielsweise möglich, dass man sich zuerst um die Farbgestaltung der Webseite kümmert, bevor man den Inhalt genauer definiert.

Wie nutzt man Platzhalter?

Normalerweise reicht es aus, wenn man die Platzhalter in folgendem Format im Code angibt:

::placeholder;

Danach folgen in der Regel die entsprechenden Eigenschaften, die man dem späteren Text, der an der Stelle des Platzhalters stehen soll, zuschreibt. Dazu zählt zum Beispiel die Farbe.

Der Eingabebefehl würde dann in diesem Fall wie folgt aussehen:

::placeholder {
css declaration;
}

Um den Text für den Platzhalter bereits in ersten Schritten zu gestalten, kannst Du, wie gesagt, bereits bestimmte Werte setzen und Eigenschaften setzen. Um zum Beispiel den Platzhaltertext später rot zu machen, würde man das folgende CSS verwenden:

::placeholder {
color: red;
}

Oder Du nutzt die CSS-Eigenschaft opacity verwenden, um den Platzhaltertext halbtransparent zu machen. Um den Platzhaltertext zum Beispiel zu 50 % transparent zu machen, gibt man den folgenden Befehl im Code ein:

::placeholder {
opacity: 0.5;
}

Weiterhin kannst Du die Eingabe des Platzhalters nutzen, um den Platzhaltertext bestimmter Eingabetypen zu formatieren. Willst Du zum Beispiel den Platzhaltertext eines Kennworteingabefelds formatieren, sieht die entsprechende Stelle im Code wie folgt aus:

[type=password]
::placeholder {
color: red;
}

Auch das Hinzufügen eines Placeholders in einem DIV-Tag ist möglich. Man würde es folgendermaßen schreiben:

div: empty-before {
content:attri(data-placeholder);
css declaration
}

Der Platzhalter wird in allen gängigen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge.

Auf einen Blick

Platzhalter ermöglichen es, den Platz im Code freizuhalten für später eingefügte Elemente. Das ist vor allem in Hinblick auf die Erstellung einer Webseite, zum Beispiel am Laptop, wichtig, die nach und nach aufgebaut wird. Auch kannst Du Dich dadurch mit der Fertigstellung des Codes beim Programmieren weitermachen.

Den entsprechenden Platzhaltertext, der im Nachgang eingefügt wird, kann man bereits vorformatieren und gestalten. Je nachdem, welche Eigenschaft oder welchen Wert man dem späteren Element (zum Beispiel einem Text) zuschreiben möchte, kann man zum Beispiel die Farbe des Platzhaltertextes spezifisch festlegen.

FAQ zu Placeholder

Wie erstellt man einen Platzhalter in CSS?

Einen Placeholder erstellt man im CSS durch die Eingabe von ::placeholder. Man kann den späteren Platzhaltertext mit weiteren Eigenschaften und Werten bereits gestalten und wurde das an dieser Stelle im Code dahinter setzen.

Kann ich einen Platzhalter in CSS hinzufügen?

Ja, möglich ist das Hinzufügen eines Placeholders im CSS-Code.

Kann ich einen Platzhalter in DIV einfügen?

Möglich ist die Eingabe in DIV ebenfalls.

Wie kann ich einen Platzhalter in HTML und CSS bearbeiten?

Die Eingabe eines Placeholders ist sowohl in HTML- als auch in CSS-Codes umsetz- und gestaltbar. Wie es in CSS klappt, ist oben erklärt. Bei HTML-Formationen ist das Vorgehen ähnlich. Dort würde die Eingabe eines Platzhalters im Code innerhalb des Input-Befehls (<input> stattfinden.

Farblich angepasst: Mit CSS Gradient für bunte Vielfalt!

Möchtest Du einen ästhetisch ansprechenden Hintergrund für Deine Webseite haben? Dann kann Dir CSS Gradient während der Arbeit am Laptop beim Programmieren helfen. Worum genau handelt es sich dabei? Wofür nutzt man es im Einzelnen? Und wie wendet man es an?

Was ist ein CSS Gradient?

Der Eingabebefehl CSS Gradient dient Designern dazu, dynamische visuelle Effekte in Webseiten zu erzeugen. Wie die Bezeichnung bereits Aufschluss gibt, verwendet man CSS Gradient (zu Deutsch: Farbverlauf), um Farbverläufe, Schattierungen und andere visuelle Effekte hinzuzufügen. Dabei kann man auf tatsächliche Bilder verzichtet. Daher ist man inder Lage, CSS Gradienten auf jede Art von Hintergründen, Schaltflächen, Texten und vieles mehr anzuwenden.

Obwohl CSS Gradienten mithilfe eines CSS-Codes erzeugt werden, stellen sie keine CSS-Eigenschaft dar. Das heißt, mit diesem Begriff kann man zum Beispiel nicht die CSS-Eigenschaft color ersetzen.

Mit ihnen definiert man eine Reihe Übergängen zwischen Farben, zum Beispiel die Richtungen und Winkel von Farbverläufen zweier oder mehrerer Farben. Diese Übergänge sind in der Regel weich und mischend. Standardmäßig wird ein Farbverlauf von links nach rechts erstellt, aber Du kannst die Richtung des Farbverlaufs mit der CSS-Eigenschaft background-image ändern.

Der Code kann in einem HTML- oder CSS-Dokument geschrieben werden, um den gewünschten Gradienten zu erzeugen. Es ist aber auch möglich, vordefinierte gradientfähige Vorlagen zu verwenden, um die Erstellung von Gradienten zu vereinfachen.

Der Gebrauch von CSS Gradienten stellt daher eine nützliche Technik dar, um Webseiten dynamischer und visuell ansprechender zu gestalten. Sie sind einfach zu erstellen und ermöglichen Designern, ihren Webseiten ein einzigartiges und modernes Aussehen zu verleihen.

Welche Arten von CSS Gradient gibt es?

Die Farbverläufe für Hintergründe werden mithilfe der Eingabe background-image: gradient bzw. background: gradient konzipiert. Hierbei kann man mehrere Farben miteinander kombinieren und auf unterschiedliche Weise gestalten. Welche Arten der Gestaltung sind mit diesem Befehl in einem CSS-Code möglich?

Die Gestaltung der Hintergründe läuft über die Werteinstellung. Insgesamt gibt es drei Typen, die man unterscheiden kann:

  • linear-gradient (gerade Farbverläufe, ähneln Streifen – sowohl senk- als auch waagerecht möglich)
  • radial-gradient (runde Farbverläufe, ähneln Kreisen)
  • conic-gradient (konische Farbverläufe)

In diesem Zusammenhang gilt weiterhin:

  • Horizontale Gradienten starten in der Regel an der linken Seite eines Elements und ändern sich allmählich nach rechts; vertikale Gradienten ändern sich von oben nach unten.
  • Radiale Gradienten beginnen an der Mitte des Elements und breiten sich nach außen aus.
  • Konische Gradienten werden verwendet, um einen ovalen Verlauf zu erzeugen und starten, ähnlich wie radiale Gradienten, im Elementzentrum.

Wie verwendet man CSS Gradient für sich?

Die allgemeine Eingabe ohne spezifischen Typen sieht für einen CSS Gradienten folgendermaßen aus:

background-image: gradient(<direction>, <color-stop1>, <color-stop2>, …);

Die Norm ist, dass der Farbverlauf von links nach rechts passiert. Solltest Du diesen aber mit der Eingabe der Richtung (<direction>) ändern wollen, gibt es mehrere Möglichkeiten, die Du mithilfe der folgenden Werte einsetzen kannst: left to right (links nach rechts), right to left (rechts nach links), top to bottom (oben nach unten) und bottom to top (unten nach oben).

Solltest Du zum Beispiel von der rechten oberen Kante aus einen Farbverlauf gestalten wollen, kannst Du alternativ auch Gradzahlen für Winkel angeben. Für einen Winkel, wie er eben genannt wurde, wären das zum Beispiel 45° (als 45deg im Code geschrieben).

Die Farben, zu denen Du Übergänge schaffst, können entweder als HEX-Werte oder als RGB-Werte angegeben werden. Sie werden mithilfe der Eingabe von <color-stop1> … geregelt. Was hat es mit den Color-Stops auf such?

Du kannst einem Farbverlauf mehrere sogenannte color stops (zu Deutsch: Farbunterbrechungen) hinzufügen. Dies geschieht über die Verwendung der CSS-Eigenschaft background-image. Gib dazu einfach mehrere, durch Kommas getrennte background-color-Werte an. Der Wert „Rot, Blau“ erzeugt zum Beispiel einen Farbverlauf, der von Rot nach Blau übergeht.

Die Intensität des Farbverlaufs kann mit der Eigenschaft background-size gesteuert werden. Der erste Wert ist hierbei der Startpunkt des Gradienten; der zweite Wert der Endpunkt. Beispielsweise erzeugt ein Wert von „0 0“ einen vollständig transparenten Farbverlauf, während ein Wert von „1 1“ einen vollständig undurchsichtigen Farbverlauf erzeugt.

Währenddessen wird die Position des Farbverlaufs mit der Eigenschaft background-position kontrolliert. Hierbei gilt: Der erste Wert ist die horizontale, der zweite Wert die vertikale Position. So erzeugt ein Wert von „0 0“ zum Beispiel einen Farbverlauf, der oben links beginnt, während ein Wert von „1 1“ einen Farbverlauf erstellt, der unten rechts beginnt.

Beispiele

Hier ist ein Beispiel für einen CSS Gradienten, der einen horizontalen Übergang von Schwarz nach Weiß erzeugt:

background-image: linear-gradient(left to right, black, white);

Und hier ist ein Beispiel für einen CSS Gradienten, der einen vertikalen Übergang von Rot nach Blau erzeugt:

background-image: linear-gradient(top to bottom, red, blue);

Auf einen Blick

Ein CSS Gradient ist ein Eingabebefehl im CSS-Code, der Farbverläufe für Hintergründe und Ähnliches auf Webseiten regelt. Er wird demnach – ähnlich wie CSS Animation – zur Gestaltung im Webdesign genutzt und ist ein wichtiger Bestandteil der Programmiersprache.

Man kann im Rahmen der Eingabe die Richtung, die Position sowie die Intensivität der Farbverläufe von zwei und mehreren Farben individuell steuern.

FAQ zu CSS Gradient

Was ist ein Gradient in CSS?

Dieser Eingabebefehl wird genutzt, um Farbverläufe zu gestalten – meist in Hintergründen. Hierbei können zwei und mehr Farben miteinander kombiniert werden.

Wie wechselt man einen Gradient in CSS?

Das ist nicht möglich. Die Farbverlaufe laufen quasi übergangslos hintereinander ab.

Kann man mehrere Farbverläufe in einem Element erstellen?

Das ist möglich, ja.

CSS Display: Was das ist und warum es wichtig ist

Willst Du das Programmieren zwecks Webseitenerstellung lernen, kommst Du nicht um die Kurzschrift CSS display herum. Woran handelt es sich hierbei? Wie nutzt man sie? Und was kannst Du mit der Nutzung dieser shorthand erreichen?

Worum geht’s dabei?

Ähnlich wie andere Kurzschriften wie CSS border, postion oder padding ist auch die shorthand CSS display ein essenzieller Bestandteil der Programmiersprache. Doch worum handelt es sich bei diesem Codierungsmittel im Genauen?

Der Name lässt es bereits vermuten: Die Kurzschrift CSS display hat Auswirkungen darauf, wie eine Webseite angezeigt wird – ergo, wie bestimmte Elemente auf dem Display am Laptop oder Computer erscheinen. Mithilfe dieser shorthand können die Verhaltensweisen einzelner HTML-Elementes gesteuert werden. Diese werden, wenn man im Netz unterwegs ist, oftmals als Box aufgefasst. Wie diese Boxen erscheinen oder was sie machen, wird mit der shorthand CSS display festgesetzt.

Jene Boxen – samt ihres entsprechenden Inhaltes – übernehmen also entsprechende Eigenschaften. So können sie zum Beispiel als Block eingestellt werden, wie eine Tabelle oder Liste aussehen oder das Erscheinungsbild eines Inline-Inhaltes repräsentieren.

Welche Arten gibt’s?

Insgesamt kann man auf vier verschiedene Arten das Layout einer Webseite verändern. Hierzu gibt man nach der Kurzschrift die entsprechende Eigenschaft hinzu.

display: none

Durch display: none wird bewirkt, dass das jeweilige Element überhaupt nicht angezeigt wird. Der Vorteil an diesem Befehl ist, dass dadurch der Platzverbrauch im Seitenlayout reduziert wird.

Wie sieht das auf der Webseite aus? Meistens steht an entsprechender Stelle auf der Webseite ein Button. Dieser verbirgt den Inhalt des Elementes, welches vorher im Code unter display: none entsprechend strukturiert wurde.

Kleine Randnotiz: Eine ähnliche Wirkung hat auch die Eingabe von display: contents. Die Inhalte (contents) verschwinden. Anders als bei der Eingabe von display: none verfügen die Inhalte der Elemente weiterhin über ihre Eigenschaften.

display: block

Mithilfe von display:block wird die ausgewählte Box mitsamt seines Elementes letztlich auf Blockebene angezeigt. Das heißt: wie ein Absatz. Dadurch ist ein Zeilenumbruch – also eine neue Zeile – möglich. Praktisch ist das vor allem, wenn Du zum Beispiel ein Element, das inline ist, verlegen möchtest.

In diesem Zusammenhang…

display: inline

… ist auch der Befehl display: inline relevant. Dieser bewirkt nämlich das komplette Gegenteil: Mithilfe dieser shorthand kannst Du Blockelemente in ein Element, das inline ist, umwandeln.

display: inline-block

Im Zusammenhang mit dieser Kurzschrift ist der Begriff Gestaltung von besonderer Rolle. Denn: Mithilfe dieser Eingabe kannst Du das Erscheinungsbild von Inline-Elementen wie ein herkömmliches Blockelement ändern. Das meint, Du kannst die Webseite zum Beispiel wie ein Formular mit Zeilen zum Ausfüllen aussehen lassen.

display: grid

Display: grid ist ein Befehl, der zur Rastererstellung in 2D genutzt wird. Wenn Du diese Kurzschrift verwendest, kannst Du ein Element Deiner Wahl nach Belieben über das jeweilige Raster setzen. Wohingegen…

display: flex

… display:flex dafür gebraucht wird, um die entsprechenden Elemente zu strukturieren. Das funktioniert sowohl senk- als auch waagerecht.

display: table-row und display: table-cell

Möglich ist es mithilfe dieser Kurzschriften, tabellenartige Elemente auf einer Webseite erscheinen zu lassen. Die Zusätze -row und -cell beschreiben hierbei die entsprechenden Spalten und Zeilen.

Weiterhin gibt es die Möglichkeit, die bisher aufgelisteten Kurzschriften zu spezifizieren, teilweise miteinander zu kombinieren oder neue Kurzschriften zu erschaffen.

Auf einen Blick

Die Kurzschrift CSS display nutzt man dazu, um das Verhalten bzw. die Anzeige von bestimmten HTML-Elementen auf einer Webseite zu beeinflussen. Auf diese Weise können sie Eigenschaften annehmen. Sie können zum Beispiel wie eine Liste aussehen oder wie eine Tabelle wirken.

Es gibt verschiedene Arten von CSS display. Darunter: display: none, display: block, display: inline, display: inline-blick, display: grid sowie display: flex, um die wichtigsten zu nennen.

Daher stellt die Eingabe von CSS display eine der grundlegenden Befehle im Programmieren dar.

FAQ zu CSS display

Was ist CSS display?

Diese Kurzschrift hat direkten Einfluss auf die Gestaltung der dargestellten Elemente und ihrer Inhalte auf einer Webseite.

Was ist ein Inline CSS?

Ein CSS kann auf unterschiedliche Weise gestaltet sein – external, internal und inline. Ein Inline CSS wird genutzt, um einem Einzelelement auf der Webseite zu gestalten. Meist in einem besonderen und sich von den anderen Elementen abhebenden Look.

Wann spricht man von einem Inline-Element?

Davon ist die Rede, kein Zeilenumbruch stattfindet – weder vor noch nach dem entsprechendem Element.

CSS Position

CSS Position ist einer der wichtigsten Eigenschaften beim Erstellen von Websitelayouts mit CSS. Dieser Artikel soll Dir alle notwendigen Informationen zum Thema CSS Position geben.

CSS kurz erklärt


CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die für das Darstellen von HTML-Dokumenten verwendet wird. CSS ist eine der beliebtesten Sprachen im Web und wird von den meisten Websites verwendet. Mit dieser Sprache kannst Du verwenden, um die Größe, Farbe und Schriftart von HTML-Elementen zu ändern.

Es kann auch verwendet werden, um die Positionierung von Elementen auf einer Seite zu steuern. CSS ist eine komplexe Sprache und es gibt viele verschiedene Arten, CSS-Stylesheets zu erstellen. In diesem Artikel werden wir einige der grundlegenden Konzepte von CSS Position erläutern. Es gibt weitere CSS Arten und Umsetzungsformen wie CSS Flexbox und CSS Grid, welche auf Bildschirmen dargestellt werden können.

Die Eigenschaft Position bei CSS

CSS position (englisch für „Position“) ist eine CSS-Eigenschaft, mit der man das Verhalten eines HTML-Elements beim Rendering bestimmen kann.

Die Eigenschaft hat folgende Werte:

static: Das Element wird normal dargestellt.

relative: Das Element wird relativ zu seiner normalen Position dargestellt.

absolute: Das Element wird relativ zu seinem nächsten Parent-Element dargestellt, das kein static ist.

fixed: Das Element wird relativ zum Viewport (Fenster) dargestellt und bleibt beim Scrollen an seiner Position.

sticky: Das Element bleibt wie bei fixed an einer Steller, allerdings erst, wenn auf der Seite bis zu einem bestimmten Punkt gescrollt wurden ist

Die CSS-Eigenschaft position wird hauptsächlich verwendet, um das Verhalten von Elementen zu bestimmen, die mit dem Wert absolute oder fixed positioniert sind.

Bei absoluter Positionierung wird ein Element relativ zu seinem nächsten Parent-Element positioniert, das kein static ist. Wenn also ein Element absolut positioniert ist, aber kein Parent-Element hat, das kein static ist, wird es relativ zum Viewport positioniert.

Ein element mit dem Wert fixed wird immer relativ zum Viewport positioniert. Das bedeutet, dass es sich beim Scrollen nicht mitbewegt.

CSS position: static


CSS position: static bedeutet, dass ein Element in seiner normalen Position bleibt. Es wird nicht von anderen Elementen verschoben.

Das ist die Standardeinstellung für alle HTML-Elemente. Wenn Du also nicht explizit position: relative; oder eine andere Positionierung angibst, wird das Element position: static sein.

Ein element ist static positioned, wenn es sich nicht absolut oder relativ positioniert. Static bedeutet in diesem Kontext, dass das Element nicht aus seiner normalen Positionierung herausgerissen wird. Es bleibt also genau dort, wo es im Dokumentfluss erscheinen würde.

Es gibt einige Eigenschaften, die nur auf Elemente mit einer Positionierung wirken (z.B. z -index und float). Auf Elemente mit der Position static haben sie keine Auswirkungen. In diesem Beispiel wird ein div-Element mit der Position static dargestellt. Das bedeutet, dass es sich genau an der Stelle befindet, an der es im Dokumentfluss erscheint.

div { position: static;
width: 100px;
height: 100px;
background-color: red;
}

CSS position : relative

CSS position: relative ermöglicht es einem Element, sich relativ zu seiner normalen Position zu bewegen. Die Position eines Elementes wird normalerweise durch seine Platzierung in einem HTML-Dokument bestimmt, aber mit position: relative kann ein Element seine Position innerhalb eines Dokumentes ändern.

Das position: relative Element wird normalerweise dazu verwendet, ein anderes Element auf der Seite zu positionieren. Zum Beispiel kann ein Button mit position: relative ein anderes Element auf der Seite überlappen. In dem folgenden Beispiel wird ein Button mit position: relative in der Mitte eines Div-Elements platziert.

div { width: 400px;
height: 400px;
background: lightblue;
position: relative;
}
button { position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: lightgreen;
border: none;
padding: 16px 32px;
}

In dem obigen Beispiel wird der Button mit position: absolute in der Mitte des Div-Elements platziert. Dies ist möglich, weil das Div-Element ein Elternteil des Buttons ist und der Button sich relativ zu seinem Elternteil positionieren kann.


Wenn Du position: relative auf ein anderes Element als das erste anwenden, wird es sich relativ zu seiner neuen Position bewegen. Zum Beispiel kann ein Div-Element, das sich am oberen Rand einer Seite befindet, mit position: relative nach unten verschoben werden.

In dem folgenden Beispiel wird ein Div-Element mit position: relative um 100 Pixel nach unten verschoben.

div { width: 400px;
height: 400px;
background: lightblue;
position: relative;
top: 100px;
}

In dem obigen Beispiel wird das Div-Element 100 Pixel vom oberen Rand der Seite entfernt platziert. Dies ist möglich, weil das Div-Element sich relativ zu seiner neuen Position bewegt.
Du kannst auch andere Positionierungsattribute wie left, right, bottom und z-index verwenden, um ein Element zu positionieren.

CSS position : absolute

Die absolute Positionierung ist die flexibelste Art der Positionierung. Wenn Du ein Element absolut positionierst, wird es aus dem normalen Fluss des Dokuments entfernt und kann mit den Eigenschaften top, right, bottom und left an einer beliebigen Stelle platziert werden.

Ein absolut positioniertes Element ist immer relativ zum nächsten Element, das positioniert ist (normalerweise das Body-Element). Wenn kein Element positioniert ist, ist es relativ zum viewport, also dem Browserfenster.

Ein Element kann auch mit z-index angegeben werden, um die Reihenfolge der Elemente auf der z-Achse zu bestimmen. Standardmäßig liegt das erste Element auf der obersten Ebene, das zweite unter dem ersten und so weiter.

Absolute Positionierung ist häufig die beste Wahl, wenn Du ein Element an einer bestimmten Stelle platzieren möchtest, z.B. ein Pop-up-Fenster, das sich über den Inhalt des Dokuments legt. Beachte dabei, dass ein absolut positioniertes Element aus dem normalen Fluss des Dokuments entfernt wird. Das bedeutet, dass andere Elemente sich so verhalten, als ob das absolut positionierte Element nicht existiert.

Wenn Du also z.B. ein div-Element absolut positionierst und es unter einem anderen div-Element positionieren, wird das zweite div-Element sich so verhalten, als ob das erste div-Element nicht existiert und es an seine Stelle tritt.

CSS position : fixed

Mit CSS kannst Du verschiedene Arten von Elementen auf Deiner Webseite positionieren. Eine der verfügbaren Positionierungsmethoden ist „fixed“.

Mit dieser Methode kannst Du ein Element so positionieren, dass es immer an derselben Stelle bleibt, selbst wenn der Rest der Seite scrollt. Dies ist nützlich, wenn Du ein Element haben möchtest, das immer sichtbar ist, z.B. ein Menü, eine Schaltfläche oder ein Banner.

So positionierst Du ein Element mit der Methode „fixed“ : Zuerst musst Du das Element, das Du positionieren möchtest, mit einem CSS-Selektor auswählen. Dann kannst Du die Eigenschaft „position“ und den Wert „fixed“ verwenden, um das Element zu fixieren.

Du kannst auch die Eigenschaften „top“, „bottom“, „left“ und „right“ verwenden, um das Element genau an der gewünschten Stelle zu positionieren. Beachten, dass Du bei der Verwendung der Methode „fixed“ ein Parent-Element haben musst, das eine andere Positionierungsmethode verwendet, z.B. „relative“. Andernfalls wird das fixierte Element nicht an der gewünschten Stelle bleiben.

Hier ist ein Beispiel:

In diesem Beispiel wird ein Footer mit der Methode „fixed“ positioniert. Das Menü bleibt immer an derselben Stelle, selbst wenn der Rest der Seite scrollt. Um sicherzustellen, dass das Menü immer an der gewünschten Stelle bleibt, wird ein Parent-Element mit der Methode „relative“ positioniert.

body { padding-bottom: 3em;
}

footer { position: fixed;
padding: .6em;
bottom: 0;
left: 0;
right: 0;
}

CSS position : sticky

CSS position: sticky ist ein Stil, der verwendet wird, um ein Element auf einer Webseite zu fixieren. Sobald ein Element seinen angegebenen Bereich erreicht, wird es an seinem angegebenen Ort fixiert.

Sobald ein Element fixiert ist, bleibt es an seinem Ort, auch wenn der Benutzer weiter den Rest der Webseite scrollt. Dieser Stil kann verwendet werden, um ein Element wie ein Menü oder ein Widget auf der Webseite fixiert zu halten, sodass es immer sichtbar ist, egal wie weit der Benutzer scrollt. Dies ist nützlich, damit Benutzer ein bestimmtes Element auf der Webseite leicht finden und aufrufen können.

Um CSS position: sticky zu verwenden, muss zuerst der Stil für das gewünschte Element in der CSS-Datei definiert werden. Dann wird das Attribut position auf den Wert sticky gesetzt. Zusätzlich muss angegeben werden, wo das Element fixiert werden soll. Dies kann mithilfe der Top-, Right-, Bottom- oder Left-Eigenschaften definiert werden.

Beispiel: In diesem Beispiel wird ein Menü auf der linken Seite der Webseite fixiert. Sobald der Benutzer den unteren Bereich des Menüs erreicht, wird das Menü an seinem Ort fixiert.

HTML Code:

<div class="menu">
<ul>
<li><a href="#">Home</a>
</li> <li><a href="#">About</a>
</li> <li><a href="#">Contact</a>
</li> </ul>
</div>

CSS-Code:

.menu { position: sticky;
left: 0;
}

Weitere Eigenschaften und Tipps zu CSS Position

Die Eigenschaft z-index legt fest, in welcher Reihenfolge die Elemente angezeigt werden. Elemente mit einem höheren z-index werden vor Elementen mit einem niedrigeren z-index angezeigt. Standardmäßig ist der z-index von Elementen 0.

Die folgende CSS-Deklaration positioniert ein Element absolut und legt den z-index auf 1:

position: absolute;
z-index: 1;

Um das Verhalten von Elementen zu bestimmen, die mit dem Wert relative positioniert sind, wird die Eigenschaft top, bottom, left oder right verwendet. Diese Eigenschaften legen die Distanz des Elements zu seinem Parent-Element in Pixeln fest.

Die folgende CSS-Deklaration positioniert ein Element relativ und legt die Top-Distanz auf 10px:

position: relative;
top: 10px;

Die Eigenschaft float wird verwendet, um Elemente nebeneinander anzuordnen. Dies ist häufig bei Bildern oder Boxen der Fall. Die folgende CSS-Deklaration sorgt dafür, dass zwei Bilder nebeneinander angezeigt werden:

img { float: left;
}

Die Eigenschaft clear sorgt dafür, dass ein Element unter einem anderen Element angezeigt wird. Dies ist häufig der Fall, wenn ein Element, das ein Bild enthält, unter einem anderen Bild angezeigt werden soll. Die folgende CSS-Deklaration sorgt dafür, dass ein Bild unter einem anderen Bild angezeigt wird:

img { clear: both;
}

FAQ zu CSS Position

Was bedeutet CSS?

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, mit welcher Du Formatierungen an HTML Dokumenten vornehmen kannst.

Welche Eigenschaften hat CSS position?

Mit CSS positon kannst Du die Attribute: static, relative, absolute, fixed und sticky bestimmen.

Ist der Wert sticky experimentell?

Nein der Wert ist nicht experimentell. Er wird überall supportet.

Alles im Rahmen! CSS border und seine Verwendung

Programmiersprachen sind nicht immer einfach zu verstehen. Doch wenn man einmal die einzelnen Befehle und Arten kennt, kann das viele Vorteile mit sich bringen. Genauso verhält es sich mit dem Codierungsbefehl CSS border. Aber worum handelt es sich dabei? Wofür wird es verwendet? Und was kann man damit machen?

Was ist ein CSS border?

CCS border ist eine Kurzschrift – auch shorthand – , mit dem man einen Rahmen um ein beliebiges HTML-Element ziehen und steuern kann. Daher ermöglicht es dieser Befehl, Anzeige von bestimmten Elementen auf einer Webseite zu gestalten – vor allem den Rahmen samt all seiner Eigenschaften.

Wie wird es verwendet?

Standardmäßig werden alle HTML-Elemente inline angezeigt, das heißt, sie werden alle in einer einzigen Zeile nebeneinander platziert. Mithilfe der CSS-Kurzschrift border kann man die Anzeige des Rahmens um ein Element nun steuern.

„border“ ist ein englischer Begriff. Im Deutschen übersetzt bedeutet er „Rahmen“. Das spiegelt sich in seiner Funktionsweise wieder: Der Befehl CSS border wird typischer Weise genutzt, um einen benutzerdefinierten Rahmen um ein Element zu erstellen auf einer Webseite zu legen.

Dieser kann auf verschiedenste Weise beeinflusst werden.

  • Man kann die Farbe eines Rahmens mithilfe des Befehls „border-color“ steuern
  • Auswirkungen hat der Befehl „border-width“ auf die Breite des Rahmens
  • Beeinflusst wird der Stil eines Rahmens durch den Befehl „border-style“

Alle drei Aspekte – Farbe, Breite und Stil des Rahmens – werden im Code innerhalb eines Codeabschnittes gemeinsam angegeben.

Wichtig: Mit der abgekürzten Eigenschaft border- kann bei allen drei Eigenschaften in einer Deklaration festgelegt werden, welche Farbe, welche Breite und welchen Stil der Rahmen haben soll.

border-color

Die CSS-Eigenschaft border-color kann als Hex-Wert, als RGB-Wert oder Farbname im Code angegeben werden.

Im folgenden Beispiel wird gezeigt, wie ein schwarzer Rahmen für ein HTML Element festgelegt werden kann:

div {
border-style: solid;

border-width: 1px;
border-color: #000;
}

Wenn Du für jede Seite (links, rechts, oben und unten) des Rahmens eine andere Farbe festlegen möchtest, kannst Du die folgenden Befehle dafür verwenden:

border-top-color
border-right-color
border-bottom-color
border-left-color

Die folgende CSS-Codeeingabe würde beispielsweise einen gelben Rand oben und unten am Element und einen grünen Rand links und rechts erstellen:

div {
border-style: solid;
border-width: 1px;
border-top-color: #ff0;
border-right-color: #0f0;
border-bottom-color: #ff0;
border-left-color: #0f0;
}

border-width

Die CSS-Eigenschaft border-width verwendet man, um die Breite des Rahmens eines Elements anzugeben. Die Breite kann als spezifischer Wert oder durch Verwendung eines der drei vordefinierten Werte eingestellt: thin (dünn), medium (mittel) und thick (dick).

In den meisten Fällen wird die Breite des Rahmens eines Elements durch die Breite des Elements selbst bestimmt. Wenn die Eigenschaft border-width jedoch auf einen anderen Wert als den Standardwert gesetzt ist, entspricht die Rahmenbreite des Elements dem angegebenen Wert.

Die Werte selbst werden in Pixel (px), Ems (em) oder Prozent (pt) angegeben und entsprechend in den Code eingefügt. Wenn Du also zum Beispiel einen 10 Pixel breiten Rahmen erstellen auf Deiner Webseite erstellen willst, würdest Du den folgenden CSS-Code verwenden: „border: 10px;“

border-style

Die Dicke des Rahmens eines Elements kann auch mit der Eigenschaft border-style angegeben werden. border-style beeinflusst im Allgemeinen den Rahmenstil eines Elementes. Es gibt vier verschiedene Werte, die man hinsichtlich des Stils angeben kann:

  • solid (fest) – der Standardwert. Die Grenze ist eine durchgängige Linie.
  • dotted (gepunktet) – Der Rahmen besteht aus einer Reihe von Punkten.
  • dashed (gestrichelt) – Die Umrandung besteht aus einer Reihe kurzer Linien.
  • double (doppelt) – Der Rand besteht aus zwei durchgängigen Linien.

Auch in diesem Fall ist es möglich, zu spezifizieren, welche Seite (oben, unten, links, rechts) einen stimmten Rahmenstil erhalten soll. Die entsprechenden Kurzschriften dazu lauten:

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

Ein Beispiel könnte wie folgt aussehen:

border-top-style: dashed;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: double;

Hierbei ist der Rahmen: an der Oberseite gestrichelt, rechts einmalig durchgängig, an der Unterseite gepunktet und links zweifach durchgezogen.

Wenn Du ein Element ohne Rahmen erstellen willst, kannst Du das ebenfalls angeben. Hierbei setzt Du die Eigenschaft border-style auf none: „border-style: none;“

Weitere Werte, die Du nutzen kannst, um den Rahmenstil eins Elementes zu beeinflussen, wären:

  • border: hidden – zur Erstellung eines „unsichtbaren“ Rahmens; unsichtbarer Rahmen kann für Elemente nützlich sein, die voneinander getrennt werden sollen (z.B. Schaltflächen in einer Symbolleiste); kann auch verwendet werden, um ein „Abstands“-Element zu erstellen
  • border: groove – wird verwendet, um eine Vertiefung um den Rahmen zu erzeugen
  • border: ridge – ähnelt border:groove, aber mit dem Unterschied, dass ein erhöhter Rahmen erzeugt wird; wird am besten verwendet, um ein Element auf einer Seite hervorzuheben
  • border: inset – gibt an, dass der Rahmen ein nach innen gerichteter Rahmen sein soll
  • border: outset – beschreibt einen nach außen gerichteten Rahmen

Zusammengefasst

Mit der Kurzschrift CSS border bist Du in der Lage, ohne Probleme die Eigenschaften eines Rahmens um ein HTML-Element Deiner Wahl nach Belieben zu ändern. Dieser Befehl ist daher ein wichtiger Bestandteil in Webdesign und Programmiersprache.

Welche Eigenschaften kann man hinsichtlich des Rahmens beeinflussen? Darunter fällt die Farbe, die Breite und der Stil des Rahmens. Hierbei kannst Du einzelne Seiten individuell oder den gesamten Rahmen verändern. Wichtig ist, dass die die Eingabe mit allen Eigenschaften zusammen tätigst. So wird das Programmieren einfach – ob auf Laptop oder Computer.

FAQ zu CSS border

Was ist ein border in CSS?

CSS border referiert im Code auf den Rahmen eines Elementes auf einer Webseite. Mit entsprechenden Werten kannst Du die Rahmenbedingungen ändern.

Wie macht man einen Rahmen in CSS?

Durch die Kurzschrift „border“ kannst Du den Rahmen erstellen. In diesem Zusammenhang solltest Du darauf achten, die Eingabe vollständig zu halten bzw. zu beginnen mit: div { border-style: ___ ; border-width: ___ ; border-color: ___; }.

Was macht border collapse?

„border collapse“ gibt an, ob ein Zwischenraum zwischen mehreren Elementen in einer Tabelle existiert – oder nicht.

Einfach gestalten mit CSS Animation: Wie funktioniert’s?

Seine Webseite zu gestalten, kann man über mehrerlei Wege machen – entweder über Webseiten, die diese Möglichkeit anbieten, oder direkt selbst, zum Beispiel mit CSS Animation. Doch wobei handelt es sich dabei im Einzelnen? Was muss man bei der Programmierung mit CSS Animation beachten? Und Was benötigst Du dafür?

Wofür steht CSS?

Das Kürzel CSS stammt aus dem Webdesign. Es wird als Abkürzung für Cascading Style Sheets genutzt. Gebrauch findet es vor allem in der Codierung von HTML-Dateien – dort fungiert es als Befehl für die Art und Weise, wie eine Webseite mit seinen jeweiligen Inhalten später gestalterisch aufgebaut werden soll.

Zu den Dingen, die man damit festlegen kann, gehören u.a. die Gestaltungen von jeglichen Schrifttypen und -arten, die Farbgestaltung der Seite sowie die Gestaltung von Bildern, Grafiken und ähnlichen Sachverhalten. Das heißt, mit entsprechenden CSS-Codes kannst Du zum Beispiel die Schriftfarbe einer Überschrift von vorne herein genau programmieren. CSS hat neben der Animation außerdem noch andere Bereiche, zum Beispiel CSS Grid oder CSS Flexbox.

Was ist CSS Animation?

Was ist nun CSS Animation? Wie der Zusatz im Titel bereits anklingen lässt, geht es bei CSS Animation darum, die gestalterischen Inhalte einer Webseite innerhalb eines HTML-Codes zu animieren. Dies bewerkstelligt man, indem man alles innerhalb einer sogenannten @keyframe rahmt; diese stellen also eine Art Pfeiler dar, an der Du Dich in der Animation orientieren kannst. Auf diese Weise ist es möglich, mehrere Stufen in der eigentlich Animation festzulegen. Wie welcher Inhalt nun auf welche Weise animiert wird, hängt von den Folgefehlen ab. Sie werden mit animation- angegeben.

Wofür ist CSS Animation gut?

CSS-Animationen verwendet man für die Erstellung von einer Vielzahl von Effekten, darunter:

  • der Hover-Effekt: Hierbei handelt es sich um Effekte, die entstehen, wenn ein Benutzer mit der Maus über ein Element auf Deiner Webseite fährt. Zum Beispiel ist es möglich, einen pulsierenden oder wachsenden Effekt erzeugen.
  • Übergänge: Du kannst CSS Animationen auch verwenden, um reibungslos zwischen zwei Zuständen zu wechseln. Beispielsweise kannst Du ein Element von seinem normalen Zustand in seinen Hover-Zustand oder von einer Farbe in eine andere überführen.
  • Animationen: Um komplexe Animationen zu erstellen, zum Beispiel einen springenden Ball oder ein sich drehendes Rad, eignet sich CSS Animation ebenfalls.

@keyframe und animation

Keyframes stellen einen CSS-Befehl dar, der Animationssequenzen definiert. Er ermöglicht es, bestimmte Elemente auf der Seite in bestimmten Intervallen zu animieren. Der Befehl beginnt mit einem Schlüsselwort (zum Beispiel: „@keyframes myAnimation“) und einem Namen (zum Beispiel: „myAnimation“). Darauf folgt eine Klammer, in der die einzelnen Animationsschritte definiert werden. Jeder Schritt wird wiederum durch ein Schlüsselwort (z.B. „from“ oder „to“) und ein Klammerpaar definiert, in dem die CSS-Eigenschaften des Elements angegeben werden, die sich in diesem Schritt ändern sollen.

Der Befehl @keyframes kann in jedem modernen Browser verwendet werden. Allerdings ist es ratsam, einen Vendor-Prefix (z.B. -webkit- oder -moz-) vorzusehen, um sicherzustellen, dass die Animation auch in älteren Browsern – via Laptops oder anderen Geräten – funktioniert.

Ein einfaches @keyframes-Beispiel wäre unter anderem die Animation eines Kreises, der sich von links nach rechts bewegt. Der Code würde hierbei wie folgt aussehen:

@keyframes myAnimation {
from {
left: 0px;
}
to {
left: 100px;
}
}

In diesem Beispiel wird das Element mit der Animationssequenz „myAnimation“ von links nach rechts verschoben. Der Startpunkt der Animation wird durch das Schlüsselwort „from“ definiert, während der Endpunkt durch das Schlüsselwort „to“ bestimmt wird. In beiden Klammern wird lediglich die CSS-Eigenschaft „left“ angegeben, da sich das Element nur horizontal bewegen soll.

Die Animation kann dann mithilfe des CSS-Befehls „animation“ auf ein Element angewendet werden:

#myElement {
animation: myAnimation 2s linear;
}

In diesem Beispiel wird die Animationssequenz „myAnimation“ auf das Element mit der ID „myElement“ angewendet. Die Animation wird hierbei 2 Sekunden lang durchgeführt und verläuft linear, das heißt, ohne zusätzliche Interpolationen.

Der CSS-Befehl „animation“ nimmt einige verschiedene Parameter an, die die Animation beeinflussen können. So kann zum Beispiel angegeben werden, wie oft die Animation wiederholt werden soll oder in welchem Tempo sie ablaufen soll. Ein paar der grundlegendsten CSS-Eigenschaften listen wir Dir nun auf.

CSS-Eigenschaften und ihr Einsatz

animation-name

Die Eigenschaft animation-name gibt den Namen der Animation an, der verwendet wird, um die Animation im CSS-Code zu identifizieren.

animation-duration

Diese Eigenschaft legt die Dauer der Animation fest. Sie kann sowohl in Sekunden (s) als auch in Millisekunden (ms) angegeben werden. Die Animation wird für die angegebene Dauer abgespielt, bevor sie an ihr Ende gelangt. Wenn die Animation wiederholt wird, wird sie jedes Mal für die angegebene Dauer wiederholt. Wenn animation-duration nicht angegeben wird, wird die Animation so schnell wie möglich abgespielt.

animation-delay

animation-delay als CSS-Eigenschaft bestimmt, wie lange eine Animation nach dem Start der Seite oder nach dem Start einer anderen Animation anfängt. Sie kann einen Wert in Sekunden (s) oder in Millisekunden (ms) annehmen. Wenn keine Angabe gemacht wird, beginnt die Animation sofort.

animation-iteration-count

Die CSS-Eigenschaft animation-iteration-count legt fest, wie oft eine Animation wiederholt wird. Die Angabe einer ganzen Zahl bedeutet, dass die Animation so oft wiederholt wird, wie angegeben. Die Angabe einer Dezimalzahl hingegen gibt Aufschluss darüber, dass die Animation so oft wiederholt wird, wie angegeben, samt einer weiteren Wiederholung, in der sie rückwärts abläuft. Negative Zahlendrücken in diesem Zusammenhang aus, dass die Animation rückwärts abläuft und dann wieder vorwärts.

Die Standardeinstellung für animation-iteration-count ist 1, was bedeutet, dass die Animation einmal vorwärts abläuft und dann stoppt. Wenn Du die Animation-iteration-count-Eigenschaft auf einen Wert größer als 1 festlegst, wird die Animation so oft wiederholt, wie angegeben. Wenn Du beispielsweise den Wert 5 angibst, wird die Animation fünfmal vorwärts und dann einmal rückwärts abgespielt.

Die Animation-iteration-count-Eigenschaft kann auch als Infinit angegeben werden, was meint, dass die Animation immer wieder wiederholt wird, bis sie vom Benutzer angehalten wird.

animation-direction

In CSS definiert die Eigenschaft animation-direction, ob eine Animation vorwärts, rückwärts oder in abwechselnden Zyklen abgespielt werden soll.

Wenn Du beispielsweise eine zwei Sekunden lange Animation hast, die so eingestellt ist, dass sie vorwärts und dann rückwärts abgespielt wird, meint das: Sie wird insgesamt vier Sekunden lang abgespielt – also zwei Zyklen von jeweils zwei Sekunden. (Wenn die Animation nur einmal abgespielt werden soll, kannst Du die Eigenschaft animation-iteration-count auf 1 setzen.)

Die Eigenschaft animation-direction kann auch auf „normal“, „reverse“ oder „alternate“ gesetzt werden: „normal“ spielt die Animation von Anfang bis Ende vorwärts ab; „reverse“ spielt sie rückwärts ab, Ende bis Anfang; „alternate“ spielt sie vorwärts, dann rückwärts, dann wieder vorwärts usw. ab.

animation-timing-function

animation-timing-function als Eigenschaft legt fest, wie sich eine Animation im Laufe der Zeit verhält. Sie kann einen linearen oder nicht-linearen Verlauf haben. Der lineare Verlauf bedeutet, dass die Animation gleichmäßig von Anfang bis Ende abläuft. Der nicht-lineare Verlauf beschreibt eine ungleichmäßige Animation von Anfang bis Ende.

animation-fill-mode

Die CSS-Eigenschaft animation-fill-mode legt fest, welchen Wert eine animierte CSS-Eigenschaft annehmen soll, wenn die Animation abgeschlossen ist. Insgesamt gibt es vier mögliche Werte für den animation-fill-mode:

  • none – der Standardwert. Wenn die Animation abgeschlossen ist, nimmt die animierte Eigenschaft den Wert an, den sie hatte, bevor die Animation gestartet wurde.
  • forwards – Nach Abschluss nimmt die Eigenschaft den Wert an, den sie hatte, als die Animation zu Ende lief.
  • backwards – Hier nimmt sie den Wert an, den sie besaß, als die Animation begann.
  • both – Bei diesem Verlauf nimmt sie sowohl den Wert an, den sie hatte, als die Animation begann, als auch den Wert, den sie hatte, als die Animation zu Ende lief, also forwards und backwards.

animation-play-state

Die CSS-Eigenschaft animation-play-state bestimmt, ob eine Animation ausgeführt oder angehalten wird. Sie findet daher Gebrauch, um eine Animation anzuhalten und/oder fortzusetzen. Die Eigenschaft animation-play-state gibt man als einzelnen Schlüsselwortwert an. Die Schlüsselwortwerte haben folgende Bedeutung:

  • running: Die Animation läuft (=Standardwert).
  • paused: Die Animation wird angehalten.

Eine Animation kann jederzeit angehalten werden, indem man die Eigenschaft animation-play-state auf „paused“ setzt. Wenn eine Animation angehalten wird, läuft sie nicht weiter und bleibt im aktuellen Zustand, bis sie fortgesetzt wird. Um eine Animation fortzusetzen, setze die Eigenschaft animation-play-state auf „running“. Die Animation wird dort fortgesetzt, wo sie aufgehört hat.

Es ist auch möglich, die Eigenschaft animation-play-state mithilfe der CSS-Eigenschaft animation-timing-function auf einen bestimmten Wert zu setzen. Die Animation beginnt dann, beim angegebenen Wert zu laufen.

Auf einen Blick

Mithilfe von CSS Animation kann man bewegende oder animierte Effekten auf Webseiten innerhalb eines HTML-Codes gestalten. Sie besteht aus zwei Teilen: einem Satz Keyframes (@keyframes) und einem Satz Eigenschaften (animation-…). Die Keyframes rahmen den Start- und Endstatus der Animation, und die Eigenschaften definieren, wie sich die Animation zwischen diesen beiden Punkten bewegen soll.

FAQ zu CSS Animation

Kann man Animationen mit CSS machen?

Ja, das ist möglich. Diese Programmierung erlaubt es, Animationen zu gestalten, Übergänge zu erschaffen und vieles mehr.

Was wird für Animationen in CSS verwendet?

Du brauchst drei Dinge, um eine Animation in CSS zu gestalten: den Inhalt, den Du animieren möchtest, die entsprechenden Keyframes, um einen Rahmen für die Animation zu setzen, und die jeweiligen CSS-Eigenschaften, um die Animation selbst zu definieren.

Wie viele Arten von Animationen gibt es in CSS?

Die grundlegendsten Eigenschaften dazu haben wir Dir oben im Artikel aufgelistet.

Die mobile Version verlassen