Dieses Template baut auf DIV-Container auf und besitzt eine feste Breite von 920px. Als primaeren Font verwende ich Trebuchet MS. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:
#container{width: 920px; margin:auto;}
Das funktioniert bei den meisten neueren Browsern, für den IE im Quirks-Modus sollte ein
body{text-align: center;}
eingefügt werden.
Die Eiganschaft text-align wurde dann im #container wieder angepasst. Dieses Moeglichkeit des Zentrierens verhindert das Verschieben bei geringen Breiten oder Auflösungen, im Vergleich zu einer Zentrierung mit negativen Rändern. Die Farbdarstellung der Ränder erfolgt einmal im #footer mittels border-bottom sowie unter #smallbar mittels border-top. Für Änderungen an der index.php und an der CSS-Datei seid Ihr selbst verantwortlich. Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.
Dieses Template ist getestet mit Firefox 2.0 und dem IE 6 bzw. 7. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.
Mit dem Box Model wird festgelegt welche CSS Angaben zur Bestimmung der Größe einer HTML Box relevant sind.
Wir haben einmal den Inhalt einer Box, bestimmt durch width und height.
Dazu kommen Werte für den Innenabstand, Rahmen und Außenabstand. Ich denke das schafft die meiste Verwirrung. Aus dem Grund habe ich das noch einmal grafisch dargestellt.
Der äußere schwarze Rand stellt die gesamte Box dar.
Die Möglichkeit mit Grid Layouts bietet eine Möglichkeit eine Seite in größere Bereiche zu unterteilen oder die Beziehung in Bezug auf Größe, Position und Ebene zwischen Teilen eines Steuerelements zu definieren.
Wie bei Tabellen ermöglicht das Rasterlayout einem Autor, Elemente in Spalten und Zeilen auszurichten. Mit CSS Grids sind ein vielfaches mehr an Layoutmöglichkeiten realisierbar oder deutlich einfacher als durch den Einsatz von Tabellen machbar ist.
Hier eine kleine Demo dazu.
Grid Layout
Der dargestellte Bereich ist veränderlich je nach Breite des Browserfensters. Im nachfolgenden findet ihr den Code für die Darstellung “Grid Layout”.
Die Grid-Eigenschaft ist eine abgekürzte Schreibweise, die alle expliziten und impliziten Grid-Eigenschaften in einer einzigen Deklaration festlegt.
Der HTML Code nimmt sich dagegen recht einfach aus.
<body>
<header>
<p>Hier erscheint der Kopfbereich</p>
</header>
<nav>
<p>...Menüs evtl.</p>
</nav>
<aside>
<p>Das ist ein Bereich der neben dem Inhalt angezeigt wird</p>
</aside>
<article>
<p>Hier erscheint der Inhalt.</p>
<p>Hier erscheint mehr Inhalt.</p>
<p>Hier erscheint noch mehr Inhalt.</p>
</article>
<footer>
<p>Fussbereich</p>
</footer>
</body>
</html>
Zusammenfassend ist zu sagen, mit dem Grid System können alle denkbaren Kombinationen erstellt werden. Aber, sie müssen rechteckig sein. L-Formen lassen sich nicht konstruieren.
Die CSS-Eigenschaft :text-indent legt die Länge des Einzugs vor Textzeilen, der in einem Block eingefügt wird.
Text Indent und First Line
Das CSS-Pseudoelement ::first-line wendet Stile gestalterisch auf die erste Zeile eines Elements auf Blockebene an.
Diese hier genannten beiden Eigenschaften für Elemente bieten sehr gute Möglichkeiten mit einfachen Mitteln eine Text abwechslungsreicher zu gestalten.
Effektive Hintergrundgestaltung mit CSS ist entscheidend für das Webdesign. Dabei werden Farben und Bilder als Hintergrund für Webseitenelemente verwendet. CSS ermöglicht die Anpassung von Hintergrundfarben mit Eigenschaften wie background-color und das Hinzufügen von Hintergrundbildern mit background-image. Sie können die Wiederholung der Bilder kontrollieren und deren Position und Größe festlegen. Weiterhin ist es möglich, Transparenz für Hintergründe zu definieren und Gradientenhintergründe mit CSS zu erstellen. Geschickte Kombinationen von Bildern und Farben ermöglichen komplexe Hintergrundeffekte, die die visuelle Anziehungskraft der Webseite steigern können. Insgesamt ist die effektive Hintergrundgestaltung ein wichtiger Faktor für ein ansprechendes Webdesign und eine verbesserte Benutzererfahrung.
CSS definiert drei Typen von gradients:.
Linear Gradients (von oben nach unten, von rechts nach links),
Radial Gradients (werden um das Zentrum gebildet),
Conic Gradients (rotieren um einen Mittelpunkt).
Hier einige Beispiele für einen Background.
Das Beispiel zeigt eine linearen Gradienten von oben (rot) nach unten (gelb).
background-image: linear-gradient(red, yellow);
Das Beispiel zeigt eine linearen Gradienten von links nach rechts mit mehreren Farben.
Das Beispiel zeigt eine konischen Gradienten im Uhrzeigersinn mit mehreren Farben.
background-image: conic-gradient(red 45deg, yellow 90deg, blue 240deg);
Eine gekonnte Background-Gestaltung mit CSS verleiht Webseiten eine visuelle Tiefe und trägt dazu bei, eine ansprechende und benutzerfreundliche Online-Umgebung zu schaffen.
Die Eigenschaft position: gibt die Art der Methode zu der Positionierung an, welche für ein Element verwendet wird (static, relative, fixed, absolute oder sticky).
Position Beispiel
position: static;
HTML Elemente werden standardmäßig als static definiert.
Statisch positionierte Objekte werden nicht durch die Angabe top, bottom, left oder right Eigenschaften beeinflusst.
Ein Element mit der Angabe position: relative; wird relativ zu seiner normalen Position positioniert ist. Das Festlegen der oberen, rechten, unteren und linken Eigenschaften eines relativ positionierten Elements führt dazu, dass es von seiner normalen Position ausgehend verschoben werden kann. Andere Inhalte werden nicht angepasst, um die Lücke zu füllen, die das Element hinterlassen hat.
position: fixed; positioniert ein Objekt relativ zum Ansichtsfenster, folge dessen bleibt immer an der gleichen Stelle, auch wenn die Browserseite gescrollt wird. Die Eigenschaften top, right, bottom und left können verwendet werden, um das Element an die gewollte Stelle zu legen. Ein festes Element hinterlässt keine freie Stelle auf dem Platz, wo es sich befand.
position: sticky; platziert ein Objekt in Abhängigkeit der Position wie gescrollt wurde/wird.
EIn mit sticky positioniertes Objekt wechselt zwischen relative and fixed. Es verhält sich relative solange bis die Scrollposition es aus dem Bild schieben würde, ab dann fixed.
Hier noch kurz den HTML Code zu dem kleinen Beispielen.
<body>
<h2>position: sticky;</h2>
<div class="sticky">
Dieses Element besitzt eine sticky Position.
</div>
<h2>position: static;</h2>
<div class="static">
Dieses Element besitzt eine statische Position.
</div>
<h2>position: relative;</h2>
<div class="relative">
Dieses Element besitzt eine relative Position.
</div>
<h2>position: fixed;</h2>
<div class="fixed">
Dieses Element besitzt eine fixe Position.
</div>
<h2>position: absolute;</h2>
<div class="absolute">
Dieses Element besitzt eine absolute Position.
</div>
</body>
Mit border-radius ist es endlich möglich, Elemente (wie Rahmen) valide mit abgerundeten Ecken / Rahmen zu erstellen.
Für Mozilla- und Safari-Browser gibt es bereits die anbieterspezifischen CSS-Eigenschaften -moz-border-radius und -khtml-border-radius um den Effekt zu erzielen.
Um den Radius für bestimmte Ecken zu definieren, können die Suffixe -topleft, -topright, -bottomright und -bottomleft verwendet werden. Bei Safari wird die Angabe der Ecke eingeschoben: -khtml-border-top-left-radius
Rahmen-Bilder
border-image
Die Eigenschaft border-image können für Rahmen Hintergrundbilder festgelegt werden. Die neue Eigenschaft kann die Angabe von bis zu drei URLs aufnehmen, um die Bilder einzubauen.
Außerdem können mit den Eigenschaften border-top-image, border-bottom-image, border-left-image und border-right-image für alle Kanten eigene Grafiken definiert werden. Die Definitionen der CSS-Eigenschaft werden bei einem Einsatz von überschrieben.
border-corner-image
Last but not least wird mit border-corner-image die Zuweisung von Bildern für alle 4 Ecken möglich sein. Wie von anderen border-Eigenschaften bekannt auch einzeln mit border-top-left-image, border-top-right-image, border-bottom-right-image und border-bottom-left-image.
Ein “CSS Gradient” ist eine Methode, um Hintergrundfarben auf einer Webseite zu gestalten, bei der die Farben fließend von einer zur anderen übergehen. Es ist wie ein Farbverlauf. Es kann gerade Linien oder runde Kreise erzeugen, die Farben miteinander vermischen. Dies wird in der Webentwicklung verwendet, um Webseiten hübscher zu machen, indem man Farbübergänge erstellt, ohne Bilder zu verwenden.
Man muss zwischen zwei Arten von Farbverläufen unterscheiden:
Lineare Verläufe, geradliniger Farbverlauf von zwei oder mehr Farben
background:-moz-linear-gradient(top,#fff,#adf);/* Firefox */
background:-webkit-linear-gradient(top,#fff,#adf);/* Safari, Chrome */
background:-o-linear-gradient(top,#fff,#adf);/* Opera */
background:-ms-linear-gradient(top,#fff,#adf);/* IE */
background:linear-gradient(top,#fff,#adf);/* W3C Standard */
Radiale Verläufe, kreisförmiger Farbverlauf von zwei oder mehr Farben
background:-moz-radial-gradient(center,#fff,#adf);/* Firefox */
background:-webkit-radial-gradient(center,#fff,#adf);/* Safari, Chrome */
background:-o-radial-gradient(center,#fff,#adf);/* Opera */
background:-ms-radial-gradient(center,#fff,#adf);/* IE */
background:radial-gradient(center,#fff,#adf);/* W3C Standard */
linear-gradient, radial-gradient und conic-gradient sind Werte für background-image, border-image, list-style-image und generated content.
Es gibt drei Formen des CSS-Gradient:
Der lineare gerade Verlauf von oben nach unten oder von einer Seite zur anderen,
radialer Verlauf oder radial Gradient vom Rand zur Mitte des Elements (z.B. Zielscheibe),
Mit der opacity Eigenschaft kann die Deckkraft/Transparenz von Elementen gesteuert werden. Diese Eigenschaft wird zwar so nicht im Internet Explorer unterstützt, es gibt aber eine ebenbürtige Eigenschaft, wodurch in allen Browsern Transparenz genutzt werden kann.
Beachten Sie: Obwohl der Wert für opacity eine prozentuale Angabe ist, sind Prozentwerte nicht erlaubt.
Empfehlung: Wenn Sie nur den Hintergrund und nicht den Textinhalt durchscheinend darstellen wollen, verwenden Sie rgba-Farbangaben bei der Hintergrundfarbe.
Mit Hilfe von CSS Filtern (:filter) können hauptsächlich Bilder in ihrer Farbe verändert werden. Es ist möglich Schatten hinzufügen, die Deckkraft anzupassen oder Bilder und Texte weichzuzeichnen. CSS Filter stehen mittlerweile in allen modernen Browsern (außer dem IE) zur Verfügung. Aus diesem Grund zeige ich hier, in einer kurzen Darstellung die Funktionsweise.
Anwendungsgebiete
CSS Filter lassen sich sowohl auf Grafiken in HTML als auch auf CSS-Eigenschaften wie Hintergründe, Texte, CSS-Elemente, SVG-Grafiken und Videos anwenden. In einem kurzen Demo habe ich nur einige Parameter verwendet, es gibt noch einige mehr.
grayscale(%) z.B. konvertiert ein Bild zu Graustufen. Der initiale Wert beträgt 0.
blur(px) erzeugt einen Weichzeichnereffekt an einem Bild. Der Radiuswert definiert den Wert der Standardabweichung zur Gaußschen Funktion oder wie viele Pixel auf dem Bildschirm ineinander übergehen, sodass ein größerer Wert mehr Unschärfe erzeugt.
brightness(%) verändert die Helligkeit eines angegebenen Objekts. Das bedeutet ,die Funktion verwendet einen linearen Multiplikator auf das Ausgangsobjekt an, so dass es heller oder dunkler erscheint.
hue-rotate(deg) konvertiert ein Bild auf dem Farbkreis um eine Anzahl an Grad nach der das Originalobjekt angepasst wird.
Um eine mehrfache Anwendung unterschiedlicher Filter zu verwenden, müssen die Werte durch ein Leerzeichen getrennt angegeben werden. Bei einigen Fällen ist die Reihenfolge entscheidend. Folglich ist ein eingetragener Parameter (%, oder Grad etc.) ungültig. so wird automatisch der Wert none gesetzt und es wird keine Anpassung erfolgen.
Beispielcode
Das könnt ihr selbst ausprobieren mit dem kleinen Beispiel HTML.
Im Anschluss noch die entsprechende Ausgabe im Mozilla Firefox 102.5.0esr (64-Bit).
Zusammenfassung
Fazit ist, die Eigenschaften sind sehr interessant, durch die aktuell fehlende Implementierung im Edge und IE verliert sie allerdings etwas an Wirkung. Viel Spaß und Erfolg beim ausprobieren.
Um dir ein optimales Erlebnis zu bieten, verwenden wir Technologien wie Cookies, um Geräteinformationen zu speichern und/oder darauf zuzugreifen. Wenn du diesen Technologien zustimmst, können wir Daten wie das Surfverhalten oder eindeutige IDs auf dieser Website verarbeiten. Wenn du deine Zustimmung nicht erteilst oder zurückziehst, können bestimmte Merkmale und Funktionen beeinträchtigt werden.
Funktional
Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Voreinstellungen erforderlich, die nicht vom Abonnenten oder Nutzer beantragt wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt.Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
