Kategorie: Webentwicklung

Beiträge zu CSS, Stylesheets und Joomla Vorlagen

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

Elegante abgerundete Rahmen mit CSS

CSS Programming Image
Abgerundete Ecken und Rahmen mit CSS

border-radius

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.

Kategorien
Stylesheets Webentwicklung

:gradient – tolle Backgrounds

CSS Programming 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),
  • konischer Verfauf

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund

Kategorien
Stylesheets Webentwicklung

:opacity und interessante Möglichkeiten

CSS Programming Image

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.

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
Webentwicklung

Coole Joomla Updates 2022

Joomla Logo flat

Zusammenfassung der erschienenen Joomla Updates und Fixes aus dem Jahr 2022

  • Joomla 4.2.6 ist jetzt verfügbar (Joomla Updates). Dies ist eine Fehlerbehebungsversion für die 4.x-Serie von Joomla.
  • Joomla 4.2.5 ist jetzt verfügbar. Dies ist eine Sicherheits– und Fehlerbehebungsversion für die 4.x-Serie von Joomla, die 1 Sicherheitslücke behebt.
  • Joomla! 4.2.4 wurde veröffentlicht. Dies ist eine Sicherheitsversion für die 4.x Serie von Joomla, die 2 Sicherheitslücken behebt.
  • Das Joomla-Projekt veröffentlicht mit 4.2.3 eine Bugfix Version im normalen Updatezyklus. Das Release enthält über 50 geschlossene Pull Requests.
  • Joomla unterstützt seit einiger Zeit die Web-Authentifizierung .

Weitere interessante Themen.

  • c
  • Das Joomla!-Projekt freut sich, die Veröffentlichung von Joomla 4.2 bekannt zu geben, welche mit vielen Funktionen ausgestattet ist und genau zum richtigen Zeitpunkt erscheint.
  • Das Joomla-Projekt freut sich, die Verfügbarkeit des ersten Joomla 4.2 Release Candidate zum Testen bekannt zu geben.
  • Joomla 4.1.5 & 3.10.10 sind jetzt verfügbar. Dies ist ein Bugfix-Release für die 4.x und 3.x Serie von Joomla, welches verschiedene Fehlerbehebungen und Verbesserungen enthält.
  • Joomla 4.1.2 & 3.10.8 sind jetzt verfügbar. Dies ist ein Security-Release für die 4.x und 3.x Serie von Joomla, die einige Sicherheitslücken behebt und verschiedene Fehlerbehebungen und Verbesserungen enthält.
  • Joomla 4.1.1 und 3.10.7 sind jetzt verfügbar. Es handelt sich dabei um Security-Release, welches sowohl Sicherheitslücken in Joomla 4.1.x als auch in Joomla 3.10.x schließt. Weiterhin enthält die neueste Version viele Fehlerbehebungen und Verbesserungen.
  • Das Joomla! Projekt freut sich, die funktionsreiche und zeitnahe Veröffentlichung von Joomla 4.1 bekannt zu geben
  • Es ist soweit: Das Joomla-Projekt veröffentlicht die zweite Joomla 4.1 RC-Version zum Testen.
  • Joomla 4.0.6 und 3.10.5 sind jetzt verfügbar. Es handelt sich um Bug-Fix-Versionen für die 4.0.x und 3.10.x Serie von Joomla, die viele Fehlerbehebungen und Verbesserungen enthalten.

Quelle: Joomla.de

Kategorien
Joomla Modul

Joomla Modul Xing Share (DE)

Joomla Logo flat

XING Share Modul in Deutsch auf Deiner Joomla Webseite!

Alle Größen die XING anbietet sind möglich. Einstellungen werden über Modulparameter gesetzt. XING Profil eintragen und los geht’s!

Der Container liegt in einer DIV-Box, die sich durch die Angabe eines Klassensuffixes über die CSS-Datei des Templates formatieren lässt.

Die Anzeige des Backlinks kann durch den Parameter “Backlink anzeigen” gesteuert werden.

mehr dazu auf: https://dev.xing.com/plugins

2 kB

Kategorien
Webentwicklung

Joomla 4.0 was erwartet uns

Joomla Logo flat

Joomla ist ein preisgekröntes Open-Source-CMS für Webseiten, das von einer starken Gemeinschaft von Freiwilligen entwickelt und gepflegt wird. Nun steht Joomla 4.0 vor der Tür.

Ursprung

Joomla! existiert seit mittlerweile mehr als 10 Jahren und ist der Nachfolger des Projektes “Mambo”. Das CMS steht unter der GNU General Public License. Der Name Joomla! leitet sich vom Suaheli-Wort “Jumla” ab, welches übersetzt “Alle zusammen” bedeutet.

Als Zusammenfassung kann gesagt werden: Joomla ist eine sehr leistungsfähige, robuste, sichere und einfach zu bedienende Software.
Joomla kann kostenlos heruntergeladen und genutzt werden, seine Funktionalitäten entsprechen den modernsten Web-Technologien.

Joomla ermöglicht Website-Betreibern mächtige Webseiten zu erstellen, deren Inhalte sich einfach und mühelos pflegen lassen.

joomla.org
Kategorien
Stylesheets Webentwicklung

CSS Box Model – Tipps

CSS Programming Image

Zu einem Test des CSS Box Model habe ich euch hier den Code einer HTML Datei eingestellt. Das ist nur ein Grundaufbau, ohne Schnick-Schnack.

Die Darstellung verdeutlicht wie die Boxen positioniert werden und welche Abstände gültig werden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Das CSS Box Model</title>
        <link type="text/css" rel="stylesheet" media="screen" href="design.css" />
    </head>
    <body>
        <h1 id="title">Das CSS Box Model</h1>
        <div id="content">
            <h2>Anfang</h2>
            <div class="box_1">Box 1</div>
            <div class="box_2">Box 2</div>
        </div>
    </body>
</html>

Zum Ausprobieren gibt es hier auch die dazugehörige CSS Datei als Code. Hiermit könnt ihr euch mit dem CSS Box Model vertraut machen und durch etwas probieren die Effekte selbst erzeugen.

* {
    margin: 0px;
    padding: 0px;
    border: none;
}
html {
    background-color: #FFFFFF;
    color: #111111;
    font-family: Tahoma, Arial, sans-serif;
}
#title {
    background-color: #a2b3c4;
    height: 170px;
    text-align: center;
    padding: 10px;
}
#content {
    margin: 10px;
	padding: 10px;
	background-color: yellow;
}
#content h2 {
    color: #111111;
	margin: 100px;
	padding: 50px;
	max-width: 200px;
	background-color: #22C563;
	border: 5px solid #222222;
}
.box_1 {
	margin: 100px;
	padding: 50px;
	max-width: 200px;
	background-color: #11C563;
	border: 5px solid #888888;
}
.box_2 {
    margin: 100px;
	padding: 50px;
	max-width: 200px;
	background-color: #CDC563;
	border: 5px solid #222222;
}

Hier unten noch ein Screenshot dessen, was die HTML und CSS Datei an Ausgabe erzeugt.

CSS Box Model Beispiel
CSS Box Model Beispiel

Viel Erfolg!