• Informationen zu diesem Feature

      Schon bemerkt?

      In diesem Kurs haben viele Elemente, die wir als klare Rechtecke kennen, abgerundete Ecken. Verantwortlich dafür ist CSS-Code. Mit den frei wählbaren Krümmungsradien können verschiedene Effekte und Formen erzeugt werden.

      Textfelder, Schalflächen, Hintergründe, Bilder, Rahmen, ... Der Screenshot zeigt auf, wo dieser CSS-Code überall eingesetzt wurde.

    • Grundsätzlich können alle Elemente einer Webseite durch css-Code verändert werden.


      Screenshot


    • Welche Grundlagen brauche ich?

      HTML-Seiten sind ähnlich wie Collagen aufgebaut. Dabei liegen mehrere Folien über- oder nebeneinander. Diese Folien haben einen Namen und können mit Cascading Style Sheets = CSS angepasst werden.

      Der entsprechende CSS-Befehl für abgerundete Ecken heißt border-radius. Die Einstellungen können auf
      https://www.w3schools.com/cssref/css3_pr_border-radius.php
      nachgelesen werden. Die Krümmung kann in Pixel (px) oder in Prozent (%) angegeben werden und sogar Animationen sind möglich.

      Der für dieses graue Textfeld eingesetzte Code sieht so aus:


          <div style="border-radius: 10px; background-color: #003c8120; padding: 20px; margin: 30px 0 10px ">


      Dabei bedeuten:
      border-radius: 10px - dass die Ecken des Textfeldes mit einem Kreisbogen von 10 Pixel Radius gekrümmt werden

      background-color: #003c8120 bildet die Hintergrundfarbe in Hexadezimal (#) Schreibweise;:
      00 - Transparenz
      3c - roter Anteil
      81 - so viel grün
      20 - blauer Anteil;

      padding: 20px - ist der Innenabstand mit 20 Pixel, den der Text zu seinem Rahmen hält

      margin: 30px 0 10px - ist der Abstand, den der Rahmen nach außen hält;
      30px nach oben
      0 - Pixel nach rechts
      10px nach unten
      nicht angegeben und daher 0 Pixel nach links 

    • Das Geheimnis der Tipp-Boxen (ohne Grafiksymbol) Textseite
      Teilnehmer/innen müssen
      Anzeigen
    • Die Tipp-Box-Idee stammt von Christian Mayr; er setzt auch Grafiksymbole ein; hier geht es zu seiner Webseite Link/URL
      Teilnehmer/innen müssen
      Anzeigen

    • Manche TSNmoodle-Themes erlauben die direkte Eingabe von CSS-Code. So wird hier beim Ein-Themen-Format der Abschnitt "Runde Ecken" bearbeitet:



      Im unteren Bereich werden Einstellungen für die Schrift- und Hintergrundfarbe und für die Form der Schaltfläche angeboten. Die angegebenen Werte führen dann zum gezeigten Ergebnis:




    • ↑