Allgemeine Themen & Trends

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

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

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

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

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

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

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