Button mit animiertem Hintergrund

Demo

Dieser Artikel zeigt, wie ein Button mit animiertem Hintergrund bei :hover erstellt wird.

Das Ergebnis

Das Ergebnis

Achtung: Da vom Internet-Explorer CSS-Animationen noch nicht unterstützt werden, zeit dieser das Ergebnis falsch an. Getestet ist der Button in den aktuellen Versionen von Mozilla Firefox und Google Chrome.

HTML

Der HTML-Code für unseren Button bleibt sehr einfach:

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title>Button Example</title>
   <link rel="stylesheet" href="style.css"/>
   <link href='http://fonts.googleapis.com/css?family=Noto+Sans:300' rel='stylesheet' type='text/css'>
</head>
<body>
<button>Button</button>
</body>
</html>

CSS

Zuerst wird das grundsätzliche Aussehen des Buttons festgelegt. Hierzu gehören die Farben, Schriftarten, Abstände und der Rahmen. Mit diesem Code wird der Button bereits korrekt angezeigt, nur die Animation fehlt noch.

button {
  font-family: 'Noto Sans', 'Arial';
  font-size: 1.2em;
  font-weight: 300;
  cursor: pointer;
  padding: 0.4em 1em;
  text-align: center;
  background-color: #fff;
  border: 0.2em solid #14a2d4;
  border-radius: 50px;
  color: #323232;
}

Anschließend werden die Zustände :focus und :hover definiert. In diesen Fällen soll die Animation abgespielt werden.Hier wird als Hintergrund ein farbiger Kreis mit der halben Länge des Buttons festgelegt. Dieser wird mit einem Verlauf erzeugt. Dafür, dass Kreis nicht unscharf wirkt, dient der abrupte Farbwechsel bei 50%. Mit animation-fill-mode wird festgelegt, dass der Endzustand der Animation nach deren Abschluss bestehen bleibt, der Hintergrund also nicht wieder weiß wird.

button:hover,
button:focus {
  background: radial-gradient(circle, #14a2d4 50%, #ffffff 50%);
  /* W3C */
  background-position: center;
  background-repeat: no-repeat;
  animation: btn 0.2s ease-out 1;
  animation-fill-mode: forwards;
}

Zuletzt wird die Animation definiert. In dieser wird einfach festgelegt, dass der Hintergrund von 0% Größe (also unsichtbar) auf 200% Größe anwächst.

@keyframes btn {
  0% {
    background-size: 0;
  }
  100% {
    background-size: 200%;
  }
}

Aus Kompatibilitätsgründen werden noch Varianten mit Prefix hinzugefügt.

button:hover,
button:focus {
  background: radial-gradient(circle, #14a2d4 50%, #ffffff 50%);
  /* W3C */
  background-position: center;
  background-repeat: no-repeat;
  animation: btn 0.2s ease-out 1;
  animation-fill-mode: forwards;
  -webkit-animation: btn 0.2s ease-out 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: btn 0.2s ease-out 1;
  -moz-animation-fill-mode: forwards;
}
@keyframes btn {
  0% {
    background-size: 0;
  }
  100% {
    background-size: 200%;
  }
}
@-webkit-keyframes btn {
  0% {
    background-size: 0;
  }
  100% {
    background-size: 200%;
  }
}
@-moz-keyframes btn {
  0% {
    background-size: 0;
  }
  100% {
    background-size: 200%;
  }
}

Der fertige Code

button {
  font-family: 'Noto Sans', 'Arial';
  font-size: 1.2em;
  font-weight: 300;
  cursor: pointer;
  padding: 0.4em 1em;
  text-align: center;
  background-color: #fff;
  border: 0.2em solid #14a2d4;
  border-radius: 50px;
  color: #323232;
}
button:hover,
button:focus {
  background: radial-gradient(circle, #14a2d4 50%, #ffffff 50%);
  /* W3C */
  background-position: center;
  background-repeat: no-repeat;
  animation: btn 0.2s ease-out 1;
  animation-fill-mode: forwards;
  -webkit-animation: btn 0.2s ease-out 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: btn 0.2s ease-out 1;
  -moz-animation-fill-mode: forwards;
}
@keyframes btn {
  0% {
    background-size: 0;
  }
  100% {
    background-size: 200%;
  }
}
@-webkit-keyframes btn {
  0% {
    background-size: 0;
  }
  100% {
    background-size: 200%;
  }
}
@-moz-keyframes btn {
  0% {
    background-size: 0;
  }
  100% {
    background-size: 200%;
  }
}

Hier gehts zum Ergebnis.

Wochenrückblick 2014-08

Facebook kauft WhatsApp auf

Für rund 19 Mrd. US-Dollar hat Facebook den Smartphone-Messenger WhatsApp aufgekauft. Facebook bietet zwar selbst den Facebook-Messenger an, welcher das einfache Kommunizieren über das Smartphone ermöglicht, doch dem Marktführer WhatsApp kann auch Facebook nicht das Wasser reichen. Vermutlich ist auch das der Grund, warum Facebook Interesse an der App hat.

Viele Nutzer sind empört, obwohl die Gründer von WhatsApp ankündigten, dass sich nichts ändern wird. Bedenken gibt es besonders bezüglich des Datenschutzes, für welche Facebook ja häufig kritisiert wird. Infolge des Verkaufs meldeten sich auch viele (wenn auch im Vergleich zur Gesamtnutzerzahl nur wenige) Benutzer von dem Dienst ab.

WhatsApp selbst bot noch nie Ende-zu-Ende-Verschlüsselung und speicherte auch Backups der Daten – mit den Telefonnummern aller Kontakte – unverschlüsselt auf Servern des Computerriesen Apple. Dies war jedoch nur wenigen Nutzern bewusst, sodass viele durch den Verkauf aufgeschreckt wurden. Die Nutzerzahlen des alternativen Messengers Threema sollen sich in den Stunden nach Bekanntwerden des Verkaufs verdreifacht haben.

Amazon Prime bald mit Zugriff auf 12.000 Filme und Serien

Kunden des Onlineshops Amazon, welche das Zusatzprodukt Prime gebucht haben, bekamen Produkte bisher kostenlos und schneller nach Hause geliefert. Diesen Dienst hat Amazon jetzt erweitert: Ab dem 26. Februar erhalten Prime-Kunden Zugriff auf Prime Instant Video. Dies ist ein Service, mit dem man kostenlos auf über 12.000 Filme und Serien zugreifen kann.

Gleichzeitig hebt Amazon jedoch die Preise an. Die reguläre Mitgliedschaft kostet dann 49€ jährlich. Bisher zahlte man 29€. Bestellt man Prime noch vor dem 26.02.2014, bekommt man das erste Jahr Mitgliedschaft noch zum alten Preis von 29€.

Raspberry Pi: Netzwerkfreigabe mit Benutzerverwaltung

Der Raspberry Pi ist ein Mini-PC, welcher sich auch als Home-Server eignet. In diesem mehrteiligen Tutorial wird erklärt, wie man ihn als Dateiserver im Netzwerk nutzt und dabei die Zugriffe für einzelne Nutzer regelt.

Einrichtung des Raspberrys

1. Download der benötigten Software

Als Betriebssystem verwenden wir Raspbian. Dies ist ein Betriebssystem speziell für den Raspberry Pi, welches auf der Linux-Distribution Debian basiert. Achtung: Auf der Download-Seite gibt es auch andere Betriebssysteme zum Download. Bitte achtet darauf, dass ihr wirklich Raspbian herunterladet.

Download: http://www.raspberrypi.org/downloads

Um Raspbian auf die SD-Karte spielen zu können, wird außerdem der Win32 Disk Imager benötigt.

Download: http://sourceforge.net/projects/win32diskimager/

Weiterlesen

Wochenrückblick 2014-07

Künstliche Kernfusion

Am US-Forschungsinstitut NIF ist es Forschern erstmals gelungen, eine Kernschmelze künstlich anzuregen, bei der mehr Energie freiwird als hineingesteckt werden muss. Hierfür wurden fast 200 Laser auf ein Behältnis gerichtet, in dem sich der Brennstoff befanf. Dieser wurde somit auf über eine Million Grad Celsius aufgeheizt. die Reaktion dauerte 0,00002 Millisekunden. In dieser Zeit wurde etwa doppelt so viel Energie freigesetzt wie zum Anstoß benötigt wurde.

Zwar sind Forscher immer noch weit davon entfernt, die Kernfusion effektiv zu nutzen, doch war dies ein großer Schritt zu diesem Ziel. Mit Kraftwerken, welche aus der Kernfusion Energie gewinnen, ließen sich alle Energieprobleme der Welt lösen. Hierfür muss aber erreicht werden, dass die Kernfusion sich selbstständig fortsetzt und die dabei freiwerdende Energie “aufgefangen” wird.

Smartphoneproduzenten stark an Google gebunden

Benjamin Edelmann (Assistenzprofessor an der Harvard University) hat Dokumente veröffentlicht, welche zeigen, wie stark die Hersteller von Smartphones an Google gebunden sind. Obwohl das Smartphone-Betriebssystem Android als Open-Source gilt, zwingt Google Hersteller wie Samsung oder LG dazu, die Apps des Unternehmens zu installieren. Auch müssen sie Google als Standardsuchmaschine festlegen.

Sollten sich die Hersteller nicht an diese Regeln halten, verwehrt ihnen Google, den Play-Store und weitere Apps auf den Geräten zu installieren. Da der Play-Store der größte und wichtigste Marktplatz für Android-Apps ist und den Nutzern einen riesigen Mehrwert bietet, sind die Hersteller praktisch dazu gezwungen, sich an die Vorgaben von Google zu halten.

App: Rechenmeister

Vor knapp drei Wochen begann ich, eine Rechen-Lern-App für die Grundschule zu entwickeln. Hintergrund war, dass meine Eltern sich ein Tablet anschafften und natürlich auch mein kleiner Bruder dieses nutzen wollte. Damit er nicht den ganzen Tag Autorennen spielt und dabei den Fahrern das Genick bricht, suchten sie nach Lern-Apps.

Natürlich gibt es für Android schon einige (beim Suchbegriff “Grundschule Rechnen” finden sich rund 70 Ergebnisse), aber die sind entweder quietschebunt oder mit den Standard-Komponenten, welche nicht besonders Kinderfreundlich sind. Deshalb entwickelte ich eine App, welche auf die vier Grundrechenarten Plus, Minus, Mal und Geteilt fokussiert ist und auf unnötigen Schnickschnack verzichtet.

Im folgenden entstanden einige Entwürfe auf Papier, welche ich hier lieber nicht veröffentliche. Außerdem erarbeitete ich folgenden Programmablauf.

Ablauf Rechenmeister

Ablauf Rechenmeister (Anklicken zum Vergrößern)

Auch wenn man zu Beginn eines derartigen Projektes den Sinn solcher Diagramme anzweifelt, stellt sich im Nachhinein heraus, dass diese oft hilfreich sind. Das ist besonders der Fall, wenn man sich gerade so tief in den Code hineingedacht hat, dass man die anderen Zusammenhängt ganz vergessen hat.

Anfangs begann ich ohne diesen Plan mit der Programmierung, doch nach ein paar Tagen war der Code so chaotisch, dass ich selbst fast nicht mehr durchblickte. Ich löschte das ganze Projekt und begann es erneut mithilfe des Ablaufdiagramms. Diesmal klappte es wunderbar. Auch jetzt musste ich noch einige Dinge im Nachhinein neu entwickeln, doch deren Anzahl war minimal.

Umfang von Rechenmeister

Umfang von Rechenmeister

Das Logo war mit Inkscape auch relativ schnell erstellt. Mit dem Ergebnis bin ich auch recht zufrieden.

Ein anderes Problem war die Namenswahl. Ursprünglich hatte ich “Rechenkönig” im Hinterkopf. Ich bildete mir auch ein, dass ich schon nach diesem Namen gesucht hatte und kein Ergebnis fand. Somit benannte ich die App so und stellte sie in den Play-Store ein. Dann kam die Überraschung: Als ich nach meiner App suchte, tauchte auch eine andere namens Rechenkönig auf.

Da man den Namen im Nachhinein nicht mehr ändern kann (Der Name ist nicht das, was im PlayStore angezeigt wird, sondern ein eindeutiger wie in diesem Fall com.micwag.rechenmeister), deaktivierte ich die App wieder, bevor sie öfters heruntergeladen wurde. Anschließend bekam sie den neuen Namen “Rechenmeister”, nach dem ich jetzt genauer suchte und wurde erneut veröffentlicht.

Die Oberfläche von Rechenmeister

Die Oberfläche von Rechenmeister

Abschließend bin ich mit dem Ergebnis sehr zufrieden. Die einzige Schwachstelle, welche ich noch ändern möchte, ist die Kompatibilität. Bisher setzt meine App Android 3.0 voraus. Eventuell finde ich noch eine Möglichkeit, die entsprechenden Stellen so umzuschreiben, dass sie auch auf älteren Geräten läuft.

Wer die App testen will oder endlich rechnen lernen möchte, kann die App Rechenmeister kostenlos im Play-Store herunterladen. Weitere Informationen gibt es übrigens hier.

Wochenrückblick 2014-06

Lenovo will Sony Vaio aufkaufen

Sony macht mit seiner PC-Sparte VAIO seit mehreren Jahren Verluste. Aus diesem Grund wird diese jetzt an Lenovo verkauft. Trotzdem sollen alle Garantie- und Gewährleistungsansprüche für kürzlich gekaufte VAIOs erhalten bleiben.  Obwohl Sony schon immer mit innovativen Geräten überzeugte, gelingt es dem Unternehmen nicht, aus der Sparte Gewinne zu erzielen. Beispielsweise veröffentlichte Sony schon 2008 ein Notebook mit über 200DPI – und damit weit vor der Konkurrenz. Bedingt durch die Abspaltung werden auch rund 5000 Menschen ihren Arbeitsplatz verlieren.

Wochenrückblick 2014-05

Adblock Plus lässt sich von großen Unternehmen bezahlen

Die Entwickler des Werbeblockers Adblock Plus nutzen laut dem Blog Mobilegeeks.de ihre Marktmacht aus. Im letzten Jahr sollen sie rund 30 Millionen Dollar von großen Unternehmen wie Google oder Amazon erhalten haben. Auch Ebay wird erwähnt. Das Online-Auktionshaus bestreitet jedoch, einen Vertrag mit der Eyeo GmbH oder Adblock Plus geschlossen zu haben. Auch wurde kein Geld an diese gezahlt.

Profitiert haben die Unternehmen dadurch, dass deren Werbung (teilweise) auf die White-List für unaufdringliche Werbung gesetzt wurde. Damit wird sie dem Nutzer standardmäßig auch angezeigt, wenn dieser den Werbeblocker aktiviert hat. Kleinere Seiten sollen dagegen kostenlos einen Platz auf dieser Liste erhalten haben.

Snowden im Interview mit der ARD

Am Sonntag (26.01.2014) wurde in der ARD ein exklusives Interview mit Eduard Snowden ausgestrahlt. Der Whistleblower spricht unter anderem darüber, wie er dazu kam, die Informationen zu veröffentlichen und wie die NSA mit anderen Geheimdiensten zusammenarbeitet. Außerdem erwähnte er, dass die USA mit den gesammelten Daten auch gezielt Wirtschaftsspionage betreiben.

Ein Ausschnitt des insgesamt rund sechsstündigen Gesprächs kann in der ARD-Mediathek und auf Youtube angesehen werden.

Kurz zuvor wurden Informationen öffentlich, wonach Mitarbeiter der NSA und Regierungsbeamte anonym zugaben, dass sie Snowden am liebsten tot sehen würden. “In a world where I would not be restricted from killing an American, I personally would go and kill him [Eduard Snowden] myself”, zitiert BuzzFeed.

Wochenrückblick 2014-04

Millionenfacher Idenditätsdiebstahl aufgedeckt

Bei der Analyse von Botnetzen wurden 16 Millionen Zugangsdaten für verschiedene Online-Accounts entdeckt. Woher diese stammen ist bisher unklar. Betroffen sind solche Konten, welche als Benutzername die E-Mail-Adresse verwenden. Ob auch Konten mit anderen Benutzernamen betroffen sind, ist noch nicht vollständig geklärt. Auf einer speziell hierfür eingerichteten Website des Bundesamts für Sicherheit in der Informationstechnik (BSI) kann man überprüfen, ob man selbst betroffen ist. Hierfür gibt man seine E-Mail in einem Formular ein und bekommt im Falle eines Treffers eine Benachrichtigung zugesandt.

Rund die Hälfte der E-Mail-Adressen sollen zur Top-Level-Domain (BSI) .de gehören. Hieraus lässt sich schließen, dass vor allem deutsche Nutzer betroffen sind. Eventuell gehören sie auch ausschließlich zu deutschen Nutzern, da viele auch E-Mail-Adressen mit TLDs wie .com oder .net verwenden. Ob die Daten jedoch von einer deutschen Website stammen, ist noch unbekannt.

Wochenrückblick 2014-03

Google will in alle Lebensbereiche eindringen

Google betreibt schon lange nicht mehr nur die Suchmaschine. Mittlerweile hat der Konzern auch viele andere Dienste wie Youtube aufgekauft und erfolgreiche Eigenentwicklungen wie den Mailservice GMail gestartet. Doch bisher drang Google nur in den digitalen Lebensbereich ein. Das wird sich vermutlich bald ändern.

Am Montag wurde bekannt, dass Google den Rauchmelder- und Thermostathersteller Nest aufkauft. Dieser produziert intellegente Heizkörperthermostate, die etwa die Wohnung heizen bevor der Besitzer nach Hause kommt. Außerdem wurde auf einem Blog des Suchmaschinenbetreibers eine Kontaktlinse vorgestellt, welche den Blutzuckerspiegel bei Diabetikern überwacht.

Durch alle diese Produkte bekommt Google immer mehr die Möglichkeit, unser Verhalten genau zu analysieren. Beispielsweise weiß der Konzern dann, wann wir uns zu Hause befinden oder wie es um unsere Gesundheit steht. Wie die Daten verwendet werden, ist noch nicht klar, sicherlich will Google aber damit Profit machen.