Schlagwort: CSS Grundlagen

Kategorien
Stylesheets Webentwicklung

Background property in Stylesheets

CSS Programming Image
Bessere Steuerung von Hintergrundbildern (Background)

background-origin, -clip

Mit background-origin kann man angeben, ob das Hintergrundbild am Rahmen, am Innenabstand oder am Inhalt ausgerichtet werden soll. (Webkit: -webkit-background-composite)

background-clip gibt an, ob sich das Hintergrundbild bis in den Rahmen erstrecken soll oder nicht hinter dem Rahmen angezeigt werden soll. (Webkit: -webkit-background-clip)

Größe von Hintergrundbildern (Background)

background-size

Mit background-size kann die Größe von Hintergrundbildern angegeben werden. Dies ist vor allem Wichtig um zukünftig SVG Grafiken sinnvoll als Hintergrundbilder einzusetzen.

Mehrere Hintergrundbilder (Background)

Mehrere Hintergrundbilder

In CSS3 können für ein Bild mehrere Hintergrundbilder angegeben werden. Dadurch müssen für viele Effekte keine ansonsten unnötigen HTML-Elemente eingefügt werden.

Für mehr Informationen schaut auch auf: https://wiki.selfhtml.org/wiki/CSS

Kategorien
Stylesheets Webentwicklung

How to use browser switches with CSS3

CSS Programming Image

Browser switches

Der Umstand, dass sich CSS-Layouts langsam in der breiten Masse durchsetzen ist zu einem Teil dem geschuldet, dass sich an dem etablierten Standard seit vielen Jahren nichts geändert hat. Bereits der IE bot eine recht ordentliche CSS2-Unterstützung von Browser switches. Doch erst mit frisch veröffentlichten Internet Explorer 7 wird diese endlich einigermaßen fehlerfrei. Dazwischen liegen 6 Jahre. Auch andere Browser haben Zeit für den Reifeprozess benötigt.

Die Neuerungen von CSS 3 ermöglichen eine völlig neue Denkweise bei der Layouterstellung. Der Spaltensatz und die Möglichkeiten des neuen Box-Modells können zu erheblichen Vereinfachungen der Quelltextstruktur einer Webseite führen.

Doch in der Realität müssen Webdesigner auch jetzt schon eine Vielzahl an Browsern arbeiten. Dabei müssen diese jeweils in zahlreichen mindestens zwei oder mehr Generationsstufen unterstützt werden. Das wird sich auch nach der Einführung von CSS3 nicht großartig ändern.

Doch wie soll man die neuen Techniken einsetzen, wenn gleichzeitig ältere Browsergenerationen noch mit dem gleichen CSS klar kommen sollen? Eine theoretische Möglichkeit wären CSS-Browserweichen.

Auf diese Weise ließen sich alte Browser mit reiner CSS2.x-Unterstützung gezielt mit gesonderten Stylesheets versorgen. Ob das reicht, ist dabei noch fraglich denn beispielsweise beim Spaltensatz könnten mit CSS 3 selbst aufwändige CSS-Layouts auf nur wenige erforderliche Container zusammen schrumpfen. Die Möglichkeiten von CSS 3 lassen sich vermutlich erst dann voll ausschöpfen, wenn auf CSS 2 (bei dem zusätzliches Markup benötigt würde) keine Rücksicht mehr genommen werden braucht.

Box-Modell-Chaos

Wer in dem neuen Box-Modell das Konzept der alten Internet Explorer-Versionen erkannt hat, liegt nicht daneben. Microsoft hat bereits beim IE5 die Probleme erkannt und ein fortschrittlicheres Box-Modell implementiert.

Leider verstieß es zum damaligen Zeitpunkt gegen den W3C-Standard und hat damit die Layoutentwicklung nicht wirklich vereinfacht. Der Internet Explorer 6 hat das Box-Modell zumindest im Standardkonformen Darstellungsmodus korrekt interpretiert und im IE7 funktioniert es endlich auch im Quirks Modus.

Und jetzt, wo der Browser endlich macht, was der Standard vorgibt, wird mit CSS 3 das “fehlerhafte” Box-Modell des IE plötzlich offiziell eingeführt.

Kategorien
Stylesheets Webentwicklung

How to set properties with selectors

Prozess Pyramide farbige Darstellung

CSS 3 Selektoren (selectors)

Damit Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren (selectors).

Ein CSS-Selektor nennt die Bedingungen, die auf ein Element zutreffen müssen, damit der nachfolgende Regelsatz an CSS-Deklarationen auf das Element angewendet wird. Der Selektor ist somit der Teil vor den geschweiften Klammern.

Mit neuen Selektoren (Damit Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren (selectors). kann man Elemente noch genauer auswählen.

Beispiele: 

first-of-type
first-letter

Fazit, CSS 3 Selektoren (selectors) erweitern also die Möglichkeiten zur gezielten Auswahl und Gestaltung von HTML-Elementen auf Webseiten erheblich. Mit Pseudo-Klassen, Pseudo-Elementen, Attribut-Selektoren und Kombinator-Selektoren bieten sie mehr Flexibilität und Präzision bei der Anpassung des Stils und der Interaktivität von Webseiten. Dies ermöglicht eine verbesserte Benutzererfahrung und eine ansprechendere Webentwicklung.

Kategorien
Stylesheets Webentwicklung

How to create an multi column layout

CSS Programming Image

column layout

Um die Erstellung eines mehrspaltigen Seitenlayouts (column layout) ohne viel Code zu ermöglichen, sollen drei neue CSS-Eigenschaften eingeführt werden.

Zum einen kann man mit column-count festlegen, wie viele Spalten erzeugt werden sollen, mit der Eigenschaft column-gap gibt man den Abstand zwischen den einzelnen Spalten an und mit column-width legt man die Breite der Spalte fest. Dabei sollen nur prozentuale Angaben möglich sein.

Beispiel:

body {
    display: grid;
		gap: 10px;
}

@media (min-width: 500px) { 

body {
 grid-template-columns: 1fr 3fr 1fr;	
 grid-template-rows: auto 1fr 100px;
}

header,footer {
  grid-column: 1 / -1;
}

Zusammenfassend kann gesagt werden: Das Holy-Grail-Layout ist ein Webseiten-Layout, das mehrere, trotz unterschiedlichen Inhalts gleich hohe Spalten hat.

Weiterführende Infomationen findet ihr auf: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/mehrspaltige_Layouts

Kategorien
Stylesheets Webentwicklung

Boxen effektiv horizontal Zentrieren: Tipps und Tricks

html code beispiel

Container oder Box zentrieren

Um eine Box mittig zum übergeordneten Objekt auszurichten, zu zentrieren, sind mir zwei unterschiedliche CSS Formatierungsmöglichkeiten bekannt. Auf diese werde ich hier eingehen.

Die Technik des horizontalen Zentrierens von Boxen ist ein fundamentales Element im Bereich des Webdesigns und der Gestaltung von Printmedien. Sie wird angewandt, um sicherzustellen, dass spezifische visuelle Elemente, häufig in Form von Boxen oder Abschnitten, harmonisch in der Mitte der horizontalen Achse positioniert werden. Diese Ausrichtung spielt eine entscheidende Rolle bei der Schaffung eines ästhetischen Gleichgewichts und gewährleistet, dass die präsentierten Inhalte ansprechend und leicht verständlich für die Betrachter sind.

Unsere Überschrift “Effektives Horizontales Zentrieren von Boxen: Tipps und Tricks” verspricht, Ihnen dabei zu helfen, diese gestalterische Herausforderung auf effiziente Weise zu meistern. In diesem Artikel bieten wir eine breite Palette von Ratschlägen, Techniken und bewährten Methoden, um Boxen, Abschnitte oder Inhalte auf professionelle Weise horizontal zu zentrieren. Beim Lesen dieses Artikels werden Sie lernen, wie Sie Ihre Designs ansprechender gestalten können, unabhängig davon, ob es sich um Webseiten, Poster, Flyer oder andere Grafikprojekte handelt.

Möglichkeiten

Wir werden verschiedene Herangehensweisen zur horizontalen Zentrierung von Boxen vorstellen, einschließlich CSS-Methoden und Techniken, die in Grafikdesign-Software verwendet werden. Zudem werden wir praktische Beispiele und Anwendungsfälle bereitstellen, um zu verdeutlichen, wie Sie diese Tipps und Tricks in Ihrer eigenen Arbeit effektiv umsetzen können.

Die Anwendung dieser Prinzipien wird nicht nur die visuelle Attraktivität Ihrer Projekte steigern, sondern auch die Benutzererfahrung optimieren, da zentrierte Elemente oft als ausgewogen und professionell wahrgenommen werden.

Weiterlesen “Boxen effektiv horizontal Zentrieren: Tipps und Tricks”
Kategorien
Stylesheets Webentwicklung

CSS Boxmodell: Innen, Außen & Dimensionen

Das Boxmodell

Das Boxmodell: Mit CSS können Sie Elementen (feste) Breiten, Höhen und Abstände geben und diese nebeneinander positionieren.

Das CSS-Boxmodell ist ein grundlegendes Konzept in der Webentwicklung, das die Darstellung und das Layout von HTML-Elementen beschreibt. Es behandelt jedes HTML-Element als eine rechteckige Box, die aus mehreren Schichten besteht:

  1. Inhalt (Content): Dies ist der tatsächliche Text, die Bilder oder andere Elemente, die innerhalb des HTML-Elements platziert sind. Die Größe dieses Bereichs wird durch die Eigenschaften “width” und “height” gesteuert.
  2. Padding: Das Padding ist der Raum zwischen dem Inhalt und dem inneren Rand der Box. Es dient dazu, den Inhalt von den Rändern zu trennen. Sie können das Padding mit den Eigenschaften “padding-top”, “padding-right”, “padding-bottom” und “padding-left” anpassen.
  3. Border: Der Border ist eine Linie oder ein Rahmen, die die äußere Kante der Box umgibt. Sie können die Dicke, den Stil und die Farbe des Rahmens mit den Eigenschaften “border-width”, “border-style” und “border-color” steuern.
  4. Margin: Der Margin ist der Raum zwischen der äußeren Kante der Box und anderen Elementen auf der Webseite. Er sorgt für Abstand zwischen den Boxen. Die Größe des Margins wird mit den Eigenschaften “margin-top”, “margin-right”, “margin-bottom” und “margin-left” festgelegt.

Die Gesamtbreite und Höhe eines HTML-Elements werden durch die Summe von Inhalt, Padding, Border und Margin bestimmt. Das Boxmodell ermöglicht es Entwicklern, das Layout von Webseiten genau zu kontrollieren, indem sie diese Eigenschaften gezielt anpassen.

Das Boxmodell ist ein grundlegendes Konzept in der Webentwicklung und spielt eine entscheidende Rolle bei der Gestaltung von Webseiten und der Positionierung von Inhalten.

Die rechteckigen Blöcke, die im Elementbaum erzeugt und auf dem Bildschirm dargestellt werden, folgen einem Schema, dem „Boxmodell“. Es ist somit Grundlage jeden Layouts.

Jedes Block-Element wie Textabsätze (p), -Abschnitte (div, article, main, aside, …) und Überschriften (h1, h2, …) bildet eine rechteckige Box, die Sie frei formatieren können.

Beispiel:

overflow-x, overflow-y

Mit overflow-x und overflow-y kann der “Überlauf” eines Elementes(overflow) für jede Richtung einzeln eingestellt werden (also ob z.B. ein Scrollbalken angezeigt werden soll).

box-sizing

Mittels box-sizing kann eingestellt werden ob sich die Breite eines Elementes auf deren Inhalt oder auf Inhalt+Rahmen+padding bezieht. (Webkit: -webkit-box-sizing)

calc()

Die Eigenschaft calc(), die z.B. innerhalb einer CSS-Eingeschaft wie width oder height stehen kann, ist es möglich Breiten- und Längenangaben direkt auszurechnen.

Kategorien
Stylesheets Webentwicklung

How to use CSS property resize

html code beispiel

resizeoutline

Die Eigenschaft resize bestimmt, ob ein Element durch die Maus vergrößert, bzw. verkleinert werden kann.

Die CSS-Eigenschaft resize ermöglicht weiterhin die Steuerung, ob und wie ein Element in der Größe verändert werden kann. Sie akzeptiert verschiedene Werte:

  • none: Das Element kann nicht verändert werden.
  • both: Das Element kann sowohl in der Breite als auch in der Höhe verändert werden.
  • horizontal: Das Element kann nur in der Breite verändert werden.
  • vertical: Das Element kann nur in der Höhe verändert werden.
  • initial: Setzt die resize-Eigenschaft auf den Standardwert, normalerweise “both”.
  • inherit: Erbt den Wert von der übergeordneten Elementkette.

Mit outline kann ein Rahmen zum Hervorheben um Elemente herum gelegt werden, der aber nicht die Box breiter macht.

Beachten Sie, dass nicht alle Elemente diese Eigenschaft standardmäßig unterstützen, und die tatsächliche Umsetzung kann je nach Browser variieren. Es ist wichtig sicherzustellen, dass das Element, das Sie ändern möchten, die resize-Eigenschaft unterstützt, um eine konsistente Benutzererfahrung zu gewährleisten.

Eine Veränderung der Größe ist nur möglich und sinnvoll, wenn die overflow-Eigenschaft des Elements einen Wert hat, der verschieden von visible ist.
Chrome und Safari lassen keine Verkleinerung des Elementes zu.

Kategorien
Stylesheets Webentwicklung

How to use the target attribute

Prozess Pyramide farbige Darstellung

target

Die Eigenschaft target (target attribute) ersetzt das nicht mehr valide HTML-Attribut target="".

Mit den Werten none, window und tab kann festgelegt werden, ob der Browser einen Link im gleichen Fenster, in einem neuen Fenster oder als neuen Tab öffnen soll.

Der :target-Selektor ist eine dynamische Pseudoklasse und selektiert Elemente, die Ziel eines Verweises sind.

Beispiel:

a:target { 
  color: red; 
}

In diesem Beispiel wird jeweils das aktuell angesprungene Verweisziel in roter Schrift dargestellt.

Kategorien
Stylesheets Webentwicklung

Coole Effekte für HTML Text-Elemente

Text Schatten
Text Schatten
box-shadowtext-shadow

Mit box-shadow kann einem Kasten ein Schatten einfach und ohne Bilder gegeben werden.

Dagegen bietet text-shadow die Möglichkeit Text mit sogar mehreren Schatten (im Opera) zu versehen. Damit können schöne Effekte wie Leuchten usw. erzielt werden.

h1 { text-shadow: .2em .2em #ccc; }
  • stellt für Überschriften (H1) einen hellgrauen Schatten ein.
Kategorien
Stylesheets Webentwicklung

How to use Background-Size

CSS Programming Image

Einleitung

CSS background-size ist eine Eigenschaft, mit der man die Größe von Hintergrundbildern in einem HTML-Element definieren kann.

Die background-size Eigenschaft kann verwendet werden, um die Breite und Höhe des Hintergrundbildes anzupassen, um es entweder vollständig oder teilweise im Hintergrund des Elements anzuzeigen. Es gibt verschiedene Werte, die für die background-size Eigenschaft verwendet werden können:

  1. auto – Der Standardwert. Das Hintergrundbild wird in seiner ursprünglichen Größe angezeigt.
  2. cover – Das Hintergrundbild wird so skaliert, dass es den gesamten Hintergrund des Elements ausfüllt, wobei die Proportionen des Bildes beibehalten werden. Das Bild wird möglicherweise beschnitten, um den Hintergrund vollständig zu füllen.
  3. contain – Ein Hintergrundbild wird so skaliert, dass es vollständig im Hintergrund des Elements angezeigt wird, wobei die Proportionen des Bildes beibehalten werden. Wenn das Bild kleiner als das Element ist, wird es nicht vergrößert, um das gesamte Element auszufüllen.
  4. Prozentangaben – Man kann auch Prozentangaben für die background-size Eigenschaft verwenden, um das Verhältnis von Breite zu Höhe des Hintergrundbildes zu definieren. Zum Beispiel kann man background-size: 50% 50%; verwenden, um das Hintergrundbild auf 50% der Breite und 50% der Höhe des Elements zu skalieren.
  5. Pixelangaben – Man kann auch Pixelangaben für die background-size Eigenschaft verwenden, um die genaue Breite und Höhe des Hintergrundbildes zu definieren.
  6. Weitere spezifische Werte wie “contain-float”, “cover-float” und “auto-fit” für besondere Anforderungen.

Zusätzlich zur background-size Eigenschaft gibt es noch weitere Eigenschaften, die mit Hintergrundbildern in CSS verwendet werden können, wie background-image, background-position und background-repeat. Zusammen können diese Eigenschaften dazu beitragen, den Hintergrund eines HTML-Elements genau nach den Anforderungen zu gestalten.

Unterstützung

Die EIgenschaft Background-Size wird zwar von vielen Browsern unterstützt, allerdings hat jedes Programm noch seine eigene Implementierung mit eigener Syntax. Alle folgenden Anweisungen sind nötig, um background-size auf allen Browsern, sofern diese die Technik auch unterstützen, zum Laufen zu bringen.

-moz-background-size:50% 30%; /* Firefox */
-webkit-background-size:50% 30%; /* Safari, Chrome */
background-size:50% 30%; /* Opera, IE*/

Hintergrundbilder lassen sich mit vier Schreibweisen einsetzen: mit Schlüsselwörtern, mit einem Wert, mit zwei Werten und mit der Syntax für mehrere Hintergrundbilder.

.schieberegler { 
   background-image: url(x_test_x.jpg);
   background-size: cover;
}

Bei mehr als einem Hintergrundbild sitzen die Größenangaben in einer Komma getrennten Liste.

1. Beispiel: background-size: 200px;
2. Beispiel: background-size: 200px 100px;
3. Beispiel: background-size: 200px 100px, 400px 200px; 
4. Beispiel: background-size: auto 200px;
5. Beispiel: background-size: 50% 25%;
6. Beispiel: background-size: contain;
7. Beispiel: background-size: cover;

Browser-Support: Alle modernen Browser (IE ab Version 10).

SVG-Grafik ist besonders gut geeignet als Hintergrundbild, da sich SVG an die Größe anpassen lässt. Ihr müsst ein wenig damit probieren bis ihr das richtige Layout gefunden habt. Viel Erfolg.