Grafik bewege dich – mit einem Hover-Effekt dank CSS

Twitter belegt Platz 1? Klar, was sonst?

Vor ein paar Monaten habe ich in diesem Blog über die Möglichkeit mit CSS geschrieben, einen Social Media-Button zu vergrößern, wenn die Maus darüber fährt. Das hat auch ganz gut funktioniert, hatte aber einen Nachteil: Die Größenveränderung zieht die ganze Seite in Mitleidenschaft, sprich, alles was darunter ist, bewegte sich ebenfalls.

Mit einem Bild-Hover-Effekt kann man das auch besser lösen, durch Positionierung. Kurz gesagt: Eine Grafik kann aus zwei Teilen bestehen und je nach CSS wird die obere Hälfte oder die untere angezeigt. Das sieht dann so aus: Bild-Hover-Effekt

Für mein Projekt habe ich das etwas abgeändert und nur “einen” Button auf der Grafik, von der allerdings einige Pixel nicht angezeigt werden. So kann dann der Effekt entstehen, als würde der Button aus einem Schlitz in der Seite nach oben gehen.

Im CSS sind dazu drei Abschnitte notwendig:

.social-link { width:64px, height:64px; display:block; }

Dieser Block führt die Grafik ein, wichtig ist vor allem display:block, der die Grafik als Blockelement darstellt, damit man ihr Breiten- und Höhenwerte zuordnen kann.

.rss {background: url(rss.png) no repeat; background-position: 0 20px; }

In diesem Fall wird die Grafik für den RSS-Feed eingefügt und positioniert. In meinem Fall wird die Grafik um 20 px nach unten verschoben, wobei die 20px “verschwinden. Der folgende CSS-Text sorgt schließlich dafür, dass diese 20px wieder erscheinen und die Grafik so eingebunden wird, wie sie eigentlich ist – sobald die Maus darüber fährt.

.social-link:hover {background-position:0 0px;}

Im eigentlichen HTML-Dokument muss dann nur noch der Link eingefügt werden: <a href=”/feed.rss” class=”social-link rss”></a>

Im Einsatz kann man das ganze auf meinem Testportal matterne.dev4.fidion.de sehen.

Von Reponsive Webdesign zur Reponsive Theology?

Reponsive Webdesign heißt, die eigene Webseite quasi an den Besucher und seine technischen Hilfsmittel (Browser, Bildschirmauflösung usw.) anzupassen. Warum das nicht als Vorbild für Theologie nehmen. Maria Herrmann schlägt es in ihrem Beitrag vor: Antworten

Ich war beim Fernsehen, da denkt man in großen Bildern

Ad acta gelegter Entwurf

Es gehört zu meinen Grundsätzen, jeden Tag mindestens eine neue Sache zu lernen. Heute zum Beispiel habe ich den HTML-Tag article kennengelernt. Eigentlich war ich ja auf der Suche nach einer Möglichkeit ohne JavaScript dynamische Karteikartenreiter für mein Projekt bei fidion zu bekommen.

Mit CSS3 gibt es tatsächlich eine solche Möglichkeit, die allerdings das altbekannte Problem aufwirft: die Inkommbilität mit dem Internet Explorer 8 abwärts. (Wundert mich, dass man mit den Browsern überhaupt mal Webseiten ansehen konnte.) Aber ansonsten sah folgender Vorschlag ganz gut aus: Dynamische Tabs ohne JavaScript erstellen Nur lief der auch im IE 10 nicht wirklich gut, sobald man mehrmals zwischen den einzelnen Tabs hin und her klickte. Und auch im Firefox tat sich das Problem auf, dass zwar ein Tab beim Aufruf der Seite ausgewählt wird, aber nicht der dazugehörige Reiter. Es sei denn, man adressierte diesen in der URL mit #reitername direkt an.

Und so hat es diese nette kleine Spielerei nicht in mein Testportal matterne.dev4.fidion.de geschafft. Aber dort geht es ohnehin inzwischen voran – ich möchte sogar sagen, es geht dem Ende entgegen. D. h. natürlich eher, es geht dem Zeitpunkt entgegen, an dem der Meilenstein “Zwischenkontrolle” erreicht ist, dem i. d. R. jede Menge Verbesserungen folgen.

Auch wenn ich zugeben muss, dass manche Teile nur noch begrenzt an die Entwürfe erinnern, die vor gut einer Woche hier zu sehen waren. Inzwischen gab es sogar neue Entwürfe, die auch schon wieder ad acta gelegt wurden. Insbesondere die Größe der Fotos im Design habe ich unterschätzt. Das sie am Ende doch ein bisschen dominant wirkten, ist mir erst im realen Einsatz aufgefallen. Ich komm halt doch vom Fernsehen, da ist man an Bilder gewöhnt.

GIMP ist halt nicht Photoshop

Die Startseite

Ja, ich gebe zu, GIMP ist für sich genommen ein recht gutes Programm, aber wenn man an Photoshop gewöhnt ist, ist man halt an Photoshop gewöhnt. Und ganz ehrlich, allein die Auswahl einzelner Ebenen, um sie z.B. zu verschieben ließ mich bei GIMP schier verzweifeln. Bis man den Trick gefunden hat, klickt man sich im Vergleich zu Photoshop dumm und dämlich, bis man die gewünschte Ebene aktiviert hat. Aber offenbar lernt ein alter Hund eben manchmal doch noch neue Tricks – auch wenn mir das Stöckchen von Adobe nach wie vor viel lieber ist.

Mit GIMP beschäftige ich mich im Augenblick aus beruflichen Gründen, um ein Design für mein Testportal mit dem CMS fCMS zu entwerfen. Der ein odeer andere Leser mag es an der zurückgehenden Beitragsfrequenz und der Einschrumpfung meines Blogimperiums ja vermutet haben, dass ich wieder einen 40-Stunden die Woche-Job habe. Eben beim Hersteller des besagten CMS, das zum Beispiel auch beim hiesigen medialen Platzhirschen der Main Post im Einsatz ist.

Der Veranstaltungskalender

Obwohl ich also nach wie vor mit GIMP nicht gerade eine Liebesbeziehung eingehen werde, finde ich die Entwürfe dann doch ganz gelungen. Am Ende mache ich noch meine eigene Online-Zeitung auf.

Design war ja schon immer auch eine kleine Schwäche von mir, hat Spaß gemacht. Aber im Grunde ist es wie mit einem iPad, dass ist auch nur noch halb so toll, wenn es erst einmal bezahlt wird. Und ein Design mit einem Grafikprogramm zu entwerfen ist auch nur die halbe Miete, das Ganze muss jetzt erst einmal in HTML und CSS umgesetzt werden. Ein Fakt, den ich beim Design übrigens gerne ausklammere, sonst lasse ich ein paar schöne Dinge weg, die am Ende nämlich in der Umsetzung gar nicht so einfach sind.

Tja, zahl mal schön.

Diesbezüglich hätte ich ja gerne mit Fireworks gearbeitet, dessen Nutzung ich als einen der wenigen Vorteile meines letzten Jobs sehe. Aber ich denke mal, es wird auch so gehen. Laut meinem Projektplan ist die Sache in spätestens 15 Arbeitstagen erledigt. Mit dem Hauptmenü habe ich heute schon begonnen – allerdings mit dem Ergebnis, morgen lieber noch einmal von ganz vorn zu beginnen.

Insofern gibt es unter meinem augenblicklichen Testportal noch nicht allzu viel vom neuen Design zu sehen, aber das wird sich in den nächsten Tagen sicher noch ändern.