Kategorien
Stylesheets

Texte mit CSS überzeugend gestalten

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
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.

p::first-line {
	font-size: 1.2rem;
	font-weight: bold;
	text-decoration: underline;
}
p {
	text-indent: 5em;
	background: #CCCCCC;
}

Der Code ist sehr einfach und kann natürlich ausgebaut werden.

Kategorien
Scripte

Disconnect users with WMI

Ein kleines Script um einen Benutzer remote oder lokal abzumelden (disconnect). Benötigt wird ein administrativer Zugriff aus das System. Nützlich für zeitgesteuerte Aufgaben zu starten.

Benutzer abmelden
rechnername = InputBox("Rechnername?")
WMI Scripting Interface
Set ISWbemLoc = CreateObject("WbemScripting.SWbemLocator")
ISWbemLoc.Security_.Privileges.Add 18
user = InputBox("Benutzername?",,"Administrator")
pwd = InputBox("Kennwort?")
Set wmi = ISWbemLoc.ConnectServer(rechnername, "root/cimv2", user, pwd)
Set ossam = wmi.InstancesOf("Win32_OperatingSystem")
For each os in ossam
	Set thisoss = os
	exit For
Next
MsgBox thisoss.GetObjectText_
antwort = MsgBox("Wollen Sie den Benutzer abmelden?", vbYesNo + vbQuestion + vbSystemModal)
If antwort = vbYes then
	thisoss.Win32Shutdown 0, 0
End If

513 B

Kategorien
Joomla Templates

Joomla Template – K25

Zusammenfassung

Dieses Joomla Template baut auf DIV-Container auf, besitzt eine feste Breite von 980px.

Der primäre Font ist Trebuchet MS. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder.

#rahmen {
width: 980px;
margin: 0 auto;
}
#top-aussen {
width: 960px;
height: 50px;
margin: 0;
background-color: #FFFFFF;
border-left: 20px solid #4040A0; /* 20px breiter Rand !!! */
}
#header-aussen {
width: 960px;
height: 180px;
margin: 0;
border-left: 20px solid #000000; /* 20px breiter Rand !!! */
background: #FFFFFF url(../images/bg-header-aussen.jpg);
}

Die CSS Datei ist beim W3C nach CSS Standard 2.1 validiert. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet. Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.

112 kB

Kategorien
Joomla Templates

Joomla Template Reihe K24

Joomla Templates sind Vorlagen oder Designs, die auf der Joomla-Plattform verwendet werden. Dies dient zur Gestaltung des Erscheinungsbildes und der Funktionalität einer Website. Ein Joomla Template besteht aus einer Sammlung von Dateien, die das Aussehen und Verhalten der Website steuern, wie z.B. CSS-Dateien, JavaScript-Dateien, PHP-Dateien, Bilder und HTML-Vorlagen.

Ein Joomla Template ermöglicht es Benutzern, das Layout, die Farben, die Schriftarten, das Menü, die Positionen von Modulen und anderen Inhalten auf einer Joomla-Website anzupassen. Templates können entweder von Grund auf neu erstellt oder aus einer Vielzahl von vorgefertigten Vorlagen ausgewählt werden, die auf Joomla-Template-Marktplätzen verfügbar sind.

Joomla Templates sind ein wichtiger Bestandteil der Gestaltung von Websites auf der Joomla-Plattform, da sie die Benutzerfreundlichkeit und das Erscheinungsbild der Website maßgeblich beeinflussen.

Die Erstellung eines Joomla-Templates erfordert ein gewisses Verständnis von HTML, CSS und PHP, sowie Kenntnisse der Joomla-Architektur und der Funktionsweise von Templates.

Es gibt viele weitere Details und Feinheiten, die berücksichtigt werden müssen, um ein qualitativ hochwertiges Template zu erstellen. Es ist ratsam, sich mit der Joomla-Dokumentation und den Entwickler-Communities zu befassen, um weitere Informationen und Unterstützung zu erhalten.

https://www.w3.org/Style/CSS/Overview.de.htm

Zusammenfassung

Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 980px.

Der primäre Font ist Tahoma. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:

#container {
margin:auto;
width:980px;
height:100%;
text-align:center;
background-color:#FFFFFF;
}

Dieses Template ist getestet mit Firefox und IE. Das Topmenue liegt auf “user4”, der banner auf “banner”, der newsflash auf “top”, latestnews auf “user1” und mostread auf “user2”.

Screenshot

Die CSS Datei ist beim W3C nach CSS Standard 2.1 validiert. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

167 kB

Kategorien
Allgemein

Breakpoints setzen mit CSS Media Queries

Einführung

Breakpoints sind grundlegende Daten, wo sich das Layout ändert, um sich optimal an eine Geräteklasse (Monitor) anzupassen. Sie können durch Media Queries bestimmt werden. Hier ein Teil des Beispiels in der Darstellung im Browser.

Breakpoint eins
Breakpoint eins
Breakpoint zwei
Breakpoint zwei

Wohin sollte man am besten Breakpoints setzen? Der aktuelle Blick sollte hier auf den mobilen Geräten, wie Tablets und Handys liegen. Es ist mit Sicherheit nicht nötig für jede einzelne Geräteklasse einen Breakpoint zu setzen. Warum nicht? Je mehr Breakpoints um so größer wird der benötigte Code. Folglich steigert es auch nicht die Übersichtlichkeit.

Umsetzung

Sinnvoll ist es die Gerätevielfalt in Klassen einzuteilen. Meist reicht es aus auf drei Gerätegruppen sich zu konzentrieren, klein, mittel und groß. Meiner Meinung nach sind Werte von kleiner als 5-600px, größer als 1200px recht gut geeignet. Als weiters bieten sich Anpassungen für die Gerätegruppe dazwischen an. Wer mag kann gern mehr verwenden. In dem vorliegenden Beispiel habe ich den Hintergrund darauf bezogen anpassen lassen. Hier ein Beispiel mit fünf Breakpoints.

<!DOCTYPE html>
<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=0.5">
		<style>
			.beispiel {
				padding: 20px;
				color: white;
				line-height: 1.5em;
			}
			/* Sehr kleine Geräte (Handys, 600px und darunter) */
			@media only screen and (max-width: 600px) {
				.beispiel {background: red; font-size: 18px}
			}
			/* Kleine Geräte (Tablets und große Handys, 600px und mehr) */
			@media only screen and (min-width: 600px) {
				.beispiel {background: green; font-size: 20px}
			}
			/* Zwischengrößen (Tablets, 768px und mehr) */
			@media only screen and (min-width: 768px) {
				.beispiel {background: blue; font-size: 24px}
			} 
			/* Große Breite (Laptops/Desktops, 992px und mehr) */
			@media only screen and (min-width: 992px) {
				.beispiel {background: orange; font-size: 28px}
			} 
			/* Sehr große Breite (Große Laptops und Desktops, 1200px und mehr) */
			@media only screen and (min-width: 1200px) {
				.beispiel {background: pink; font-size: 32px}
			}
		</style>
	</head>
	<body>
	<h2>Typische Breakpoints</h2>
	<p class="beispiel">Passe die Breite des Browserfensters an, um zu sehen wie sich die Eingenschaften (Hintergrundfarbe, Schriftgröße) verändern.</p>
	</body>
</html>
Kategorien
Stylesheets Webentwicklung

CSS: Kreative Hintergründe für Websites

CSS Programming Image

Kurzbeschreibung

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.

linearer Gradient

Das Beispiel zeigt eine linearen Gradienten von oben (rot) nach unten (gelb).

background-image: linear-gradient(red, yellow);

linearer Gradient multi color

Das Beispiel zeigt eine linearen Gradienten von links nach rechts mit mehreren Farben.

background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

radialer Gradient multi color

Das Beispiel zeigt eine radialen Gradienten im Bvon innen nach außen mit mehreren Farben.

background-image: radial-gradient(red, yellow, blue);

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.

Kategorien
Stylesheets Webentwicklung

Kreative Methoden durch :position

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 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.

Beispiel 1

div.static {
  position: static;
  border: 2px dotted #73AD21;
  width: 300px;
}

position: relative;

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.

Beispiel 2

div.relative {
  position: relative;
  left: 30px;
  border: 2px solid #11AA11;
  width: 300px;
}

position: fixed;

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.

Beispiel 3

div.fixed {
  position: fixed;
  top: 200px;
  left: 250px;
  width: 300px;
  border: 2px inset #AA00BB;
}

position: absolute;

position: absolute; wird relativ zum nächsten positionierten Vorfahren angeordnet. Hierbei können Überlagerungen (gewollt oder ungewollt) auftreten.

Wenn ein absolut positioniertes Element keine Vorfahren hat, verwendet es den Textkörper des Dokuments. Es bewegt sich beim Scrollen der Seite mit.

Beispiel 4

div.absolute {
  position: absolute;
  top: 400px;
  left: 100px;
  width: 300px;
  border: 2px double #FF00AA;
}

position: sticky;

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.

Beispiel 5

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #AAAAAA;
  border: 2px groove #0000AA;
  width: 300px;  
}

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>
Kategorien
Stylesheets Webentwicklung

:filter – unglaubliche Möglichkeiten

Einführung

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.

filter: grayscale(100%)
filter: brightness(150%);
filter: blur(5px);
filter: hue-rotate(90deg);
.
.
.

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.

<!DOCTYPE html>
<html>
	<head>
		<style>
		img {
		  width: 150px;
		  height: auto;
		}
		body {margin-left: 40px}
		.grauskale { filter: grayscale(100%);}
		.helligkeit { filter: brightness(150%);}		  
		.weichzeichnen { filter: blur(5px);}
		.farbrotation { filter: hue-rotate(90deg);}	  
		</style>
	</head>
	<body>
	<h1>Die Filter Eigenschaft</h1>
		<div>
			<p>Original</p>
			<img src="flower.jpg" alt="flower">
			<p>Helligkeit 150%</p>
			<img class="helligkeit" src="flower.jpg" alt="flower">
			<p>Grauwerte</p>
			<img class="grauskale" src="flower.jpg" alt="flower">
			<p>Weichzeichnen</p>
			<img class="weichzeichnen" src="flower.jpg" alt="flower">
			<p>Farbrotation</p>
			<img class="farbrotation" src="flower.jpg" alt="flower">
		</div>
	</body>
</html>

Ausgabe

Im Anschluss noch die entsprechende Ausgabe im Mozilla Firefox 102.5.0esr (64-Bit).

Filter Eigenschaft Beispiell

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.

Kategorien
Stylesheets Webentwicklung

How to create a simple Grid Layout

Hier dargestellt und beschrieben wird ein Grid Layout. Ich habe drei Darstellungen in dem Stylesheet umgesetzt. Größer 1200px, kleiner 1200px bis zu 640px und als letztes, kleiner als 640px Breite.
Die Angabe von @media screen and (min-width: xx px) ermöglicht hier die Unterscheidung des Codes nach Medientypen wie Computer Bildschirmen, Tablets, Smartphones usw.

Mit den Pseudoklassen :before und :after ist es möglich Inhalt vor dem entsprechenden Selektor einzufügen. Mit der Eigenschaft display: table können Elemente, die keine Tabellen sind, als Raster dargestellt werden.

Kategorien
Stylesheets Webentwicklung

Flexible Layouts in HTML mit CSS

Das CSS Flexible Box Layout zeigt neben CSS Grid eine der beiden wesentlichen Möglichkeiten zur Gestaltung von Layouts mit CSS auf.

Im Gegensatz zu älteren Techniken wie Floats wird Flexbox für die Erzeugung von responsiven Layouts bereitgestellt. Es stehen mit flexiblen Layouts sehr eine Vielzahl an Möglichkeiten der Gestaltung zur Verfügung.

Wie funktioniert CSS Flexbox?

Flexbox arbeitet mit einem Container-Element und den darin enthaltenen Child Elementen in der ersten Ebene (Flex-Items). Der Flexboxcontainer wirkt auf eine Ebene. Weitere Ebenen abwärts werden nicht unterstützt.

Bei den Container Elementen kann es sich um <div> Elemente oder auch um Listen handeln. Hier ein Beispiel mit Listenelementen, in der realen Darstellung ist es nicht in Graustufen gehalten..

Flex Layout
Flex Layout

Eigenschaften der Flex-Box

Elemente können mittels der Eigenschaften justify-content, align-items auf den Achsen (vertikal und horizontal) positioniert werden. Die Ausrichtung auf der horizontalen kann mit flex-direction angepasst werden.

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Flexible Darstellung</title>
	<style>
		ul {
			font-family: sans-serif;
			display: flex;
			justify-content: space-around;	
			margin: 5rem;
			border: 1px solid #BBBBBB;
			background-color: #595873;
			padding: 0px;
			width: 35rem; 
			list-style-type: none;
		}
		li {
			box-sizing: border-box;
			margin: 0px;
			border-right: 0px solid #FFFFFF;
			text-align: center;
		}
		li:last-of-type {
			border-right: none;
		}
		a {
			display: block;
			padding: 1rem;
			background-color: #567482;
			color: #FFFFFF;
			text-decoration: none;
		}
		a:hover, a:focus {
			background-color: #CCCCCC;
			color: #000000;
		}	
	</style>
</head>
<body>
  <nav>
  <ul>
    <li><a href="#" title="Anfang">Anfang</a></li>
    <li><a href="#" title="Beiträge">Beiträge</a></li>
    <li><a href="#" title="Kontaktformular">Kontaktformular</a></li>
    <li><a href="#" title="Impressum">Impressum</a></li>
  </ul>
</nav>
</body>
</html>

Die Eigenschaft display:flex erzeugt die Flexbox generell.

Die weiteren Eingenschaften lauten:

  • flex-direction: row (links nach rechts = Standardwert)
  • flex-direction: column (oben nach unten)
  • flex-direction: row-reverse (rechts nach links)
  • flex-direction: column-reverse (unten nach oben)

Flex Elemente

Neben der Positionierung über den Flex-Container können auch die Items innerhalb des Containers angepasst werden. Entweder mit Hilfe der klassischen CSS-Angaben für Größe und mittels eines Box Models. In der CSS Flexbox dienen die Eigenschaften flex-basis, flex-grow und flex-shrink zur Beeinflussung der Größe. Mit den verschiedenen flex-Werten kann das gewollte Layout innerhalb des Flex Containers erzeugt werden.