Das Logo: aus dem Fleck wird wieder ein Hund
Filipe: "kannst du bitte das logo wenn man es installiert auf pc oder handy und oben rechts in der leiste noch perfektionnieren." Beide Stellen hatten denselben Fehler, und er war derselbe wie an mehreren Stellen davor: Der Husky lag als MASKE auf einer Farbflaeche. Von einer Maske zaehlt nur der Alphakanal, und die Vorlage ist rundum freigestellt -- uebrig blieb eine geschlossene Flaeche in Hundeform. Kein Auge, keine Schnauze, kein Ohrinneres. Ein Fleck. Jetzt liegt an beiden Stellen dieselbe Zeichnung im Mischmodus "screen" ueber einer stahlblauen Silhouette: Schwarz laesst das Fell dunkel, Weiss hebt Gesicht, Ohren und Auge heraus. Gleiche Farben, gleicher Daempfer (.88) -- ein Zeichen, zwei Orte. App-Symbol ausserdem: - Die Chili lief mit ihrem Stiel quer ueber den Fang. Sie ist jetzt gespiegelt, kleiner und liegt hinter dem Hals. - Der Hals endete in einer geraden Kante (die Vorlage ist unten angeschnitten). Eine zweite Maske blendet ihn aus, statt ihn abzuschneiden. - Der Grund war matschig: Rot und Blau trafen sich diagonal genau dort, wo der Kopf steht. Jetzt kaltes Licht oben, warmes unten. - Unter 64 px faellt die Gesichtszeichnung weg, die Chili aber NICHT -- klein erkennt man ein Zeichen zuerst an der Farbe. - Alle Masse haengen an einer Zahl (Groesse der Gruppe), nicht an sechs. Kopfleiste ausserdem: - Die Chili links hatte einen BLAUEN Schein -- aus der Zeit, als dort der Husky stand. Der Schein ist nie mitgewandert. Jetzt warm. - `filter` ersetzt, es ergaenzt nicht: Beim Ueberfahren wurde der Schein geloescht und das Zeichen dabei flacher statt heller. Behoben. Damit die Aenderung auch ankommt: - Der Stempel gilt jetzt auch fuer die App-Symbole und fuer das Manifest. Bilder werden einen Tag zwischengespeichert, das Symbol der INSTALLIERTEN App gar nicht neu geholt -- ohne Stempel haette niemand das neue Zeichen gesehen. - pruef-zwischenspeicher prueft das (18 -> 21 Pruefungen). Werkzeuge: - tools/ausschnitt.mjs (neu): schneidet aus einem Bildschirmfoto ein Stueck heraus und vergroessert die PNG-Datei. Noetig, weil eine Vergroesserung per CSS-transform den Browser NEU rechnen laesst -- ich habe damit 264 px beurteilt und geglaubt, es seien 22, und daraus den falschen Schluss gezogen, ein Gesicht trage bei 22 px nicht. - tools/ansicht.mjs: AUSSCHNITT=<selektor> nimmt nur ein Element auf. - workspace-symbol.mjs: SYMBOL_ZIEL lenkt die Ausgabe um (Entwuerfe ansehen, ohne die sechs echten Dateien zu ueberschreiben), und zwei Gegenproben pruefen jetzt, dass Gesicht und Chili wirklich zu sehen sind -- die alte Pruefung sagte nur "es steht etwas drauf" und haette den Fleck anstandslos durchgewunken. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -1842,7 +1842,12 @@ body.start > main { position: relative; z-index: 1; }
|
||||
Klasse tragen ALLE 18 Seiten, sie kennzeichnet nicht die Startseite,
|
||||
sondern den Grundstil. Gesehen im Bildschirmfoto der Unterseite --
|
||||
der Selektor las sich völlig plausibel. */
|
||||
.kopfleiste:hover .marke::before { filter: brightness(1.2); }
|
||||
/* Auch hier gilt: `filter` ergänzt nichts, es ersetzt. Ohne den Schein
|
||||
in dieser Zeile verliert die Chili ihn beim Überfahren – und wird
|
||||
dabei ausgerechnet flacher, obwohl sie heller werden soll. */
|
||||
.kopfleiste:hover .marke::before {
|
||||
filter: saturate(1.12) brightness(1.18) drop-shadow(0 0 8px rgba(255, 92, 68, .62));
|
||||
}
|
||||
|
||||
/* KEIN Farbverlauf IM Text.
|
||||
|
||||
@@ -1966,9 +1971,17 @@ body.start > main { position: relative; z-index: 1; }
|
||||
/* Das Zeichen davor bekommt einen eigenen Träger: runder Rahmen, ein
|
||||
Hauch Fläche, weicher Schein. Aus einer aufgeklebten Form wird damit
|
||||
ein Wappen. */
|
||||
/* DER SCHEIN IST MIT DEM ZEICHEN MITGEWANDERT (09.09.2026).
|
||||
|
||||
Hier stand ein BLAUER Schein – aus der Zeit, als vor dem Schriftzug
|
||||
noch der Husky stand. Seit dem 08.09. steht dort die Chili, der Schein
|
||||
ist blau geblieben. Ein blauer Hof um ein rotes Zeichen nimmt ihm
|
||||
genau die Farbe, wegen der es dort steht; neunfach vergrößert sah die
|
||||
Chili darum stumpf und schmutzig aus. Jetzt ist er warm – dieselbe
|
||||
Farbe, die die Chili selbst hat. */
|
||||
.kopfleiste .marke::before {
|
||||
padding: 0;
|
||||
filter: drop-shadow(0 0 7px rgba(63, 189, 245, .45));
|
||||
filter: saturate(1.06) brightness(1.06) drop-shadow(0 0 6px rgba(255, 92, 68, .5));
|
||||
}
|
||||
.kopfleiste .marke {
|
||||
/* Nur so breit wie ihr Inhalt -- sonst waere die Pille eine Leiste.
|
||||
@@ -6000,21 +6013,76 @@ body[data-fremde-sicht="ja"]::after {
|
||||
Grundstil, nicht die Startseite. Der Selektor las sich richtig und
|
||||
war es nicht; gesehen erst im Bildschirmfoto der Unterseite.
|
||||
|
||||
Als MASKE und nicht als Bild: Der Husky ist schwarzweiss gezeichnet
|
||||
und waere auf dunklem Grund ein dunkler Fleck. Von einer Maske zaehlt
|
||||
nur die Silhouette, und die wird hier mit Silber und Babyblau
|
||||
gefuellt -- seine beiden Farben aus dem Rollenschema. Die Augenfarbe
|
||||
klingt im Verlauf an, ohne dass man bei 22 px Augen zeichnen muesste.
|
||||
=================================================================== */
|
||||
|
||||
/* ===================================================================
|
||||
AUS DEM FLECK WIRD WIEDER EIN HUND (09.09.2026)
|
||||
|
||||
Filipe: "kannst du bitte das logo wenn man es installiert auf pc oder
|
||||
handy und oben rechts in der leiste noch perfektionnieren. ich finde
|
||||
es könnte noch besser aussehen bitte."
|
||||
|
||||
ER HATTE RECHT, UND DER GRUND WAR EINE MASKE. Hier lag der Husky als
|
||||
Maske auf einer Silberfläche. Von einer Maske zählt nur der
|
||||
Alphakanal, und die Vorlage ist rundum freigestellt: Übrig blieb eine
|
||||
GESCHLOSSENE FLÄCHE in Hundeform – kein Auge, keine Schnauze, kein
|
||||
Ohrinneres. Dazu lief der Verlauf unten in volles Babyblau, und weil
|
||||
die Vorlage am Hals gerade abgeschnitten ist, entstand daraus ein
|
||||
blauer BALKEN. Zusammen: ein Fleck.
|
||||
|
||||
JETZT ZWEI LAGEN IN EINEM ELEMENT. Unten ein stahlblauer Verlauf,
|
||||
darüber dieselbe Zeichnung im Mischmodus "screen". Screen lässt
|
||||
Schwarz stehen (das Fell bleibt dunkelblau) und hebt Weiß heraus
|
||||
(Gesicht, Ohrinneres, Auge). Beides sind HINTERGRUND-Lagen desselben
|
||||
Elements – ein Pseudo-Element kann kein Kind haben, `background-blend-mode`
|
||||
dagegen schon. Die Maske klebt weiterhin die Silhouette aus.
|
||||
|
||||
DAS IST DASSELBE REZEPT WIE IM APP-SYMBOL (tools/workspace-symbol.mjs,
|
||||
gleiche Farben, gleicher Dämpfer .88). Genau darum ging es Filipe: das
|
||||
installierte Symbol UND das Zeichen in der Leiste, ein Zeichen.
|
||||
|
||||
WIE ICH MICH DABEI FAST SELBST BETROGEN HÄTTE, zum Merken:
|
||||
Ich hatte die Entwürfe zuerst mit `transform: scale(12)` vergrößert
|
||||
angesehen und daraus geschlossen, eine Zweiton-Zeichnung sei bei 22 px
|
||||
Matsch. Falsch – eine CSS-Vergrößerung lässt den Browser das Zeichen
|
||||
NEU rechnen; ich habe 264 px beurteilt und geglaubt, es seien 22.
|
||||
Richtig ist: bei echten 22 px aufnehmen, danach die PNG-Datei
|
||||
vergrößern (tools/ausschnitt.mjs). So gemessen trägt das Gesicht
|
||||
sehr wohl – man sieht Schnauze, Ohren und Auge. Eine Lupe, die
|
||||
nachrechnet, ist keine Lupe.
|
||||
|
||||
KEIN AUSLAUF NACH UNTEN, anders als im App-Symbol: Dort blendet eine
|
||||
zweite Maske den geraden Halsschnitt aus. Bei 22 px frisst derselbe
|
||||
Verlauf das Kinn weg – nachgemessen und nebeneinandergelegt. Hier
|
||||
braucht es ihn auch nicht: Das Fell ist jetzt dunkelblau statt
|
||||
silbern und läuft von selbst in die dunkle Leiste aus.
|
||||
=================================================================== */
|
||||
.kopfleiste .marke::after {
|
||||
content: "";
|
||||
flex: none; width: 22px; height: 22px;
|
||||
background: linear-gradient(160deg, #eaf1f8 8%, #b9c6d6 46%, var(--dogi-haupt) 100%);
|
||||
background-image:
|
||||
url("../img/marke-husky.webp"),
|
||||
linear-gradient(162deg, #5486b2 0%, #25507a 44%, #0e2b45 100%);
|
||||
background-size: contain, auto;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-blend-mode: screen;
|
||||
-webkit-mask: url("../img/marke-husky.webp") center / contain no-repeat;
|
||||
mask: url("../img/marke-husky.webp") center / contain no-repeat;
|
||||
/* Ohne den Dämpfer wird das Weiß der Vorlage zu reinem Weiß – auf
|
||||
dunklem Grund blendet das. Augenschonend heißt hier: hell genug zum
|
||||
Erkennen, nicht heller. Der Schein ringsum trägt das Babyblau der
|
||||
Rolle, das vorher in der Füllung saß. */
|
||||
filter: brightness(.88) drop-shadow(0 0 6px rgba(95, 189, 255, .5));
|
||||
transition: filter var(--tempo);
|
||||
}
|
||||
.kopfleiste:hover .marke::after { filter: brightness(1.2); }
|
||||
/* DER SCHEIN MUSS BEIM ÜBERFAHREN MITGENANNT WERDEN. `filter` ist keine
|
||||
Liste, die sich ergänzt – wer hier nur `brightness` schreibt, löscht
|
||||
den Schein. Vorher stand genau das da, und das Zeichen wurde beim
|
||||
Überfahren flacher statt heller. */
|
||||
.kopfleiste:hover .marke::after {
|
||||
filter: brightness(1.02) drop-shadow(0 0 8px rgba(95, 189, 255, .62));
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
DIE BEGRUESSUNG SOLL MOTIVIEREN (08.09.2026)
|
||||
|
||||
Reference in New Issue
Block a user