Animation von Farbwerten mit CSS3-Transition, ohne jQuery

Das Problem ist bekannt: Mit der animate()-Methode von jQuery können lediglich numerische Style-Variablen animiert werden. Was aber machen wenn eine Farbwert-Animation benötigt wird? Beispielsweise um bei Hover die Hintergrundfarbe eines Elementes gleichmäßig zu ändern.

CSS3

Quick-Animationen: CSS3 macht’s möglich

Entweder man bindet ein Plugin ein, verwendet gleich eine große Library oder aber man nutzt die Möglichkeiten die einen CSS3 schon heute bietet. Die Transition-Eigenschaft, welche in allen modernen Browsern gut funktioniert, ist in der Lage diese Anforderung in wenigen Zeilen umzusetzen.

Beispiel: Hintergrund-Animation bei Hover

Ja wirklich, dieser Code reicht aus, um unsere Hintergrund-Animation auf das Element #foo anzuwenden.
[css]#foo {
background:red;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
#foo:hover {
background:yellow;
}[/css]
Die Transition-Eigenschaft (inkl. aller Browser-Prefixe) sorgt dafür, dass jegliche Änderung der background-Eigenschaft, mit einer 1-sekündigen-Animation durchgeführt werden. Das kann natürlich auch abgeändert werden, um zum Beispiel die Schriftfarbe (color) oder die Rahmen-Farbe (border-color) zu animieren. Natürlich bietet die Transition-Eigenschaft die Möglichkeit fast alle CSS-Werte animierend zu ändern. Ganze Animations-Abfolgen können via Keyframe-Animation realisiert werden.


Noch schneller geht es mit SCSS/SASS und Compass:
[css]#foo {background:red; @include transition(background 1s)}
#foo:hover {background:yellow}[/css]

Soll der Effekt erst ab einer bestimmten User-Interaktion starten, muss die gewünschte Zielfarbe einfach in einer Klasse gespeichert werden, welche man dem Element via JavaScript zuweist. Viel Spaß!

MAMP-Virtual-Hosts mit iOS öffnen

Viele Coder entwickeln ihre Webseiten lokal mit MAMP bzw. MAMP Pro. Wer seine Projekte auch für mobile Endgeräte optimieren möchte, hat mit SquidMan nun die Möglichkeit seine Virtual-Hosts via iPad und co. aufzurufen. Mit dem Programm kann in wenigen Schritten ein Proxy konfiguriert werden. Dieser ermöglicht das spätere Betrachten lokaler Projekte auf iOS-Geräten. Doch der Reihe nach.

SquidMan installieren und Port einrichten

SquidMan Einstellungen

SquidMan Einstellungen

Unter squidman.net/squidman kann die aktuelle Version heruntergeladen werden. Nach der Installation, müssen die Programm-Einstellungen geöffnet werden, um den Proxy zu konfigurieren. Wichtig ist hier die Bestimmung des Ports: Sofern der vorgeschlagene Port 8080 bereits vergeben ist, muss er hier neu definiert werden.

Im Tab „Clients“ kann bestimmt werden, welche Benutzer auf den neuen Proxy zugreifen können. Es kann entweder ein ganzes Subnet freigegeben werden (10.10*) oder aber einzelne Hosts – rechts unten werden Beispiele gezeigt. Ich selbst habe mich für letzteres entschieden und die IP-Adressen meiner mobilen Endgeräte eingetragen. Die IP-Adresse des jeweiligen iOS-Devices ist unter den Wi-Fi-Einstellungen ersichtlich.

Nun kann SquidMan gestartet werden. Jetzt muss der Proxy nur noch bei den Clients eingerichtet werden.

Proxy bei iPad und co. einrichten

iOS Wi-Fi-Einstellungen


iOS Wi-Fi-Einstellungen

Man nehme das gewünschte iOS-Device zur Hand und öffne die Wi-Fi-Settings unter “Einstellungen”. Jenes WLAN mit dem auch der lokale Rechner verbunden ist, muss gewählt werden. Danach auf den blauen Pfeil neben dem Netzwerknamen klicken, um zu den erweiterten Einstellungen zu gelangen.

Hinweis: Unter dem Punkt DHCP ist die aktuelle IP-Adresse ersichtlich. Wer SquidMan nur für dieses Gerät freigeben möchte, kann diese Adresse verwenden um sie in den Proxy-Einstellungen unter „Clients“ einzutragen.

Weiter unten bei den Einstellungen kann ein HTTP-Proxy eingetragen werden. Hier den Punkt „Manuel“ wählen. Als Server muss die IP-Adresse des lokalen Rechners verwenden werden. Diese findet man unter „Einstellungen / Netzwerk„. Danach den Port eintragen welchen man vorher in SquidMan hinterlegt hat.

Der Zugang zum Internet sollte nun bereits möglich sein, die lokalen Virtual-Host-URLs allerdings noch einen Zugriffs-Fehler liefern.

MAMP-Einstellungen

MAMP-Einstellungen

MAMP Pro konfigurieren

Mit MAMP Pro ist es möglich unter „Hosts“ alle lokalen virtuellen Domains zu verwalten. Bei jenen Hosts die zukünftig auch über den Proxy aufrufbar sein sollen, muss allerdings noch manuell der IP/Port des lokalen Rechners eingetragen werden.

Fertig, hoffentlich!

Nun muss sowohl MAMP als auch SquidMan neugestartet werden. Bei mir war sogar ein Neustart des kompletten Systems notwendig. Danach sollte es euch möglich sein eure lokalen Virtual Hosts auch auf den mobilen Endgeräten zu betrachten.

OSX: Hobbit und Herr der Ringe Easter Egg

Der Hobbit: Eine unerwartete Reise


Jetzt im Kino: Der Hobbit

Pünktlich zur Premiere von „Der Hobbit: Eine unerwartete Reise“ fand MacObserver ein tolles Easer-egg in Mac OSX. Die Suche nach dem Zeitpunkt bestimmter wichtiger Ereignisse in „Herr der Ringe“ oder „Der Hobbit“, ist nun viel einfacher, da diese direkt via Terminal abrufbar sind. Viel Spaß beim Probieren!

Herr der Ringe und Hobbit Timeline im Terminal anzeigen

  • Das Terminal öffnen
  • cat /usr/share/calendar/calendar.lotr eingeben
  • Das Ergebnis:
    easer-egg-herr-der-ringe-hobbit

OSX: Chrome Canary als Standard-Browser

Viele Entwickler möchten bereits vorab die neuesten Features des Chrome Browsers testen. Mit dem Build „Canary“ ist dies möglich. Ein kleines Problem gibt es aber: Über die Einstellungen von Canary ist es nicht möglich, diesen als Standard-Browser zu definieren. In den Einstellungen wird davor gewarnt, dass es sich um eine sekundäre Installation von Google Chrome handelt und es nicht möglich ist diese Einstellung vorzunehmen. Mit einem kleinen Trick funktioniert es trotzdem:

Safari OSX Canary

Safari macht’s möglich

Chrome Canary als Standard-Browser

  • Safari öffnen – richtig gehört, nicht Google Canary
  • Die Einstellungen von Safari öffnen
  • Im Tab „Allgemein“ gibt es gleich zu Beginn die Möglichkeit den Standard-Browser zu wählen
  • Google Canary wählen, Fenster schließen, fertig

Unter Windows ist der Vorgang schon etwas komplizierter. Hier muss ein Registry-File heruntergeladen und im richtigen Verzeichnis gespeichert werden. Da ich dies nicht testen kann, empfehle ich eine Google-Suche. Viel Glück!

Instagram veröffentlicht Profil Badges

Immer mehr Firmen versuchen durch ein Instagram-Profil ihre Marke zu stärken, die eigenen Fans und Kunden zu binden und mit aktuellen News zu füttern. Nach der Veröffentlichung der Profil-Seiten vor einigen Wochen, ist es nun problemlos möglich alle bisherigen Bilder eines Benutzers, oder eben eine Firma, anzusehen und demjenigen direkt über die Seite zu folgen. Um die potenziellen neuen Instagram-Follower auf das Service aufmerksam zu machen wurden nun Badges vorgestellt.

Instagram Profil Badges

Instagram Profil Badges

Derzeit sind diese jedoch nicht vergleichbar mit jenen von Netwerken wie Facebook, Twitter und Google+, da es sich lediglich um einen schön gestylten Link handelt, jedoch keine dynamischen Informationen dargestellt werden (Anzahl Follower, direktes Folgen via Website, etc).

Wie baue ich einen Profil Badge ein:

Um das Markup der eigenen Seite sauber zu halten, empfehle ich die Styles nicht direkt in den Source-Code einzubinden sondern im jeweiligen Stylesheet-File zu deklarieren. Die Frage sei erlaubt, warum man dieses Snippet überhaupt verwenden sollte und ob es nicht schneller ginge selbst einen Link in die eigene Seite einzubinden.

Es ist anzunehmen, dass Instagram verstärkt die Profile von Firmen/Brands und potenziellen Werbeträgern ausbauen wird und es bald weitere Möglichkeiten der Verbreitung gibt.