Template Spielereien mit Transparenz und Rotation

[Gert]

Hallo allerseits,

seit vielen Jahren bin ich bewusst konservativ in der Anwendung moderner Techniken. Ich betrachte es nicht als meine Aufgabe, die Entwicklung des Internet voranzutreiben, sondern bin bestrebt, dass meine Templates auch von älteren Geräten korrekt dargstellt werden. Deshalb habe ich z. B. bis vor kurzem noch transparente Hintergründe mit .png Bildern umgesetzt.

Jetzt habe ich mich mal mit modernen CSS Techniken auseinandergesetzt, und dabei festgestellt, dass sowohl bei alten Androids als auch bei alten iPads einiges zu beachten ist.

Alte Androids verstehen z. B. rotate: 45deg; nicht, deshalb empfehle ich transform:rotate(45deg);

Alte iPads und somit vermutlich auch alte iPhones ignorieren moderne rgb Syntax und auch hexadezimale Angaben wie background: #00000099; zur Herstellung von Transparenz. Zuverlässig auf allen mir zur Verfügung stehenden Geräten hat Code wie rgba(0,0,0,0.5) funktioniert. Ich habe nicht alle Schreibweisen getestet. Nachdem die konservative rgba Syntax überall funktioniert hat, war ich zufrieden.

Die Ergebnisse meiner Spielereien seht Ihr hier:

https://www.ge-webdesign.de/demotpl/?Te ... _zentriert

Alle Templates unter "Template Ideen 2025" spielen mit überlappenden geometrischen Figuren, Farbverläufen, Transparenz und dezent durchscheinenden Hintergrundbildern. Wenn Ihr Lust habt und exotische Geräte wie uralte Androids oder iPhones/iPads am laufen habt, könnt Ihr diese Templates gerne mal testen und hier Feedback geben,

Gert

[Gert]

Hallo,

inzwischen habe ich doch mal eine Testseite zum Thema CSS Transparenz online gestellt:

https://www.ge-webdesign.de/transparenz.htm

Auf meinem Uralt-iPad funktionieren nur die Schreibweisen 0 und 1.1. Auf allen anderen Geräten, Windows 8.1 bis 11 sowie verschiedenen Androids von Android 5 bis zu aktuellen Geräten, funktionieren alle Schreibweisen.

Interessant ist für mich nun, wie das auf moderneren iPhones und iPads aussieht,

ein schönes Wochenende - Gert

[Gonzo Gates]

Hallo Gert,

testen auf exotischen Altgeräten geht bei mir/uns leider nicht. Mal schauen, vielleicht hat meine Frau auf ihrem älteren iPhone noch iOS 15.x drauf.

Ich habe mir das Stylsheet naturlich angesehen, um zu verstehen, wie du die, wie ich finde, schöne Spielerei mit dem 'runden' Bild hinbekommen hast (OK, kann man bei W3CSchools oder Selfhtml nachlesen). Abgeblendete Bilder sind bei mir schon lange eine Spielerei, wenn man mit der Mouse über einen Bildlink geht. Meine etwas heruntergezogene Subsitemenu-Leiste ist auch durchscheinend, damit man das Header-Bild noch sieht. Ach ja, meine <hr>-Tags haben mit 'background-image: linear-gradient()' einen Verlauf von durcheinend nach fast volle Deckung nach durscheinend mit Übergang.

Bei den Farbgebungen meiner Seiten habe ich schon lange 'rgba()' benutzt, aber ich wusste nicht, das eine Farbangabe in Hex und 2 angehängten Parametern auch funktiniert. Bei Rotation habe ich bisher immer mit 'transform:rotate()' gearbeitet und kannte 'rotate:' bis jetzt nicht. Danke für die Nachhilfe

Ich finde, dass du im Template die 'SIDEBAR NAV' mit 'flex:' ausdehnen könntest (Wird dann aber wahscheinlich schwierig mit responsive, oder?) und wie ich finde auch bei 2 - 3 unten befindlichen Newsboxen (Hatte mein harmonisches Auge irgendwie schon immer gestört, dass sie nie gleich lang sind und deshalb in ein Test-Template eingebaut). Ansonsten eine für mich gelungene Spielerei mit Transparenz, 'z-index', Bild- und Formenfixierung. Ich fand ja schon dein 'Single-Site'-Template für Kreative gelungen.

[Update 17:05 h] Du hattest während ich antworten wollte etwas ergänzt OK, da wir modern ausgestattet sind, konnen wir es auf unseren Geräten (iPad, iPhone je OS 18.2) testen. Der HTML-Code bei 1.2 und 2.2 ist nicht valide. Ein </b>-Tag ist zuviel darin.

Gruß
Gonzo

[Gert]

OK, da wir modern ausgestattet sind, konnen wir es auf unseren Geräten (iPad, iPhone je OS 18.2) testen.

Mit welchem Ergebnis? Funktionieren alle Schreibweisen?

Der HTML-Code bei 1.2 und 2.2 ist nicht valide. Ein </b>-Tag ist zuviel darin.

Huch - jetzt nicht mehr - danke.

Ansonsten: Vielen Dank für Deine Beiträge - Gert

[Gonzo Gates]

Hallo Gert,

noch keine Testergebnisse, aber ich habe mal mit deiner 'transparenz.html' herumgespielt. Ich wollte wissen, wie wichtig sind die Freizeichen beim '/' bei rgba und rgb, wie wichtig sind die Freizeichen bei %-Angabe bei rgba und rgb und wie wirkt sich die Änderung der/des letzten Parameters bei Hex-Angabe aus.

Code: Select all

<h1>Test Transparenz rgb/rgba/#hex</h1>
<div style="max-width: 650px; font-family: 'courier new', monospace; font-weight: 700;">

<div class="box01" style="background: rgb(255,50,50); color: #fff; clear: both;"><b>0:</b> rgb(255,50,50)</div>
<div style="clear: both;">&nbsp;</div>

<div class="box01" style="background: rgba(255,50,50,0.4); color: #fff; clear: both;"><b>1.1:</b> rgba(255,50,50,0.4)</div>
<div class="box01" style="background: rgb(255,50,50,0.4); color: #fff;"><b>1.2:</b> rgb(255,50,50,0.4)</div>
<div style="clear: both;">&nbsp;</div>

<div class="box01" style="background: rgba(255 50 50 / 0.4); color: #fff; clear: both;"><b>2.1:</b> rgba(255 50 50 / 0.4)</div>
<div class="box01" style="background: rgb(255 50 50 / 0.4); color: #fff;"><b>2.2:</b> rgb(255 50 50 / 0.4)</div>
<div style="clear: both;">&nbsp;</div>

<div class="box01" style="background: rgba(255 50 50/0.4); color: #fff; clear: both;"><b>2.1.1:</b> rgba(255 50 50/0.4)</div>
<div class="box01" style="background: rgb(255 50 50/0.4); color: #fff;"><b>2.2.1:</b> rgb(255 50 50/0.4)</div>
<div style="clear: both;">&nbsp;</div>

<div class="box01" style="background: rgba(100% 20% 20% / 40%); color: #fff; clear: both;"><b>3.1:</b> rgba(100% 20% 20% / 40%)</div>
<div class="box01" style="background: rgb(100% 20% 20% / 40%); color: #fff;"><b>3.2:</b> rgb(100% 20% 20% / 40%)</div>
<div style="clear: both;">&nbsp;</div>

<div class="box01" style="background: rgba(100%20%20%/40%); color: #fff; clear: both;"><b>3.1.1:</b> rgba(100%20%20%/40%)</div>
<div class="box01" style="background: rgb(100%20%20%/40%); color: #fff;"><b>3.2.1:</b> rgb(100%20%20%/40%)</div>
<div style="clear: both;">&nbsp;</div>

<div class="box01" style="background: #ff333366; color: #fff;"><b>4.1:</b> #ff333366</div>
<div class="box01" style="background: #ff333333; color: #fff;"><b>4.2:</b> #ff333333</div>
<div class="box01" style="background: #ff333399; color: #fff;"><b>4.3:</b> #ff333399</div>

Ergebnis: '/' und '%' werden bei CSS als Trenner angesehen/intrpretiert und es funzt auch ohne Freizeischen. Bei der Hex-Angabe hat ein niedrigerer Parameter eine höhere Transparenz. Wenn man es nicht versucht, dann weiß man es nicht. So wie meine Frau jetzt seit Teenager-Jahren weiß, dass man auf einer Eisfläche mit dem Fahrrad keine Vollbremsung macht. Das geht in die Hose Aber: rutschste quer, dann siehste mehr...

Nachrichten zum Test später...

Gruß
Gonzo

[Gert]

Bei der Hex-Angabe hat ein niedrigerer Parameter eine höhere Transparenz.

Ja - eigentlich ist es nicht die Transparenz, sondern die Deckkraft, wie bei opacity, was ja auf Deutsch auch Deckkraft heisst.

Ich habe mir das Stylsheet naturlich angesehen, um zu verstehen, wie du die, wie ich finde, schöne Spielerei mit dem 'runden' Bild hinbekommen hast

Du hast mich ja mal damit aufgezogen, dass ich runde Ecken nur in "homöopathischen Dosen" einsetze. Mit dem runden Bild wollte ich Dir mal das Gegenteil beweisen

Das ist also ein quadratisches Hintergrundbild in einem div mit gigantischen runden Ecken

Gert

[Gert]

... ich wusste nicht, das eine Farbangabe in Hex und 2 angehängten Parametern auch funktiniert.

Bei mir funktioniert sogar die kurze Schreibweise #f336; (4.2):

https://www.ge-webdesign.de/transparenz.htm

Da staunt der Laie und der Fachmann wundert sich

Gert

[Gonzo Gates]

Hallo Gert,

hätte ich nie daran gedacht oder mich herangetraut Hex in kurz dafür zu verwenden. Chapeau! Ich bin nicht der Laie und wundere mich Vielleicht bin ich Laienschauspieler im Leben, aber das ist was anderes.

Transparenz wird im politischen Gerede auch sehr gerne genommen, aber ich habe es hier genommen, um in deinem (neudeutsch) 'wording' zu bleiben. Da fällt mir ein, dass so einige Zahnpasta oder anderes Zeug klinisch getestet wurden, aber man erfährt nie, wie der Test denn ausfiel. Bei deinen klinischen Tests erfährt man es.

iPad (OS 18.3) und iPhone (OS 15.8 + 18.3) Testergebnisse für:

Deine Testdatei: https://www.ge-webdesign.de/transparenz.htm

Meine Testdatei: http://dorilaraukft.bplaced.net/sites/T ... arenz.html (Wenn man 'border()' beim Farbcode Transparenz verleiht, dann sieht das irgendwie komisch aus)

Auf allen Geräten sieht es so aus, wie es sein soll (Referenz FF 136.0.2 und Edge auf Win11 24H2 [ohne Update-Krankheit]), bis auf, dass Safari in rgb/rgba() bei 2.1, 2.2, 2.1.1 und 2.2.1 die Angaben zwischen den Klammern blau darstellt. Deine gekürzte Hex-Farbangabe und meine gekürzten rgb/rgba-Farbangaben werden koorrekt dargestellt.

Unterm Strich: Wir haben dazugelernt.

Jetzt könntest du noch mit hsl() herumspielen

Noch etwas: Was richtig beknackt ist, wenn man mit 'border-radius:' und 'box-shadow:' arbeitet. Hatte eine Stunde, naja, vielleicht etwas mehr, gedauert, bis ich mit dem Schatten bei meinem Tooltip (http://dorilaraukft.bplaced.net/sites/C ... 1_Rezepte/ das Fragezeichen!) zufrieden war.

Gruß und schö WE
Gonzo

[Gert]

Hallo Gonzo,

vielen Dank fürs testen. Mein iPad habe ich jetzt identifiziert: iPad 3 mit iOS 9.3.5 - soll man auf sowas eigentlich noch Rücksicht nehmen?

Auf jeden Fall sehe ich das jetzt so:

• von vorgestern: Transparenz mittels tranparenter .png Kacheln
• konservativ: Deckkraft mittels rgba(0,0,0,0.4); und Drehung mittels transform:rotate(30deg);
• modern: #0006; und rotate:30deg;

Ich bleibe wohl bei konservativ.

Wobei ich mich bei Farbdefinitionen in den Zeiten der websicheren Farben auf dreistelligen hexCode eingeschossen habe. Das war so schön einfach, nur 0, 3, 6, 9, c und f verwenden und die Farben waren websicher. Und dann bin ich dabei geblieben, aber später dann unter Verwendung von 0-9 und a-f.

Bei den Farbcodes werde ich dabei bleiben, aber bei Transparenz zu 0-255 kommasepariert + 0-1 für die Deckkraft wechseln, dann muss ich in Zukunft weniger testen

Einen schönen Sonntag - Gert

[Gonzo Gates]

Hallo Gert,

ich habe gerne getestet und es ging mir auch darum mit deiner Test-Datei herumzuspielen.

Mein iPad habe ich jetzt identifiziert: iPad 3 mit iOS 9.3.5 - soll man auf sowas eigentlich noch Rücksicht nehmen?

Ich denke nicht, dass du darauf Rücksicht nehmen solltest. Meine Frau hat sich jetzt ein 'refurbed' iPad für 'kleines Geld' gekauft und ist damit glücklich. Wenn du auf altes Zeug Rücksicht nehmen würdest, dann wärest du wieder in der Zeit, in der man in den Stylesheets Browserweichen für IE, Opera und Netscape (Phoenix) einbauen musste, wie im berühmten Tantek-Hack. Wenn man bedenkt, mit welchen Engines (Gekko, Chromium, Webkit) die heutigen Browse laufen, und das schon länger, solltest du dir da keine Ggedanken machen. Benachteiligt sind dann eher die, die ein CMSimple 3.x benutzen. Aber das ist obsolet.

Zur Aussage 'konservativ' bin ich ganz bei dir, wobei man auch rgba(0,0,0,.4) schreiben kann und zu den Webfarben: Das interessiert heutzutage keinen mehr. Kleine Korrektur...

Wobei ich mich bei Farbdefinitionen in den Zeiten der websicheren Farben auf dreistelligen hexCode eingeschossen habe. Das war so schön einfach, nur 0, 3, 6, 9, c und f verwenden und die Farben waren websicher. Und dann bin ich dabei geblieben, aber später dann unter Verwendung von 1-9 und a-f.

...es muss '0-9' heißen, sonst kommt man nicht auf Hex-Code

Kleiner Kalauer: Ein ehemaliger Kollege hat sich die MAC-Adressen der Netzwerkkarten immer mit einem '/' durch die Null aufgeschrieben, damit er die Null nicht mit einem 'Oh' verwechselt

Letztendlich: Bleib modern, denn du hast, wie du geschrieben hast, das wahrscheinlich modernste CMS der Welt.

Gruß und sonnigen Sonntag
Gonzo