Am Freitag war ich in einem Workshop in dem Unit-Tests für den TYPO3 Core geschrieben wurden. Dabei hat der Core-Entwickler Oliver Klee zunächst eine theoretische Einfürung in Unit-Tests gegeben und erklärt, wo die Vorteile liegen. Anschließend haben wir in kleinen Gruppen dann selbst Unit-Tests für einige Core-Funktionen geschrieben.

In einem weiteren Workshop ging es um das TSref. Hier haben wir diskutiert, wie man ein zentrales Dokument aufbauen könnte damit die verschiedenen Anwendungen dieses Dokument als Datenbasis verwenden können. Ziel war eine Lösung die Daten so bereitzustellen, dass darauf sowohl das Online-TSref, die Inline-Hilfe im T3Editor als auch alle möglichen weiteren Anwendungen möglichst leicht zugreifen können. Letztendlich kamen wir bei unseren Diskussionen zu einer XML-Struktur, die in einem zentralen Repository gepflegt wird und dann von den einzelnen Anwendungen importiert werden kann.

In einem weiteren Workshop stellte Jo Hasenau die Extension-Gruppe ICE-Pack vor. Hier wurde gezeigt, und man konnte das auch gleich selbst ausprobieren, wie sich mit dem ICE-Pack individuelle Inhaltselemente für den Redakteur bereitstellen lassen.

Natürlich gab es auch den ein oder anderen interessanten Talk. Am Donnerstag stellten Steffen Ritter und Steffen Gebert die Technik hinter dem neuen TYPO3 V4.4 Backendskin vor. Es hat sich viel getan, so dasss es nun wesentlich einfacher ist, das Backend an die eigenen Bedürfnisse anzupassen.

Ein weiterer Talk war der KickOff zur Version 4.5. Unter anderem wurden dabei auch die Releasezyklen der kommenden TYPO3-Versionen erklärt. Da es seit 4.3 jedes halbe Jahr eine neue Version geben soll, wird jede einzelne Version nur noch 1,5 Jahre supportet. Version 4.5 soll deshalb eine LTS-Version sein, die 3 Jahre supportet wird.

Für mich sind die vielen kleinen Gespräche vor und nach den Workshops und ein gemütliches Bier am Abend das Interssanteste an den Developer Days. Wobei man mit diesen kleinen Fläschchen als vernünftiger Münchner nicht wirklich glücklich wird. Und ganz großes Tennis war in diesem Jahr natürlich auch das Fußball-WM-Spiel der deutschen Mannschaft. 150 Nerds + gefühlt nochmal so viele Kameras in einem Raum vor einer riesigen Leinwand,  die mit ihrer Mannschaft leiden und sich freuen. Das muss man erlebt haben.

Das war’s auch schon mit meinem Rückblick. Ich freu mich schon aufs nächste Jahr.

Manchmal kann man für eine umfangreiche Bookmark- oder Share-Liste auch Extensions für TYPO3 installieren. Dazu später mehr.

Facebook Typoscript – Gefällt mir!

Ich möchte hier aber die Möglichkeit der Einbindung über Typoscript vorstellen.

In der Designvorlage sind drei Icons abgebildet, also es sollen drei Links zu Facebook, Twitter und Mister Wong generiert werden, die per Klick die URL und den Titel der Seite übermitteln sollen.

HTML-Struktur

Ein einfacher DIV-Block mit den jeweiligen Links.

<div class="shareBlock">
 <a class="facebookLink" href="#">Facebook</a>
 <a class="twitterLink" href="#">Twitter</a>
 <a class="wongLink" href="#">Mister Wong</a>
</div>

CSS mit Sprite-Image

Auch, wenn es in dem Beispiel “nur” drei Icons sind, macht es Sinn, diese als CSS-Sprites anzulegen. Es ist durchaus denkbar, dass später noch weitere Social-Dienste angefügt werden. Aus Performance-Gründen werden hierbei die HTTP-Request auf einem niedrigen Niveau gehalten und alle Icons in eine Grafik gepackt. Aus diesem Grund erhalten alle Links im CSS den gleichen Hintergrund (social-icons.png) und im Anschluss wird über background-position der jeweilige Bereich der Sprite-Grafik angezeigt.

.shareBlock {
	background: url(teilen.png) no-repeat 0 50%;
	clear: both;
	margin: 0 0 20px -17px;
	padding: 3px 0 5px 100px;
}
.twitterLink, .facebookLink, .wongLink {
	background: #fff url(http://blog.marit.ag/wp-content/uploads/social-icons.png) no-repeat;
	display: inline-block;
	height: 32px;
	width: 32px;
	text-indent: -9999px
}
.facebookLink {background-position: 0 0}
.twitterLink {background-position: 0 -50px}
.wongLink {background-position: 0 -100px}

Der Einfachheit halber habe ich die Icons in der Sprite-Grafik in einem Raster von 50px angelegt – so kann man die background-position leichter “finden”.

Das Arbeiten mit CSS-Sprite-Grafiken hat mehrere Vorteile:

• nur 1 Bild für alle Icons wird geladen
• nur 1 HTTP-Request
• die Dateigröße dieser Datei ist viel geringer als die Summe mehrerer Icon-Grafiken
• barrierearm, da Textlink mit Hintergrund-Grafik

Typoscript-Snippet

#| sociallinks |#

lib.sociallinks = COA
lib.sociallinks {
	wrap = <div class="shareBlock">|</div>

	10 = TEXT
	10 {
		value = Facebook
		typolink.title = Auf Facebook teilen
		typolink.ATagParams = class="facebookLink"
		typolink.parameter.cObject = COA
		typolink.parameter.cObject {
			10 = TEXT
			10.dataWrap = http://www.facebook.com/sharer.php?u={$baseURL}|
			10.typolink.parameter.data = TSFE:id
			10.typolink.returnLast = url
			10.typolink.addQueryString = 1
			10.typolink.addQueryString.exclude = id

			20 = TEXT
			20.data = page:title
			20.wrap = &t=|
			20.rawUrlEncode = 1
		}
	}

	20 = TEXT
	20 {
		value = Twitter
		typolink.title = Tweet it!
		typolink.ATagParams = class="twitterLink"
		typolink.parameter.cObject = COA
		typolink.parameter.cObject {
			10 = TEXT
			10.data = page:title
			10.noTrimWrap = |ließt%20grad:%20||
			10.dataWrap = http://twitter.com/home/?status=|
			10.rawUrlEncode = 1

			20 = TEXT
			20.dataWrap = %20-%20{$baseURL}|
			20.typolink.parameter.data = TSFE:id
			20.typolink.returnLast = url
			20.typolink.addQueryString = 1
			20.typolink.addQueryString.exclude = id
		}
	}

	30 = TEXT
	30 {
		value = Mister Wong
		typolink.title = Wong it!
		typolink.ATagParams = class="wongLink"
		typolink.parameter.cObject = COA
		typolink.parameter.cObject {
			10 = TEXT
			10.dataWrap = http://www.mister-wong.de/index.php?action=addurl&bm_url={$baseURL}|
			10.typolink.parameter.data = TSFE:id
			10.typolink.returnLast = url
			10.typolink.addQueryString = 1
			10.typolink.addQueryString.exclude = id

			20 = TEXT
			20.data = page:title
			20.wrap = &bm_description=|
			20.rawUrlEncode = 1
		}
	}
}

Typoscript am Beispiel Facebook

	10 = TEXT
	10 {

ein cObject TEXT wird initiiert

		value = Facebook

Der Wert “Facebook” wird festgelegt (Ankertext)

		typolink.title = Auf Facebook teilen

ein Link (a-Tag) wird drumherum generiert und das title-Attribut vom Link wird mit “Auf Facebook teilen” gefüllt

		typolink.ATagParams = class="facebookLink"

eine Link-Klasse “facebookLink” wird über ATagParams eingesetzt

		typolink.parameter.cObject = COA
		typolink.parameter.cObject {

für den Typolink-Parameter (href) wird ein neues cObject vom Typ COA initiiert

			10 = TEXT
			10.dataWrap = http://www.facebook.com/sharer.php?u={$baseURL}|

erster Teil des href: der externe Link zur sharer.php-Funktion von Facebook mit dem u-Parameter der Typoscript-Konstante “$baseURL” direkt als dataWrap (in den Typoscript-Constants muss diese Konstante vorhanden sein, Beispiel: baseURL = http://blog.marit.ag/)

			10.typolink.parameter.data = TSFE:id

die aktuelle Seiten-ID wird ausgelesen

			10.typolink.returnLast = url

die URL wird als String zurückgegeben

			10.typolink.addQueryString = 1

alle weiteren URL-Parameter werden ausgelesen, Beispiel tt_news oder L-Parameter für die Sprachwahl

			10.typolink.addQueryString.exclude = id

die zusätzliche Seiten-ID wird hier ausgeschlossen

			20 = TEXT

zweiter Teil des Links

			20.data = page:title

der Seitentitel wird ausgelesen

			20.wrap = &t=|

dieser Wert wird als Wert für den Parameter t des href gewrappt

			20.rawUrlEncode = 1

kodiert den übergebenen String entsprechend RFC 1738 zur sauberen Übergabe

		}
	}

und alle Klammern wieder schließen

Extensions die man installieren kann

• Facebook Social Plugins (socialplugins)
• Links for Social bookmarking and social network (wt_socialbookmarks)
• Social Media Links (form4_socialmedialinks)
• Sexy-Bookmarks (sexybookmarks)

Fazit

Für den Einsatz von Facebook-Share oder Twitter-Button kann man durchaus Typoscript verwenden. Eine schlanke schnelle Lösung auch wenn man weitere Bookmark-Dienste oder Soziale Netzwerke hinzufügen möchte. Ich würde dabei immer den Weg über CSS-Sprites mit allen Icons in einer Grafik gehen, schon aus Performance-Gründen.

Ein kurzer Satz über den Unterschied zwischen der Facebook-Like! Funktion und Share. Für mich persönlich ist die Share-Funktion aktuell für diesen Zweck des “Verbreitens/Teilens” bei Facebook besser geeignet. Ich kann beim Prozess auf Facebook noch zusätzliche Kommentare hinzufügen und ein Vorschaubild auswählen (das direkt aus der Seite ausgelesen wird), sofern eines vorhanden ist. Bei der Like-Funktion (Gefällt mir!) wird bei Facebook lediglich ein Satz abgespeichert “Sven gefällt Marit AG TYPO3 Blog Facebook-Share und Twitter-Update Button mit Typoscript” ohne weitere Kommentar-Möglichkeiten.

Natürlich jetzt nicht vergessen diesen Artikel zu teilen

FacebookTwitterMister Wong

Die Meinungen in der Community über FLOW3/TYPO3 5 sind noch geteilt, aber Extbase & Fluid bekommen mehr und mehr Unterstützung.

In den USA sind die TYPO3 Programmierer noch eher Sonderlinge und müssen, um sich über Wasser zu halten, meist auch noch WordPress, Joomla & Co machen.
Im Moment gibt es allerdings etwas Goldgräberstimmung in Richtung San Franzisko und es waren dieses Jahr schon eindeutig mehr Mitglieder aus den Amerikas hier als im vorherigen Jahr.

Beim Social Event waren wir in einer Rodeo Bar mit echten Stieren. Howdy!

Das Handout meines eigenes Vortrages mit zusätzlichen Informationen über Trackbacks und Pingbacks findet Ihr hier.

Weitere Informationen zur Konferenz:
http://joind.in/event/view/390
http://t3con10-dallas.typo3.org/presentations-schedule/schedule/
http://twitter.com/#search?q=%23T3CON10

Zu Linas Website

KEEP_FILE

Steht diese Zeile in der Datei, wird diese nicht mehr automatisch nach einer Stunde gelöscht.

In Ermangelung geeigneter Hooks nutzt die Extension xClasses und ist daher nicht kompatibel mit anderen Extensions, die ebenfalls den Seitenbaum xClassen z.B. pagetreetools, nutzt. Ein weiterer Nachteil ist, dass bei Änderung der Source an dieser Stelle mit einer neuen TYPO3 Version die Extension möglicherweise nicht nachzieht.

Momentan hat die Extension noch einige Nachteile, so ist der Seitenbaum in der ungepatchten Version der Extension nicht scrollbar. Dafür wurde jedoch ein Patch veröffentlicht: Patch zur Scrollbarkeit des Seitenbaums mit fb_hybridmultilanguagetree. Der Patch hat bei mir anstandslos funktioniert. Ein ehemaliger Fehler: gelöschte Sprachen wurden im hybriden Seitenbaum trotzdem angezeigt, wurde mittlerweile behoben.

Leider fehlen bei Anzeige des Sprachwahlmenüs die Buttons zur Erzeugung neuer Seiten und zum Aktualisieren des Seitenbaums. Für dieses Problem habe ich einen Patch veröffentlicht: Patch zur Anzeige des Button-Bar in fb_hybridmultilanguagetree.

Extension nicht gepatcht und gepatcht

Positiv anzumerken ist, dass die Beschränkung von Redakteuren auf bestimmte Sprachen respektiert wird, dass zusätzliche Einstellungen wie die Anzeige der Seitennummern weiterhin funktionieren.

Es wurde jedoch berichtet, dass Workspaces nicht funktionieren. Im vorliegenden Projekt jedoch wurden keine Workspaces auf Seitenebene eingesetzt.

Um den Kunden und der Presse ein umfassendes Bild seiner selbst im Netz darzustellen reicht es daher nicht mehr, nur eigene, statische Inhalte anzuzeigen. Glücklicherweise bieten aber viele Portale die Möglichkeit, neue Inhalte als RSS Feed zu importieren und dann auf der eigenen Webseite wieder darzustellen.

In TYPO3 gibt es mehrere Extensions, die RSS Feeds importieren und auf der eigenen Webseite darstellen können. Die am häufigsten verwendete Extension zur RSS-Feed Darstellung in TYPO3 ist tw_rssfeeds.

tw_rssfeeds installieren

Die Installation von tw_rssfeeds ist denkbar einfach:

Dann die Extension installieren und noch im Template der Hauptseite das Extensiontemplate einbinden.

Nun das Plugin konfigurieren:

Leider kommt das Plugin mit nicht ganz geeigneten Voreinstellungen, weswegen man unbedingt das Feld “Count of displaying items” ausfüllen sollte, sonst werden 0 Items, also keine angezeigt.

Die RSS-Feed Adresse bekommt man direkt von Xing. In der Hauptansicht der Gruppe kann sich auf der rechten Seite ein Button RSS-Feed befinden. Dieser ist nur vorhanden, wenn der Administrator der Gruppe diese öffentlich und suchmaschinendurchsuchbar geschaltet hat. Der einzelne Forum-Artikel ist ebenfalls nur dann sichtbar, wenn der jeweilige Benutzer die RSS Funktion in seinem Profil nicht ausgeschaltet hat.

Siehe dazu auch Welche Artikel werden in einem RSS-Feed öffentlich gemacht? in der XING-Hilfe.

Das standardmässig mitgelieferte CSS finde ich persönlich etwas nervig, denn hier wurden Farben hardkodiert. Außerdem steht viel auskommentierter CSS Code in dem _CSS_DEFAULT_STYLE, der die CSS Datei unötig vergrößert, ohne auch nur interpretiert worden zu sein. Mir reicht eigentlich ein simpler Untenabstand:

plugin.tx_twrssfeeds_pi1._CSS_DEFAULT_STYLE (
	.twrss_bodytext {padding-bottom: 5px;}
)

Leider wird die HTML Ausgabe der Extension festverdrahtet im Code der Extension erzeugt und ist daher nicht konfigurierbar. Trotzdem ein schneller Weg, XING Nachrichten auf der eigenen Webseite zu integrieren.

/**
 * Finds most recent posts by the specified blog
 *
 * @return array of years containing array of months
 */
public function findAllDates () {
  $query = $this->createQuery();
	$res = $query
		->setOrderings(array('date' => Tx_Extbase_Persistence_QueryInterface::ORDER_ASCENDING))
		->execute();
	$yearArray = array();
	foreach($res as $row) {
		$date = $row->getDate();
		$year = $date->format('Y');
		$month = $date->format('m');
		$day = $date->format('d');
		if(!isset($yearArray[$year]))
			$yearArray[$year] = array('count' => 0);
		if(!isset($yearArray[$year]['months'][$month]))
			$yearArray[$year]['months'][$month] = array('count' => 0);
		if(!isset($yearArray[$year]['months'][$month]['days'][$day]))
		  $yearArray[$year]['months'][$month]['days'][$day] = array('count' => 0);
		$yearArray[$year]['count']++;
		$yearArray[$year]['months'][$month]['count']++;
		$yearArray[$year]['months'][$month]['days'][$day]['count']++;
	  	$yearArray[$year]['value'] = intval($year);
		$yearArray[$year]['datetime'] = $date;
		$yearArray[$year]['months'][$month]['value'] = intval($month);
		$yearArray[$year]['months'][$month]['datetime'] = $date;
		$yearArray[$year]['months'][$month]['days'][$day]['value'] = intval($day);
		$yearArray[$year]['months'][$month]['days'][$day]['datetime'] = $date;
	}
	return $yearArray;
}

Ergebniss ist ein Array, welches alle vorhandenen Jahre und die Anzahl der Posts darin enthält darin ein Array, dass alle vorhandenen Monate enthält, darin alle vorhandene Tage.

Dann im PostController die Action hinzufügen: Classes/Controller/PostController.php

/**
 * Displays an archive Menu a new post
 *
 * @return string
 */
public function generateArchiveMenuAction() {
  $this->view->assign('years', $this->postRepository->findAllDates());
}

und diese natürlich in der ext_localconf.php zur Liste der erlaubten Actions hinzufügen. Dann ein zugehöriges Template erstellen:
Resources/Private/Templates/Post/generateArchiveMenu.html

<f:if condition="{years}">
  <f:then>
    <ul>
      <f:for each="{years}" as="year">
        <f:for each="{year.months}" as="month">
          <li>
              <f:link.action action="list" controller="Post" pageUid="11"  arguments="{year: year.value, month : month.value}">
                <f:format.date format="F Y">{month.datetime}</f:format.date>
              </f:link.action> ({month.count})
          </li>
        </f:for>
      </f:for>
    </ul>
  </f:then>
</f:if>

Lässt man die innere for-Schleife und die Ausgabe des Monats weg, hat man eine Ausgabe nach Jahren; fügt man eine weitere for-Schleife hinzu, hat man eine Aufschlüsselung nach Monaten.

In einem nächsten Schritt muss man nun für eine Listenansicht mit Respektierung des Datums sorgen.

In der letzten Zeit wurden viele neue Wireframe-Tools entwickelt und veröffentlicht. Deswegen gehen viele sehr gute Tools schnell in der Masse unter. Um dies zu verhindern habe ich einige getestet und meine daraus ermittelten Favoriten verglichen.

Da die von mir verglichenen Wireframe-Tools immer noch weiter entwickelt werden, könnte es schon Morgen weitere Features geben die ich in diesem Vergleich nicht beachtet habe.

Links:

www.mockflow.com

www.hotgloo.com

www.gomockingbird.com

www.axure.com

Verwendung von DAM, ohne Beeinflussung der RTE Verlinkung

Setzt man im Installtool bei der Dam-Extension keinen Hacken bei “htmlArea RTE integration”, So wird das Link-Popup des RTE nicht beeinflusst. Links auf Dateien werden weiterhin direkt über das Dateisystem abgehandelt, verschiebt man eine Datei, die vom RTE aus verlinkt wurd, so geht der Link verloren

Volle Integration vonb DAM in den RTE

Hat man dagegen den Hacken bei “htmlArea RTE integration” gesetzt, so wird das vorherige “Datei” Modul im RTE-Linkpopup versteckt und stattdesen erscheint ein Bereich “Media”. Sztandartmässig sind hier jedoch keine CSS-Klassen für den Link auszuwählen. So kann man hier dennoch Klassen auswählbar machen:

SeitenTSConfig des RTE

RTE{
  classesAnchor {
    # configure standart "download" class to function with DAM
    download.type = media
    # Define your own CSS class to work with Dam in the RTE
    lightbox{
        class = lightbox
        type = media
      }
  }
  default {
    #copy to default
    classesAnchor := addToList(lightbox)
    classesLinks  := addToList(lightbox)
  }
  # alow new class when processing
  proc.allowedClasses := addToList(flashcatalog)
}

Ausgabe:

Da die Browserunterstützung für die Verläufe noch nicht sehr fortgeschritten ist, ist es eher ein Blick in die Zukunft, es sei denn, man kann auf eine browserweite optische Gleichheit verzichten oder man macht ein Workaround mit Bildern. Der aktuelle Stand der CSS3-Eigenschaft “linear-gradient” ist hier nachzulesen. Die Vorreiter in der Entwicklung sind – wie gewohnt – Webkit (Safari ab 4.0, Chrome 4) und Gecko (Mozilla Firefox ab 3.6). Opera unterstützt die Eigenschaft bisher nicht. Die Internet Explorer kann zwar seit IE 5.5 über die filter-Eigenschaft bedient werden, aber das ist weder performant noch zielführend – da nur ein einfacher Verlauf erzeugt werden kann.

In der aktuellen Ausgabe des TYPO3 Onlinemagazins TY-MA habe ich beschrieben, wie man solche Teaserboxen in TYPO3 4.3  über die Inhaltsrahmen (section_frames) der Contentelemente erstellt.

Dabei werden für die Teaserboxen CSS-Klassen vergeben. Über CSS-Background-Images für die Überschrift und für den Inhaltsbereich wird dann der DIV-Block optisch zur Teaserbox. Da die Teaser-Boxen ein feste Breite haben, kann dabei 1 Bild für den Teaser-Top-Bereich und 1 Bild für den Teaser-Bottom-Bereich verwendet werden. So bleibt die Teaserbox in der Höhe flexibel.

Allerding werden wie schon erwähnt 2 Bilder, in unserem Fall also rund 2Kb Bilddaten geladen. Zudem sind das 2 HTTP-Request, die man in Zukunft mit dem Einsatz von CSS-Gradients einsparen kann – somit wird die Website beim Aufruf noch schneller. Als Vergleich folgende Übersicht der verschiedenen Varianten, 1x das Original mit 2 Bilddateien, 1x als CSS3 Version mit nur einem kleinen Bild und 1x ohne jegliche Bilder.

Man kann sehen, dass der optische Unterschied zwischen der reinen CSS Umsetzung nur sehr gering ist. Dreieckige Objekte lassen sich bisher nur schwerlich mit CSS implementieren.

Wir nehmen folgenden HTML-Schnippet als Basis:

<div class="css-block">
 <h3>Block teaser blue</h3>
 <div class="css-block-inner">
  <p>
  Cras tortor turpis, vulputate non, accumsan a, pretium in, magna.
  Cras turpis turpis, pretium pulvinar, pretium vel, nonummy eu, leo.
  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
  Curabitur augue nibh, iaculis eget, suscipit ut, sodales in, lectus.
  </p>
 </div>
</div>

Das CSS dazu ist folgendes:

.css-block {
 /*
 W3C Spec
 background: linear-gradient(top, yellow, blue 20%, #0f0);
 */
 background: -moz-linear-gradient(top, #fff 0, #fff 67%, #d2d2d2 100%);
 background: -webkit-gradient(linear,
  left top, left bottom,
  color-stop(0, #fff),
  color-stop(0.67, #fff),
  color-stop(1, #d2d2d2));
 padding: 1px;

 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;

 box-shadow: 0 15px 20px -10px #e1e1e1;
 -moz-box-shadow: 0 15px 20px -10px #e1e1e1;
 -webkit-box-shadow: 0 15px 20px -10px #e1e1e1;
 }

.css-block-inner {
 background-color: #ebebeb; /*fallback color*/
 background: url(img/arrow.png) no-repeat, -moz-linear-gradient(top,
  #8598aa 0,
  #fff 17%,
  #fff 83%,
  #ebebeb 99%,
  #fff 100%);
 background: url(img/arrow.png) no-repeat, -webkit-gradient(linear,
  left top, left bottom,
  color-stop(0, #8598aa),
  color-stop(0.17, #fff),
  color-stop(0.83, #fff),
  color-stop(0.99, #ebebeb),
  color-stop(1, #fff));
 padding: 10px;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

.css-block h3 {
 background-color: #2b4c6b;
 background: -moz-linear-gradient(top,
  #6b8298 0,
  #6b8298 50%,
  #2b4c6b 50%,
  #2b4c6b 100%);
 background: -webkit-gradient(linear,
  left top, left bottom,
  color-stop(0, #6b8298),
  color-stop(0.5, #6b8298),
  color-stop(0.5, #2b4c6b),
  color-stop(1, #2b4c6b));
 padding: 1px;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border: 1px solid #2b4c6b;
 color: #fff;
 padding: 7px 10px;
 margin: 0;
 }

Der äußere DIV-Block “.css-block” erhält einen Verlauf von #fff (weiß) zu #d2d2d2 (helles grau). Dabei sind für die Eigenschaft “background” folgende Werte zugewiesen:

background: -moz-linear-gradient(top, #fff 0%, #fff 67%, #d2d2d2 100%);

-moz-linear-gradient() ist die Wertzuweisung für Mozilla (Firefox), die kommagetrennten Werte in der Klammer bedeuten dann folgendes

• top = Verlauf beginnend oben
• #fff  0 = start bei 0% mit der Farbe #fff (weiß), wobei man den Initialwert (0%) auch weglassen kann
• #fff  67% = bis 67% mit der Farbe #fff (weiß) weitermachen
• #d2d2d2 100% = Verlaufsende bei 100% mit der Farbe #d2d2d2 (helles grau), wobei man den Endwert (100%) auch weglassen kann

Die Anweisung für Webkits ist leicht unterschiedlich im Syntax:

background: -webkit-gradient(linear,
  left top, left bottom,
  color-stop(0, #fff),
  color-stop(0.67, #fff),
  color-stop(1, #d2d2d2));

Der innere DIV-Block “.css-block-inner” mit einem zusätzlichen Bild erhält für unser Beispiel nun diese Werte für den Hintergrund:

background-color: #ebebeb; /*fallback color*/
background: url(img/arrow.png) no-repeat, -moz-linear-gradient(top,
 #8598aa 0,
 #fff 17%,
 #fff 83%,
 #ebebeb 99%,
 #fff 100%);

Wir weisen eine “Fallback”-Farbe zu (background-color: #ebebeb) – für Browser, die Verläufe noch nicht darstellen können. Dann weisen wir ein Hintergrundbild zu – url(img/arrow.png) no-repeat – das ist der kleine Pfeil, der von der Überschrift in den Haupttext “ragt”. Hinter dem Komma wird der Verlauftshintergrund definiert. Es fängt bei 0 mit der Farbe #8598aa (helles blau) an, geht bis 17% ins #fff (weiß) über, weiter mit #fff bis 83% der Höhe, übergehend zu #ebebeb (helles grau) bis 99% und wieder zu #fff bis 100%. Das ergibt am unterem Rand ein leichtes “Blitzen” und wirkt ein wenig 3-Dimensional.

Für die Überschrift h3 wird ebenfalls ein Verlauf benötig, allerdings mit einer “harten Kante”:

background: -moz-linear-gradient(top,
  #6b8298 0,
  #6b8298 50%,
  #2b4c6b 50%,
  #2b4c6b 100%);

Die Farbe #6b8298 (mittelblau) geht von 0-50%. Das dunklere blau #2b4c6b geht direkt weiter von 50-100%. Dadurch entsteht beim Verlauf die “harte Kante”.

Noch ein wenig “box-shadow” und “border-radius” und schon ist unsere Teaserbox mit CSS3-Verlauf fertig.

Fazit:

Die Möglichkeiten mit CSS3 sind nahezu unbegrenzt für die Umsetzung moderner Layouts, leider müssen wir mit der Implementierung noch eine Weile warten, bis alle Browser die Eigenschaften unterstützen. Dann lassen sich die netten Effekte aus Photoshop wie Schatten, runde Ecken oder Verlauf ausschließlich mit CSS umsetzen.