Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Mit einer Grafik und einigen CSS-Befehlen eine Datums-Anzeige gestalten

Posted by sura1 - 9. Februar 2009

februar_09

Bookmark and Share

Wie Sie mit einer Grafik und einigen wenigen CSS-Befehlen eine Datums-Anzeige gestalten können

Auf der Webseite www.templamatic.com habe ich in der Rubrik CSS Bits – Vol 2 – Date Stamps einige interessante Beispiele gefunden, wie Sie mit ein wenig CSS schöne Datums-Stempel (Date Stamps) formatieren können.

Alle Beispiele sind frei skalierbar. Wenn Sie die Schriftgröße verändern, ändert sich dadurch auch die Größe der Datums-Stempel.

Ich habe die Beispiele ein wenig umgestaltet und bearbeitet und möchte Ihnen hier das fertige Ergebnis vorstellen:

   Fertiges Beispiel: Zip_Datei (34,3KB)
demo2 button1

Sie sehen in der Demo insgesamt 6 verschiedene Date-Stamps, welche ich nun einzeln näher erläutern möchte. Ich stelle Ihnen jeweils den HTML-Code und die CSS-Befehle vor und ergänze diese einleitend mit der entsprechenden fertigen Datums- Grafik:

Beispiel 1:

 calendar1
HTML-Quellcode:
<div class="date1">
<div class="month">JUN</div>
<div class="day">24</div>
</div>
CSS:
.date1{ width:60px;
           height:70px;
           background:url(images/date1bg.gif) no-repeat;
           color:#fff;
           font-weight:700;
}
.date1 .month{
           width:100%;
           text-align:left;
           position:relative;
           left: 13px;
           top: 10px;
}
.date1 .day{
          width:100%;
          text-align:center;
          position:relative;
          top:12px;
          font-size:28px;
}

Beispiel 2:

 calendar2
HTML-Quellcode:

<div class="date2">
<div class="month">SEP</div>
<div class="day">13</div>
</div>
CSS:
.date2{   width:60px;
	 height:70px;
	 background:url(images/date2bg.gif) no-repeat;
	 color:#363636;
	 font-weight:700;
}
.date2 .month{
             width:60px;
	      padding-left:13px;
	      position:relative;
	      top:10px;
}
.date2 .day{
        width:62px;
	 padding-left: 12px;
	 position:relative;
	 top:10px;
	 font-size:28px;
}

Beispiel 3:

 calendar3
HTML-Quellcode:
<div class="date3">
April 26th, 2008 - Posted at: 7:42pm
</div>
CSS:
.date3{
        width:280px;
	 line-height:28px;
	 padding-left:15px;
	 background:url(images/date3bg.gif) no-repeat;
	 color:#808080;
	 font-weight:700;
	 border-right:1px solid #C8C8C8;
}

Beispiel 4:

 calendar4
HTML-Quellcode:
<div class="date4">
<div>December 14th, 2008 - Posted at: 12:22pm</div>
</div>
CSS:
.date4{
        width:330px;
	 height:25px;
	 padding-left:15px;
	 background:url(images/date4bg.gif) no-repeat;
	 color:#005e20;
	 font-weight:700;
}
.date4 div{
	 line-height:25px;
	 background:url(images/date4bgcap.gif) no-repeat;
	 background-position:top right;
}

Beispiel 5:

 calendar5
HTML-Quellcode:

<div class="date5">
<div class="month">JAN</div>
<div class="day">06</div>
</div>
CSS:
.date5 {
        width:64px;
	 height:73px;
	 background:url(images/date5bg.gif) no-repeat;
	 font-weight:700;
	 padding-left:2px;
}
.date5 .month {
          width:100%;
          text-align:center;
          position:relative;
          top:14px;
          color:#fff;
}
.date5 .day {
          width:100%;
          text-align:center;
          position:relative;
          top:14px;
          font-size:28px;
          color:#e3ddc3;
}

Beispiel 6:

 calendar6
HTML-Quellcode:

<div class="date6">
<div class="month">AUGUST</div>
<div class="day">17</div>
</div>
CSS:
.date6 {
         width:114px;
	  height:67px;
	  background:url(images/date6bg.gif) no-repeat;
	  font-weight:700;
	  color:#fff;
}
.date6 .month {
          width:105px;
          text-align:center;
	   position:relative;
	   top:14px;
}
.date6 .day {
          width:105px;
          text-align:center;
	   position:relative;
	   top:13px;
	   font-size:28px;
}
   Fertiges Beispiel: Zip_Datei (34,3KB)
demo2 button1

Ähnliche Artikel:

Free Daily Calendar Icons – Kostenlose Kalender Icons für den täglichen Gebrauch
29 Free CSS Menus – 29 kostenlose CSS Menüs auf www.13styles.com
Free CSS Templates: mehr als 11.000 kostenlose Webseitenvorlagen
CSS-Liste mit grafischen Aufzählungszeichen
CSS-Listen mit Sonderzeichen
CSS-Beispiele: Blockquote (2x), Textfeld, Hinweisboxen

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: