Für Neugierige: HTML-Seite mit CSS (-Animationen), Inline-SVG, JS, responsives Design

Bergwichtel · February 16, 2025 at 4:04 PM

So, jetzt bin ich erstmal wieder gesättigt. Der Sonnenstand hat mich angefixt und da habe ich ein paar Stunden mit Freude einen heißen Kopf erbrütet.

An diesem Post habe ich eine ~~tar.gz~~ zip-Datei mit 5 Dateien (1x .html, 2x .css, 1x .js und zusätzlich zum Inline-SVG noch eine Logo-SVG beigefügt.

Die HTML5-Seite entscheidet nach den Browsereinstellungen, ob sie sich im hellen Modus oder sich Dunkel präsentiert. Kurz nach dem Aufruf beginnt eine gemütlich vor sich hinarbeitende CSS-Animation und für die Sonne in dem Inline-SVG gibt es eine Steuermöglichkeit. D.h., man kann die über den Slidern im Bild verschieben.

Die Seite paßt sich mehr oder weniger verschiedenen Screens an, also auf dem Handy wie auch auf einem HD-Monitor betrachtbar. Der Mangel an Inhalt läßt natürlich ein paar Löcher bei größeren Auflösungen. Die Media-Queries sind verbesserungswürdig. Aber die Testes kosten aber auch Zeit.
Desweiteren habe ich beim CSS auf CSS-Variablen gesetzt und das noch nicht allzulang eingeführte Nesting verwendet.
Und das JavaScript - wir werden keine Freunde mehr. Das war wieder eine Qual Grundlagen zu lernen,

Ja gut, genug gequasselt. Schlußendlich gibt es noch zwei in einem -- Screenshot zur Voransicht.
Ich setze dieses spaßeshalber erstellte Machwerkwerk hier rein, weil ich glaube, das der ein oder andere sich einen brauchbaren Anreiz holen kann.

OMG, Eine tar.gz darf ich nicht hochladen, aber ein zip. Und das ...

Bot · Vor 5 Minuten

Für Neugierige: HTML-Seite mit CSS (-Animationen), Inline-SVG, JS, responsives Design? Schau mal ob du hier fündig wirst!

fred0815 · February 16, 2025 at 4:51 PM

Freut mich, dass ich andere mit meinem Fieber anstecken konnte.

simonz · February 16, 2025 at 6:03 PM

Quote from Bergwichtel

Der Sonnenstand hat mich angefixt und da habe ich ein paar Stunden mit Freude einen heißen Kopf erbrütet.

So ging es mir ja auch. Halt mit Python-PIL im anderen Thread.

Faszinierend, was Du da oben mit HTML&Co hingezaubert hast!

Bot · Vor einem Moment

Bergwichtel · February 17, 2025 at 3:43 PM

fred0815 Die Freude liegt auch bei mir. War mal etwas, wo man seiner Fantasie Zucker geben konnte. Danke dafür.

simonz Man nimmt halt die Mittel, die man halbwegs beherrscht und setzt die Idee/Fragestellung damit um. fred0815 kann sich freuen, viele verschiedene Lösungswege und -Konzepte erhalten zu haben. Er kann sich damit raussuchen, was ihm am meisten behagt.

Das es bei mir SVG mittels HTML geworden ist, liegt daran, das ich seit erscheinen von HTML 3.2 Webseiten schreibe und mit HTML5 und CSS3 einem ein inzwischen doch mächtiges Hypertextwerkzeug zur Verfügung steht. Und die Ausgabe von dem gewünschten sollte ja HTML sein. SVG habe ich schätzen gelernt durch den ESP32. Daten grafisch über den installierten Webserver auf einer Webseite auszuliefern. SVGs von Inkscape sind dafür nicht wirklich geeignet. Da ist zuviel Müll dabei. Ergo lernte ich, SVG mit der Hand zu schreiben. Als alter CNCer ist das keine wirkliche Herausforderung, die liegen eher in den Feinheiten.

Es freut mich, das ich mit der HTML-Seite Euch beeindrucken konnte.
Und wer ein bischen mehr über die verwendete 'Technik' lernen will, kann sich die Seite hernehmen und schauen, wie ich was gemacht habe.

pgloor · February 20, 2025 at 2:03 PM

Quote from Bergwichtel

Desweiteren habe ich beim CSS auf CSS-Variablen gesetzt und das noch nicht allzulang eingeführte Nesting verwendet.
Und das JavaScript - wir werden keine Freunde mehr. Das war wieder eine Qual Grundlagen zu lernen,

Als ich diesen Absatz gelesen habe, da hatte ich noch keine Ahnung wovon du schreibst. Nachdem ich den angehängten Code gelesen hatte, habe ich voll verstanden worum es geht und wie das funktioniert. Das kann ich echt gebrauchen.

Danke Schon wieder was gelernt

Bergwichtel · February 20, 2025 at 3:29 PM

Na, da will ich noch ein paar Tips für Neugierige nachlegen.

CSS-Nesting kann noch ein bischen mehr, als ich oben gezeigt habe. Gerade was Child-Selectoren angeht. Hier ein kleines Beispiel, wo alle Absätze in der ersten Zeile eingezogen werden, außer die, die nach einer Überschrift kommen:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>CSS-Nesting</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

  <style>
    /* alle Brwoser-Vorgaben auf Null setzen */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      line-height: 1.4rem;
      font-size: 1em;
    }
    :root {
        --color-fg: black;
        --color-bg: lightgray;
        --border-color: darkblue;
        --border-type: solid;
        --border-width: 1px;
    }
    body {margin: 1rem; }
    h1, h2, h3 {
        margin: .5rem 0 .2rem 0;
        & + p {
            text-indent: 0;
        }
    }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.2rem; }
    p { text-indent: 2rem; }
    article {
        margin-top: 1rem;
        padding: .5rem;
        color: var(--color-fg);
        border: var(--border-width) var(--border-type) var(--border-color);
        border-radius: 0.5rem;
    }

  </style>

</head>
<header>
  <h1>CSS-Nesting</h1>
</header>

<nav>
    <!-- Hier die Hauptnavigation -->
</nav>
<main>
  <article>
    <h2>Was auch noch so geht:</h2>
      <p>
        Child-Selectors:
      </p>
      <pre>
        main {
        & + article { ... }
        & > p { ... }
        & ~ main { ... }
        }
      </pre>
      <h3>Doku-Link</h3>
      <p>siehe: <a href="https://drafts.csswg.org/css-nesting-1/">https://drafts.csswg.org/css-nesting-1/</a><br>
      Es geht auch ohne dem &amp;, aber da kann es sein, daß das ein paar Browser nicht verstehen.
      </p>
      <p>
        In diesem Beispiel werden alle Absätze um den angegebenen Betrag eingezogen, nur die Absätze, die nach einer Überschrift folgen werden es nicht. So ist das glaube ich in Büchern gewünscht.<br>
        Das hätte ich schon vor ein paar Wochen wissen müßen, das hätte mir etwas Arbeit erspart.
      </p>

  </article>
  <article>
    <h2>Überschrift 1</h2>
    <p>
        Text im<br>
        1. Absatz<br>
        wird nicht eingerückt.
    </p>
    <p>
      Text in<br>
      den Folgeabsätzen<br>
      werden eingerückt.
    </p>
    <p>
      Text in<br>
      den Folgeabsätzen<br>
      werden eingerückt.
    </p>
    <h3>Unterüberschrift</h3>
    <p>
        Text im<br>
        1. Absatz<br>
        wird nicht eingerückt.
    </p>
    <p>
      Text in<br>
      den Folgeabsätzen<br>
      werden eingerückt.
    </p>
    <p>
      Text in<br>
      den Folgeabsätzen<br>
      werden eingerückt.
    </p>
  </article>
  <article>
    <h2>Überschrift 2</h2>
    <p>
        Text im<br>
        1. Absatz<br>
        wird nicht eingerückt.
    </p>
    <p>
      Text in<br>
      den Folgeabsätzen<br>
      werden eingerückt.
    </p>
    <p>
      Text in<br>
      den Folgeabsätzen<br>
      werden eingerückt.
    </p>
  </article>

</main>
<footer>

</footer>
</body>
</html>

Display More

Mehr dazu kann man in CSS Nesting Module nachlesen.
Zu den Kind-Selektoren Using CSS nesting mit Demos.

Dann möchte ich noch darauf hinweisen, das man in CSS auch rechnen kann. Finde ich persönlich richtig cool. calc()

Und eine Seite sollte man noch kennen, wo man erfährt welcher Browser was kann und ob man etwas einsetzen möchte oder lieber doch nicht: (hier gleich mal zu calc()) Can I Use?

Bot · Vor einem Moment

Für Neugierige: HTML-Seite mit CSS (-Animationen), Inline-SVG, JS, responsives Design

Participate now!

Users Viewing This Thread