Let’s play Ball…

…11 CSS3 Kugel müsst ihr sein

Henning über Webdesign

Die Fußball WM 2010 in Südafrika läuft in vollen Zügen und wie immer ist der Ball rund. Verbal gesagt (danke, Mario Basler), ist CSS3 ist Schnee von morgen (danke Jens Jeremis). Solange Fußball und CSS3 noch von den Medien hochsterilisiert wird (danke, Bruno Labbadia), ist es an der Zeit CSS3 und Bälle zu kombinieren. Zugegeben, in der kürze der Zeit erscheint mir ein Fußball etwas zu komplex, aber eine CSS Billardkugel als Fingerübung zwischen zwei WM-Spielen, ist durchaus ‚drin (Demo). Da dieses Tutorial sich mit CSS3 beschäftigt, bleibt der Internet Explorer noch auf der Bank…

CSS3 Billardkugeln

Anpfiff

Das Grundgerüst für eine CSS3-Billardkugel ist sehr simpel. In einem Container – der äußeren Kugel – befinden sich ein div– und ein span-Element, die zusammen den Nummernbereich der Kugel bilden.


<div class="ballout pink">
	<div class="ballin"><span class="nr">3</span></div>
</div>

Wie man sieht, ist der HTML-Code sehr übersichtlich und die gesamte Ausprägung der Kugel wird über CSS gesteuert. In einem ersten Schritt muss eine kreisrunde Form erstellt werden, die eigentliche Grundfläche für die nachfolgende Billardkugel.

Eine runde Sache

Für einen Kreis (auch Halbkreis oder Viertelkreis) bedarf es keinerlei SVG oder sonstiger Images. CSS3 macht es möglich. Es finden sich viele Tutorials im Netz, wie man eine Kreisform zeichnet (u.a. auf CreativityDen). Das CSS3-Statement border-radius erlaubt es, durch die numerische Angabe der Rundung in Pixeln, eine Kreisform zu definieren. Vereinfacht gesagt entspricht die Kantenrundung dem Radius des Kreises. Will man einen Kreis mit einem Durchmesser von 100 Pixeln beschreiben, wird border-radius auf 50px gesetzt. Der nachfolgende Code definiert einen 100 Pixel großen Kreis:


.ballout {
    width: 100px; 
    height: 100px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    position: relative;
}

Da noch keine Hintergrundfarbe gesetzt ist, sieht man beim Ausführen des Codes auch noch nichts. Aber das wird im nächsten Schritt sofort geändert.

Ja, wo (ver)laufen sie denn…?

Um eine kugelähnliches Erscheinungsbild zu simulieren, wird ein radialer CSS3 Gradient verwendet. Die Syntax um einen Gradienten zu generieren unterscheidet sich in einigen Details zwischen Webkit und Mozilla Browsern.


/* Firefox */
-moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

/* Webkit */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Ein relativ deutlicher Unterschied ist, das in der Webkit-Version der Typ des Gradienten als Parameter übergeben wird (linear or radial), wohingegen bei Firefox jeder Gradiententyp ein eigenes Statement hat (-moz-linear-gradient | -moz-radial-gradient). Auch werden z.B. bei Mozilla sog. „Size constants“ verwendet, welche die Größe des Gradienten bestimmen. Eine detaillierte Aufstellung der Parameter finden sich auf den Seiten von mozilla.org und webkit.org.

Der Hintergrund der Billardkugel wird durch eine neue CSS-Klasse gesetzt, die via background den Gradienten zuweist.


.pink
{
    	 /* Firefox */
    	background: -moz-radial-gradient(55% 55%, farthest-side, #fff, #ff3399);
    	/* Webkit */
    	background: -webkit-gradient(radial, 55% 55%, 0, 55% 55%, 44, from(#fff), to(#ff3399));
}

Das Ergebnis (ohne das innere div und span) lässt sich sehen…

Kugel

Die Details

Nach dem die Grund-Kugel gebaut ist, muss nur noch der weiße Kreis inklusive der Nummer gestylt werden. Nochmals wird ein radialer Gradient für den Hintergrund des Beschriftungsbereichs verwendet und dieser wird dann noch horizontal und vertikal zentriert. Danach werden noch die typografischen Grundlagen gelegt (font-size, text-align).


.ballin{
    /* Firefox */
    background: -moz-radial-gradient(40% 40%, farthest-side, #fff, #d0d0d0);
    /* Webkit */
    background: -webkit-gradient(radial, 40% 40%, 0, 45% 45%, 60, from(#fff), to(#d0d0d0));
    width: 54px; 
    height: 54px;
    -moz-border-radius: 27px;
    -webkit-border-radius: 27px;
    /* horizontal und vertikal zentrieren */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -27px;
    margin-top: -27px;
    /* Typo */
    text-align: center;
    font-size: 36px;
}

Zu guter Letzt wird noch ein prominenter font-stack verwendet (hier mit Impact), um der Nummer das billardtypische Outfit zu verpassen.


.nr {
	display: block; 
	margin-top: 5px; 
	color: #444;
	font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

Billardkugeln

Nachspielzeit

Auch ohne Verwendung von Bildern kann man eine recht realistische Billardkugel gebastelt werden. Durch reine Farb-Anpassungen innerhalb des Gradienten kann so ein ganzer Kugelsatz zusammenstellt werden. Hier gibt’s die Demo.

Viel Spaß beim Ausprobieren und immer daran denken… vor dem Spiel ist nach dem Spiel…

Informationen über den Autor

Henning

...ist ein User Interface und User Experience Designer. Nebenbei Frontend Developer für Web-, Desktop- und mobile Plattformen. Mit mehr als 10 Jahren professioneller Projekterfahrung schreibt er zu den Themen Webdesign, -trends und -programmierung – eben fullstack! Follow @kingfries