Weblog CSSEC

In einem früheren Beitrag habe ich bereits die Möglichkeit aufgezeigt, einen “Wait-Splash” auf einer Seite anzuzeigen während eine bestimmte Upload-Aktion durchgeführt wird.
Zur damaligen Zeit habe ich dafür ein Fenster als Bild abgelegt und dieses eingeblendet.

Für ein neues Projekte habe ich mich wieder etwas mit HTML und CSS beschäftigt und möchte einen Weg zeigen, solch ein Splash ohne Einsatz von PNG’s nur mit HTML und CSS3 zu erstellen.
Das ganze kann dann auf einem HTML5-kompatiblen Browser dargestellt werden.

Der Splash wird erst mal ein “normales” Div und bekommt die CSS-Klasse splash zugewiesen. Im Formular stelle ich einen Titel als H3-Überschrift und ein Please wait – Text dar :

Hm, sieht noch nicht allzu berühmt aus. Als nächstes definieren wir die 1 Klasse und passen auch noch die Überschrift etwas an. Der Splash bekommt eine Breite von 300px und eine Höhe von 150px zugewiesen, einen Rahmen von 2px Größe, und einen weißen Hintergrund. Außerdem werden die Texte in dem Div zentriert.
Das Standard-Top-Padding der Überschrift wird auf 0 gesetzt, so dass die Überschrift ganz oben landet. Diese Überschrift ist später unser Dialog-Titel.

<style>
      .splash {
          width: 300px;
          height: 150px;
          border: solid 2px black;
          text-align: center;
          display: block;
      }
 
     .splash h3 {
         padding-top: 0px;
         margin-top: 0px;
      }
  </style>

OK, sieht zumindest schon mal wie ein Dialog aus. Abgerundet und mit Schatten wirkt das aber eigentlich noch schöner.
Dazu nutzt man die CSS-Styles: box-shadow und border-radius.
Der box-shadow-Style wird durch 3-4 Werte definiert:

1. Parameter: Versatz x
2. Parameter : Versatz y
3. Parameter (bei 4): Unschärfe in px
3. Parameter (bei 3) : Farbe in HTML-Schreibweise
4. Parameter (bei 4): Farbe in HTML-Schreibweise

Der Border-Radius definiert, den Grad der Abrundung des Dialogs.

Nach etwas herumprobieren, setzen wir den Border-Radius auf 10px und einen box-shadow mit Versatz 3,3 einer 5px großen Unschärfe und einer dunkelgrauen Farbe:

     .splash {
          width: 300px;
          height: 150px;
          border: solid 2px black;
          text-align: center;
          display: block;
          border-radius: 10px;
          box-shadow: 3px 3px 5px #444;
      }

Wunderbar, sieht doch schon aus wie ein Dialog.
Last but not least soll der Dialog auch noch eine Titelleiste bekommen. Momentan steht da zwar Splash aber irgendwie fehlt die farbliche Markierung davon.
Um das elegant und ohne große Bastelei zu erhalten, nutzen wir die neue CSS3-Eigenschaft, den Background auch als Verlauf darzustellen.
Da das möglicherweise noch nicht alle Browser korrekt darstellen, wird das zur Sicherheit browserspezifisch implementiert.

Zur Definition eines Verlaufes nutzt man die Eigenschaft: background-image: linear-gradient.
Da dies schwer zu erklären ist, hier erst mal der Code.

      .splash {
          width: 300px;
          height: 150px;
          border: solid 2px black;
          text-align: center;
          display: block;
          border-radius: 10px;
          box-shadow: 3px 3px 5px #444;
	  background-image:-webkit-linear-gradient(#AAA 0%,#666 26px, black 27px; #FFF 28px, #FFF 100%);
	  background-image:-moz-linear-gradient(#AAA 0%,#666 26px, black 27px; #FFF 28px, #FFF 100%);
	  background-image:-o-linear-gradient(#AAA 0%,#666 26px, black 27px; #FFF 28px, #FFF 100%);
	  background-image:linear-gradient(#AAA 0%,#666 26px, black 27px, #FFF 28px, #FFF 100%);
      }

Der linear gradient ist im Endeffekt nichts anderes als eine Liste von Tupeln, mit der die entsprechenden Farb-Abschnitte definiert werden. Optional kann noch zu Beginn die Verlaufsrichtung angegeben werden, z.B. als Winkel gefolgt von deg. Standard ist ein vertikaler Verlauf. Jedes Tupel wird durch:
Farbe Position
definiert.Die Position kann dabei entweder prozentual oder absolut in px angegeben werden.

Diesen Trick machen wird uns zu Nutze und einen Verlauf in der Größe der Titelleiste zu erstellen, anschließend (bei Bedarf) eine Trennlinie zu erstellen und den eigentlichen Bereich dann in weiß darzustellen.

Für den Dialog erstellen wir eine 26px hohe Titelleiste. Ein 1px großer Trenner hebt die Titelleiste noch hervor. Der Rest des Dialogs wird dann mit weiß gefüllt.

Das schöne an der gradient-Methode ist dabei :

1. alles wird komplett in CSS gemacht und erfolgt an einer Stelle
2. Änderungen am Dialog (z.B. Vergrößerung/Verkleinerung/Border-Radius, etc.) haben keine Auswirkungen auf
die Titelleiste. Diese wird also entsprechend mit angepasst, außer natürlich die Höhe.

Durch die Füllung ist nun die Fenster-Bezeichnung schlecht zu lesen. Daher wird die Überschrift noch weiß gemacht. Außerdem wird der Please Wait – Text etwas weiter nach unten geschoben, indem margin-bottom von der Überschrift etwas erhöht wird:

  .splash h3 {
      padding-top: 0;
      margin-top: 0;
      margin-bottom: 50px;
      color: white;
   }

Et voila – der Dialog ist nun fertig und kann in ein separates Div wie bereits schon einmal beschrieben eingebunden werden.
Natürlich kann der Dialog noch etwas weiter verschönert, z.B. mit dem Loader-Image erweitert werden.

Viel Spaß beim Ausprobieren