Rezept: Mousse Rice-White mit Kiwis

Rezept: Mousse Rice-White mit Kiwis
Vegane Mousse mit Kiwis

Ganz einfaches Rezept für vegane weiße Mousse. Basis dafür ist die weiße Bonvita Reismilchschokolade – manche lieben sie, manche weniger. Für erstere Gruppe ist dieses Rezept eine köstliche Angelegenheit. Eignet sich perfekt für eine Nachtisch und ist in weniger als 30 Minuten zubereitet.

Zutaten für 2 Personen:

  • 200g weiße Reismilchschokolade
    aus dem Bioladen oder Online
  • 300ml kalte Reis-Schlagsahne
    zum Beispiel „Soyatoo! Reis Whip“
  • 1 Päckchen Sahnesteif
  • 2 Kiwis, ca. 130g
  • 2-3 EL Agavendicksaft

Rezept:

  1. Schokolade mit einem Messer klein hacken.
  2. Etwas Wasser in einem Topf zum Kochen bringen.
  3. Danach Hitze verringern und die Schokolade in einer Metallschüssel über dem Wasserbad zum Schmelzen bringen. Die Metallschüssel sollte das Wasser nicht berühren.
  4. In der Zwischenzeit die Reissahne mit Sahnesteif aufschlagen.
  5. Die geschmolzene Schokolade zur Seite stellen und 10 Minuten abkühlen lassen.
  6. Nun mit einem Schneebesen unter die Sahne heben und 30 Minuten in den Tiefkühler stellen. Danach bis zum Verzehr im Kühlschrank lagern.
  7. Vor dem Servieren die beiden Kiwis in kleine Stücke schneiden und mit 2-3 EL Agavendicksaft mischen bis die Säure verschwunden ist.
  8. Nach Belieben auch mit Schokolade, wie auf dem Bild, servieren.

Font Awesome in Photoshop nutzen

Icon-Fonts sind eine tolle Sache. Keine lästigen PNG-Files mehr aus Photoshop exportieren, keine Sprite-Positionen im CSS notieren und keine Probleme mehr, wenn sich die Farbe der Icons später ändern soll. „Font Awesome“ ist eine der beliebtesten Icon-Fonts und ebenfalls kompatibel für Bootstrap. Wie man die Schrift auf seiner Website einbindet, wird auf vielen Seiten gut beschrieben, wie aber kann man sie auch für das nächste Screendesign in Photoshop nutzen?


Font Awesome in Photoshop verwenden

Font Awesome Photoshop Palette
Icon kopieren, Schrift auswählen, fertig.
  • Das ganze Paket via fortawesome.github.io/Font-Awesome downloaden und entpacken
  • Im Ordner „font“ findet ihr eine .otf-Datei, diese installiert ihr bzw. fügt sie zu eurem Schriftverwaltungsprogramm hinzu. Die Schrift sollte nun einsatzbereit sein
  • Damit ihr sie auch in eurem nächsten Design nutzen könnt, muss das gewünschte Icon zuerst von diesem Cheatsheet kopiert werden.
  • Achtet darauf, dass nicht der Unicode, sondern wirklich nur das Icon selbst kopiert wird.
  • Nun müsst ihr in Photoshop eine neue Textebene anlegen, das Icon von der Zwischenablage einfügen und die Schrift „Font Awesome“ wählen
  • Das Icon sollte nun sichtbar sein

Nun könnt ihr das Icon beliebig groß darstellen, die Farbe ändern, Ebeneneffekte darauf anwenden und viel mehr. Wie in CSS3 eben auch. Viel Spaß!

Angry Birds Seasons „Abra-Ca-Bacon“: Alle Sterne, das goldene Ei und mehr

Angry Birds Seasons Abra-Ca-Bacon Lösung
Abra-Ca-Bacon

Angry Birds Fans aufgepasst: Seit wenigen Tagen gibt es für „Seasons“ ein neues Gratis-Update (iOS, Android) mit 36 neuen Leveln – und die haben es wirklich in sich! Zum ersten Mal können mit „Abra-Ca-Bacon“ die verrückten Vögel durch futuristische Portale bugsiert werden, um den Schweinen dahinter an den Kragen zu gehen. Wie immer gilt es alle drei Sterne pro Level zu erreichen und mit den „Feather Mighty Eagle“ die maximale Zerstörung durchzuführen. Auf solife.cc findet ihr eine Auflistung aller Video-Anleitungen, um an dieses Ziel gelangen. Außerdem warten mehrere Bonus-Level auf euch und ein Tipp wie ihr das goldene Ei im Spiel kommt. Viel Glück!

Abra-Ca-Bacon 1

Abra-Ca-Bacon 2

Bonus

CSS3-Workaround: Transitions für Background Gradients

Ein Gartartikel von Christian Olear:

Animationen ohne Javascript, nur durch die Veränderung von CSS-Eigenschaften: mit CSS3-Transitions kein Problem. Während der Arbeit an einem aktuellen Projekt musste ich leider feststellen, dass sich CSS-Transitions nicht auf Background-Gradients anwenden lassen. Hier ein kleines Workaround um trotzdem das gewünschte Ergebnis erzielen zu können.

Animation von Hintergrundfarben – Demo

Wir haben also ein </div>-Element mit einem Background-Gradient und möchten diesen verändern, wenn sich der Mauszeiger auf dem Element befindet. Zur Generierung des Verlaufes empfehle ich Ultimate CSS Gradient Generator, dort kann man sich schnell und einfach das CSS für den gewünschten Gradient generieren lassen.


Hätten wir statt einem Gradient nur eine einfache Hintergrundfarbe, würde das ganze so aussehen:

[css]<style><!–
.background {
background-color:#0C87C9;
-webkit-transition: background-color 2s;
transition: background-color 2s;
}
.background:hover {
background-color:#9BC100;
}
–></style>
<div class="background">Text</div>[/css]

Animation von Background-Gradients – Demo

Meine erste Idee wäre gewesen, eine zweite Ebene über die Hintergrund Ebene mit einem leicht transparenten Gradient zu legen. Doch will man, dass das Element nicht nur einen Verlauf der Helligkeit hat, sondern auch den Farbton ändert, wird das zu kompliziert.

Nimmt man allerdings zwei Ebenen mit den unterschiedlichen Gradients, kann man eine Transition auf die opacity der Elemente anwenden und so einen Übergang zwischen den Gradients schaffen.
[css]<style><!–
.background {
position:absolute;
top:20px;
left:20px;
width:500px;
height:300px;
-webkit-transition: opacity 2s;
transition: opacity 2s;
}

.blue {
/*
* Eigenschaften für Gradient 1
*/
z-index:2;
}

.blue:hover {
opacity:0;
}

.green {
/*
* Eigenschaften für Gradient 2
*/
z-index:1;
}
–></style>
<div class="background green">Text</div>
<div class="background blue">Text</div>
[/css]

Durch die Positionsangaben in der Klasse .background befinden sich beide Elemente an der gleichen Position. Da .blue im Markup nach .green folgt, befindet er sich im Vodergrund. Man kann das ansonsten auch mit der CSS Eigenschaft z-index steuern.

In .blue:hover haben wir einen opacity Wert von 0, was den blauen </div> verschwinden lässt, wenn man mit dem Mauszeiger hovert. Entscheidend allerdings: Er tut es langsam, da in .background die Transition auf den opacity Wert definiert wurde.

Es handelt sich, wie gesagt, um einen Workaround für dieses Problem. Ein anderer Ansatz wäre beide Verläufe in ein Element zu fügen, via Background-Size nur einen bestimmten Ausschnitt anzuzeigen und via Animation der Background-Position den Effekt zu erzielen.

SVG-Bilder im Web: Farben ändern und animieren mit CSS

SVG-Bilder sind eine tolle Sache – besonders wenn man sie auf Webseiten einbindet: Die Speichergröße ist gering, die Images sind ohne Qualitätsverlust skalierbar und sogar der Internet Explorer 9 kann damit etwas anfangen. Im Gegensatz zu herkömmlichen Bildformaten, haben sie aber noch einen Vorteil: Mit CSS kann ihre Farbe verändert und auf Wunsch sogar animiert werden.


Das Markup

[html]<img src="logo.svg" class="svg" id="logo" />[/html]

Vorbereitung mit JavaScript

Zuerst muss via jQuery der Inhalt der .svg-Bilddatei in den Image-Tag eingefügt werden. Dies kann natürlich auch direkt im Markup erledigt werden. Beide Methoden haben Vor- und Nachteile.
[js]
$(‚img.svg‘).each(function(){
var $img = $(this),
imgID = $img.attr(‚id‘),
imgClass = $img.attr(‚class‘),
imgURL = $img.attr(‚src‘);

$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find(‚svg‘);

// Add replaced image’s ID to the new SVG
if(typeof imgID !== ‚undefined‘) {
$svg = $svg.attr(‚id‘, imgID);
}
// Add replaced image’s classes to the new SVG
if(typeof imgClass !== ‚undefined‘) {
$svg = $svg.attr(‚class‘, imgClass+‘ replaced-svg‘);
}

// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr(‚xmlns:a‘);

// Replace image with new SVG
$img.replaceWith($svg);
});

});
[/js]
Quelle: stackoverflow.com

Farbe des Bildes ändern

Nun kann direkt via CSS die Farbe des SVG-Bildes angepasst werden:
[css]#logo path {color: red}[/css]

Farbe animieren

Natürlich ist es jetzt auch möglich den gewünschten Farbwert via Animation zu verändern. Im folgenden Beispiel passiert das bei Mouse-Hover:
[css]#logo path {
-webkit-transition: all 1;
-moz-transition: all 1;
-ms-transition: all 1;
-o-transition: all 1;
transition: all 1;
}
#logo:hover path {color: green}
[/css]

Das ganze funktioniert in allen Browsern die mit SVG-Bildern und CSS3-Transitions etwas anfangen können.