Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Archive for the ‘CSS-Diagramme’ Category

Pure CSS Animated Progress Bar – Animierter Fortschrittsbalken

Posted by sura1 - 19. Dezember 2008

dez19
Bookmark and Share

Pure CSS Animated Progress Bar

purecssprogressbar1

Ich möchte Ihnen in diesem Beispiel mit einer einfachen Demonstration zeigen, wie Sie einen animierten Fortschrittsbalken (animated progress bar) mit CSS herstellen können.
Der Trick ist sehr einfach. Sie benötigen dazu 3 Elemente (1 Container und 2 ineinander verschachtelte Elemente). Meine Beispieldatei (Zipfile) hat eine Größe von 40 KB.

demo download

trennlinie_mit_schatten

Das Konzept

Punkt 1:

Zuerst legen wir eine Hintergrund-Grafik (bg_bar.gif) in den Container und definieren eine fixe Höhe und eine fixe Breite.
bg_bar

trennlinie_mit_schatten

Punkt 2:

Das HTML-Element <span> (First Child) fungiert als animierter Fortschrittsbalken (bar.gif).
bar

trennlinie_mit_schatten

Punkt 3:

Das HTML-Element <em> (Second Child) mit der Grafik bg_cover.gif wird danach mit der CSS-Eigenschaft position: absolute genau über der Progress Bar platziert.

Erst durch den CSS-Befehl repeat-x entsteht der Effekt des Fortschrittsbalken, welcher bei einem bestimmten Prozentsatz stehen bleibt.
bg_cover

trennlinie_mit_schatten

Punkt 4:

Fertige Progress Bar (Grafik mit Erläuterungen)

grafik_zusammenstellung

trennlinie_mit_schatten

Punkt 5:

In meinem Beispiel sehen Sie den Effekt des Fortschrittsbalkens in 2 verschiedenen Variationen:

1. Progress Bar in einer Definitionsliste (dd):

   <dd>
      <span><em style="left:180px">90%</em></span>
   </dd>

2. Single Progress Bar innerhalb des Block-Elementes p (paragraph):

   <p class="progressBar">
      <span><em style="left:50px">25%</em></span>
   </p>

trennlinie_mit_schatten

Punkt 6:

Warum funktioniert dies nun also? Natürlich nur, weil hier eine animierte Grafik (bar.gif) zur Anwendung kommt. SPAN besitzt eine 200px breite Hintergrund-Grafik, welche sozusagen von „Null“ bis 200px verläuft (animiert).
Es ist völlig egal, welchen Prozentsatz Sie auch einstellen, die Grafik bleibt genau bei Ihrer eingestellten Zahl stehen.

pure-css-progress-bar2

trennlinie_mit_schatten

Punkt 7:

EM-Element: Einstellung der Breite

In meinem Beispiel verwende ich eine 200px breite Progress Bar. Das EM-Element hat also auch eine Breite von 200px. Jedes Prozent ist hier dementsprechend 2px breit. 50% bedeutet also 100px, 35% wäre 70px, 90% sind demnach 180px und so weiter.

trennlinie_mit_schatten

Zum Original-Artikel:

http://cssglobe.com/post/1468/pure-css-animated-progress-bar

Mein Artikel ist eine autorisierte Bearbeitung bzw. Übersetzung des Artikels von Alen Grakalic von CSS Globe | Web Standard Magazine. Das Original hat den Titel Pure CSS Animated Progress Bar und wurde vom Webdesigner am 27. März 2008 veröffentlicht.

Nähere Informationen zum Autor:

About CSS Globe
Pixelpusher

Alen Grakalic lives in Rijeka, Croatia. He is a freelance web designer and web developer. He is 33 years old and married (wife Natasa and 3 years old son Erik).

Ähnliche Artikel:

Super simple css bars – einfache Diagramme mit CSS erstellen
CSS-Tricks: Walking Links – Spazierende Links
CSS-Experimente: Flashartige Links mit CSS erstellen
CSS-Tricks: Die nach-allen-Seiten-ausdehnbare Box
CSS-Tricks: Kennzeichnung von besuchten Links

Posted in CSS-Diagramme | Verschlagwortet mit: , , , , , , , , , , | Leave a Comment »

Super simple CSS bars – Diagramme mit CSS erstellen

Posted by sura1 - 15. November 2008

15nov
Bookmark and Share

Super simple CSS bars – einfache Diagramme mit CSS erstellen

super-simple-css-bars_1226780360754

Manchmal benötigt man verschiedenartige Diagramme für die Darstellung bestimmter Statistiken. Meistens macht man dazu mit irgendeinem Programm ein Bild, das man dann im Web veröffentlicht. Ändern sich diese Daten, muss man aber natürlich wieder zuerst das Bild neu abspeichern und neu veröffentlichen – ein Vorgang der oft sehr mühsam sein kann. Um auf das Bild verzichten zu können, gibt es diverse CSS Techniken mit denen man auch relativ einfach wunderbare Diagramme erstellen kann, die dann einfacher zu warten sind.

Ich möchte Ihnen hier an Hand eines Beispiele zeigen, wie Sie mit dem Einsatz von ein wenig CSS sehr rasch relativ einfache, aber durchaus schöne CSS-Diagramme erstellen kann.

Mein fertiges Beispiel sieht wie folgt aus:

super-simple-css-bars_1226781017573
demo_ausfuhren

Erklärung des Beispieles:

Html-Beispiel für ein Diagramm-Feld (200px 40% orange):

<fieldset>
  <legend>200px 40% orange</legend>
  <div class="progress-container" style="width: 200px">
    <div style="width: 40%; background: orange;"></div> = leere Box
  </div>
  <br/>
</fieldset>

Im Quellcode wird das HTML-Element fieldset, welches eigentlich in Formularen eingesetzt wird, zu Hilfe genommen. In diesem wird durch das HTML-Element legend die Diagramm-Überschrift festgelegt. Danach erfolgt die Festlegung von 2 div-Boxen.

Die div-Box div.progress-container wird mit Hilfe von CSS formatiert, bekommt jedoch auch einen Inline-Style, mit welchem die Gesamt-Breite/Länge des Diagrammes festgelegt werden soll.

In diese div-Box (div.progress-container) wird nun eine leere div-Box eingefügt. In dieser legen Sie mit einem Inline-Stylesheet den Prozentsatz des Diagrammes fest, welches Sie farbig darstellen möchten. Mit der Festlegung der Hintergrundfarbe können Sie hier die Farbe des Diagrammes (%-Anteil) festlegen.

Cascading Style Sheets:

div.progress-container {
  border: 1px solid #ccc;
  margin: 2px 5px 2px 0;
  padding: 1px;
  float: left;
  background: white;
}

div.progress-container > div {
  background-color: #ACE97C;
  height: 12px
}

Im CSS legen Sie mit der CSS-Klasse div.progress-container die äußere Form des Diagrammes fest.

Mit der CSS-Regel div.progress-container > div definieren Sie danach die leere div-Box. Mit der Festlegung der Hintergrundfarbe geben Sie dem Diagramm (%) erst das gewünschte Aussehen. Sie können die Hintergrundfarbe aber auch als Inline-Style bereits im HTML-Element definieren (siehe Erklärung zu HTML-Quellcode!)

Fertiges Beispiel hier ansehen:

demo_ausfuhren
Beispiel erstellt auf Basis eines Artikels von blog.leetsoft.com.

Posted in CSS-Diagramme | Verschlagwortet mit: , , , , | Leave a Comment »