Früher musste man, wenn man Bilder ungewöhnlich präsentieren wollte, stets zu einem Grafikprogramm greifen. Das hatte den Nachteil, dass Änderungen nicht ohne größeren Aufwand durchzuführen waren. Doch mit Hilfe von ein bisschen CSS lassen sich auf einfache Weise tolle Effekte erzielen, wie z.B. ein Foto wie ein Polaroid aussehen zu lassen.

Zunächst einmal brauchst du ein Bild. Dieses hast du praktischerweise schon mit einem Grafikprogramm in das richtige Format gebracht. Für einen echten Polaroid-Effekt empfiehlt es sich ein Seitenverhältnis von 1:1 zu wählen.

Die Bildgröße spielt nur eine Rolle, wenn du kein CMS wie z.B. WordPress benutzt. WordPress erstellt automatisch beim Hochladen kleinere Versionen deines Bildes entsprechend deiner Vorgaben. Diese kannst du leicht unter Einstellungen > Medien verändern.

Kleiner Hinweis: Du hast sicher gemerkt, dass ich ein Fan von WordPress bin. Lass dich bitte dadurch nicht abschrecken.

Das HTML-Grundgerüst

Das Polaroid besteht eigentlich nur aus einem <div>-Container, der die CSS-Klasse “polaroid” bekommt. In diesen Container wird einfach das Bild mit <img> eingebunden. Bei einem Original-Polaroid ist unter dem Bild immer etwas Platz zum Beschriften. Darauf wollen wir natürlich nicht verzichten. So kommt eben noch ein <p>-Tag mit in den Container. Er ist jedoch nicht zwingend erforderlich.

Jetzt bist du mit dem HTML-Teil schon fertig.

<div class="polaroid">
  <img src="Bild.jpg">
  <p>Bildbeschriftung</p>
</div>

Mit CSS zum Polaroid

Im nächsten Schritt muss nur noch die CSS-Klasse “polaroid” ausgestaltet werden.

.polaroid {
  display: inline-table;
  background-color: #FFF;
  border: 1px solid #444;
  padding: 0.5em;
  box-shadow: 0px 0px 8px #999;
}

Die meisten Attribute wie background-color oder border sind selbsterklärend. Etwas getrickst wird nur mit der Zeile “display: inline-table“. Normalerweise wird ein <div> immer auf die ganze, zur Verfügung stehende Breite ausgedehnt. Das ist natürlich für unseren Zweck völlig ungeeignet. Doch mit dem Trick, das <div> wie eine Tabelle zu behandeln, wird nur so viel Platz beansprucht, wie der Inhalt auch wirklich braucht.

Für den weißen Rand sorgt das Attribut “padding: 0.5em“. Ganz nach Belieben kannst du hier auch einen Pixelwert eintragen. Das bleibt dir überlassen. Damit das Polaroid etwas plastischer wirkt, habe ich mit “box-shadow” noch einen Schatten hinzugefügt.

Eine Kleinigkeit bleibt noch übrig. Die Bildbeschriftung.

.polaroid p {
  text-align: center;
  margin: 0.5em 0 0 0;
}

Mit text-align wird nur für die Zentrierung des Textes gesorgt. Also nichts Besonderes. Wichtig ist hier, mit "margin: 0.5em 0 0 0" für einen Abstand der Beschriftung nach oben zu sorgen. Das soll bezwecken, dass die Schrift nicht direkt unter dem Bild klebt.

Polaroid mit runden Ecken

Jetzt kommt noch eine kleine Erweiterung, um zu zeigen, dass du noch mehr mit deinem Polaroid machen kannst. Dazu habe ich der Einfachheit halber eine zusätzliche Klasse “polaroid-round” geschrieben, die du dem <div>-Tag mit auf den Weg geben kannst.

.polaroid-round {
  border-radius: 1em;
}

Jetzt hat dein Polaroid also runde Ecken. Doch was ist mit dem <img>? Das soll natürlich auch etwas abgerundet werden.

.polaroid-round img {
  border-radius: 0.75em;
}

Mögliche Probleme

Dein Bild hat z.B. die Maße 400×400 Pixel. Nun möchtest du es allerdings etwas kleiner darstellen. Da bietet es sich an dem <img>-Tag einfach die Attribute width und height mitzugeben. Doch Vorsicht. Bitte benutze keine Prozentangaben. Nimm stattdessen immer Pixel.

<img src="Bild.jpg" width="200px" height="200px">

Zum Schluss

Jetzt hast du also dein Bild in ein schönes Polaroid verwandelt. Was bleibt noch zu sagen? Klar, der Hinweis auf die Demo, damit du dir vorab schon mal einen Eindruck machen kannst. Also zögere nicht, den Button unten zu klicken.

Kalendarisch ist schon Frühling. Trotzdem pfeift einem der Wind kalt um die Ohren. Wer wünscht sich da nicht den Sommer herbei?

So ruft auch der Webmaster Friday dazu auf, mal ein paar sommerliche Bilder zu zeigen, damit der Wettergott vielleicht doch noch gnädig gestimmt wird. Und auch, wenn ich nicht ganz pünktlich bin, reiche ich noch ein paar Aufnahmen nach.

Beim örtlichen Discounter erwarb ich ein Guthaben für mein Prepaidkonto bei congstar. Dabei fiel mir nicht nur auf, dass die PIN-Nummer zum Aufladen ziemlich lange gültig ist. Nein, das Guthaben wird mir noch nicht mal sofort gut geschrieben. Zumindest lese ich das aus dem Text so heraus.

Deshalb meine Frage:

Habe ich das richtig verstanden, dass …

… congstar mir erst nach Ablauf der Gültigkeit den Betrag meinem Prepaidkonto gut schreibt? Also dann im Jahr 3000. Und für diesen tollen Service wollen die mir auch noch 5€ berechnen?

Dabei brauche ich das Guthaben JETZT !!!

Ok, Spaß beiseite. Das Guthaben wurde natürlich sofort auf mein Prepaidkonto gebucht. So soll es auch sein. Doch der Text ist ziemlich irreführend formuliert. Wenn es wirklich so wäre, wie man es auf den ersten Blick verstehen kann, kämen mir glatt die Tränen.

Zum Schmunzeln finde ich es trotzdem.

In Deutschland dürfen Filme, die mit “FSK 18″ gekennzeichnet sind, nicht vor 23 Uhr gezeigt werden. Das soll Kinder und Jugendliche vor übertriebener Gewaltdarstellung schützen. Soweit zur Theorie. Doch wie sieht die Praxis aus?

Der Anbieter Netzkino.de bietet Filme legal und kostenlos an. Er finanziert sich dafür über Werbung. Auch bei ihm wird auf den Jugendschutz geachtet. Filme, die als “FSK 18″ eingestuft sind, können auf der Webseite tatsächlich nur ab 23 Uhr abgerufen werden. Nicht zuletzt wirbt er auch damit.

Kino ab 18

Von 23.00 bis 06.00 Uhr können Sie alle Filme genießen die mit “FSK 18″ gekennzeichnet sind. Aus Jugendschutzgründen ist dies uns gesetzlich so vorgegeben.

Das klingt ja erstmal ganz toll. Im Internet wird also auch auf Jugendschutz geachtet. Doch ganz so rosig ist es dann bei näherer Betrachtung nicht.

Um mal bei Netzkino.de zu bleiben. Dieser Anbieter hostet die meisten Filme bei der Videoplattform YouTube. Doch hier ist es scheinbar egal, wann Gewalt verherrlichende Filme gezeigt werden. Bei YouTube wird für sage und schreibe 3 Sekunden der Text “Viewers discretion is advised” eingeblendet. Damit hat es sich dann auch schon. Der Film startet trotzdem.

Wenn du also bei Netzkino.de einen “FSK 18″-Film entdeckst, den du jedoch früher als 23 Uhr anschauen willst, dann gib den Filmtitel doch einfach mal in die Suchmaske bei YouTube ein. Sicher wirst du schnell fündig, zumal der User bei YouTube auch Netzkino heißt.

Da ist er also dahin, der Jugendschutz. Im Internet ist er nicht mehr als ein zahnloser Papiertiger. Mal ganz davon abgesehen, dass es noch andere Möglichkeiten gibt, dem deutschen Recht aus dem Weg zu gehen. Doch das ist die bisher einfachste.

“Do the Harlem Shake” – so tönt es mittlerweile aus allen Ecken. Auch YouTube ist von diesem Hype nicht unverschont geblieben.

Wenn du auf YouTube nach “Do the Harlem Shake” suchst, dann bekommst du zwar aktuelle Suchergebnisse, doch die Webseite verwandelt sich nach und nach in ein zappelndes Etwas. Ganz im Stile der zig Videos, die es auf dem Videoportal zu entdecken gilt. Nach ca. 30 Sekunden ist der Spaß aber vorbei und das Suchergebnis präsentiert sich, als wäre nichts gewesen.

Bild: Screenshot

Nun, 3D-Drucker sind noch nicht veraltet. Also wirf deinen bitte nicht sofort weg. Aber mit dem 3D-Stift steht das nächste Utensil für Kreative bereit.

Bisher malte man mit einem Stift auf einer glatten Fläche. Doch das ist mit dem 3D-Stift vorbei. Er enthält eine Paste, die beim Austritt sofort trocknet. Damit ist es möglich, einfach in der Luft weiter zu malen. Man formt buchstäblich mit einem Pastefaden seine Kreationen.

Dass man mit diesem Stift ganz erstaunliche Dinge zaubern kann, zeigt das Video sehr eindrucksvoll. Eine tolle Sache, wie ich finde.

Würdest du dir auch so einen Stift kaufen? Schreib deine Meinung in die Kommentare.

Eine neue Epidemie breitet sich auf YouTube aus. Nach “Gangnam Style” kommt nun “Harlem Shake”.

War ja eigentlich klar, dass der Hype um den koreanischen Rapper Psi nicht ewig halten kann. Nun ist klar, wer der Anwärter auf den Thron ist.

Thronfolger: Harlem Shake

Bei Harlem Shake handelt es sich um einen Tanzstil aus den 80ern, der im New Yorker Stadtteil Harlem seinen Ursprung hat. Bei diesem Tanz geben die Schultern rhythmisch die Richtung vor, die Arme schlackern mehr oder weniger nur hinterher. Mit den Hüften wird dabei eine Stoßbewegung vollführt.

Von Harlem zum Hype

Die Veröffentlichung von Harlem Shake des DJs Baauer war bereits im Mai 2012. Und eigentlich wäre das auch nicht spektakulär. Doch nachdem im Februar 2013 ein Video bei YouTube auftauchte, indem ein Teil des Liedes verwendet wird, war der Grundstein für den nächsten Hype gelegt. Schnell fanden sich zahlreiche Nachahmer, die selbst ihren Harlem Shake veröffentlichten.

In den Videos ist am Anfang immer eine Person zu sehen, die beginnt merkwürdig zu tanzen. Dabei wird sie von anderen ignoriert. Nach einigen Sekunden hört man dann “Do the Harlem Shake” und eine Basseinlage. Und dann geht buchstäblich die Post ab. Nach ca. 30 Sekunden ist der Spaß vorbei.

Auch Deutschland vom Hype erfasst

An Deutschland geht der Hype nicht spurlos vorüber. Auch Hierzulande wird der Harlem Shake getanzt, was das Zeug hält.

Hier ein Beispiel, dass auch Feuerwehrleute andere Talente haben als nur Feuer zu löschen.

Auch im Büro der GIGA-Redaktion wird getanzt … nachdem ein paar Missverständnisse ausgeräumt sind.

Bild: By David cambridge (Own work) [CC-BY-3.0], via Wikimedia Commons

Im Play Store von Google gibt es jetzt jede Woche eine Single gratis zum herunterladen. Eigentlich eine coole Aktion. Doch leider hat dieses Gratis-Angebot einen kleinen Haken.

Den Anfang macht Google diese Woche mit Ho Hey von The Lumineers. Rein gehört habe ich bereits auf der Webseite. Doch kaufen kann ich das Lied nicht. Denn leider will Google, dass ich den Gratis-Song für 0 € erwerbe. Und das geht nur, wenn man den Play Store mit einer Kreditkarte verknüpft hat. Schade. Die hab ich nämlich nicht.

Wenn du allerdings im Besitz einer Kreditkarte bist oder dein Guthaben für den Play Store aufgeladen hast, wie Caschy das in seinem Blog beschreibt, dann steht dem kostenlosen Genuß nichts mehr im Wege.

Also dann mal schauen, was Google so jede Woche für uns ausgräbt. Übrigens gibt es im Moment noch drei Comedy-Alben von Mario Barth, Michael Mittermeier und Paul Panzer gratis. Das jedoch nur am Rande.

(via) | Bild: Screenshot

Wer hätte gedacht, dass es von Coca-Cola einen Kurzfilm geben wird? Ich jedenfalls nicht. Doch Produzent Ridley Scott liefert mit “Die Eisbären” eine süße Geschichte um eine Eisbärenfamilie ab, die pointiert auf den Generationenkonflikt eingeht.

Ein kurzweiliger Spaß, der sowohl zum Schmunzeln als auch zum Nachdenken einlädt.

Bild: Screenshot

Du willst schnell mal ein Bild zuschneiden? Oder doch nur die Farben etwas kräftiger machen bzw. den Kontrast erhöhen? Dann ist Photoshop Express vielleicht interessant für dich.

Wenn du gerne fotografiert, sei es z.B. mit dem Smartphone oder einer Kompakten, dann kennst du sicher das Problem. Die Bilder sind oft schlecht belichtet oder die Farben zu blass.

Um dein Foto etwas nachzubessern, brauchst du ein Grafikprogramm. Doch es muss nicht immer ein teures Profiprogramm wie Photoshop sein. Und auch die günstigere Variante in Form von Photoshop Elements ist nicht erforderlich.

Genau genommen brauchst du noch nicht mal ein Programm installieren. Das ist sehr praktisch, wenn du nicht an deinem eigenen Rechner bist, z.B. im Internetcafe oder bei Freunden.

Die Rede ist von Photoshop Express. Es handelt sich um eine Webapp, mit der du nach Belieben deine Fotos online bearbeiten kannst. Die einzige Voraussetzung ist ein installierter Flash-Player.

Photoshop Express

Die Oberfläche von Photoshop Express präsentiert sich übersichtlich. Links angeordnet findet sich das Menü mit den einzelnen Bearbeitungsoptionen. Der rechte Bereich ist in drei Sektionen unterteilt. In der Mitte ist das zu bearbeitende Bild. Darüber finden sich die Optionen der ausgewählten Bearbeitungsfunktion. Unten findest du Schalter, um Schritte rückgängig zu machen oder das Bild abzuspeichern.

Fotos bearbeiten

Die Bearbeitungsfunktionen sind in drei Kategorien eingeteilt.

1. Klassisch:
   Zuschneiden/Drehen, Skalieren, Autokorrektur, Belichtung, Rote Augen, Retuschieren, Sättigung
2. Semiprofi:
   Weißabgleich, Aufhellen, Aufhelllicht, Nachbelichten, Abwedeln, Nachschärfen, Weichzeichnen
3. Effekte:
   Kristallisieren, Vergröbern, Eine Farbe hervorheben, Farbton, Graustufen, Einfärben, Zeichnung, Verzerren

Dekorieren

Nachdem du dein Foto bearbeitet hast, stehen dir noch einige Optionen bereit, dein Werk zu verzieren. So kannst du dein Foto mit Text, Sprechblasen, ClipArts oder Rahmen dekorieren. Die Möglichkeiten hier sind zwar nicht so vielfältig, wie man es aus anderen Programmen gewohnt ist, reichen jedoch aus, um ein Bild schnell aufzuwerten.

Bildformate

Photoshop Express unterstützt nur Bilder im Format JPEG. Auf den ersten Blick scheint das sehr wenig zu sein. Man sollte jedoch berücksichtigen, dass es sich bei dieser Webapp nicht um ein Profiwerkzeug handelt. Außerdem speichern Smartphones oder Kompaktkameras Bilder eh in diesem Format ab.

Speichern und Veröffentlichen

Wenn alle Änderungen getätigt sind, muss das Foto nur noch gespeichert werden. Dabei ist es dir überlassen, ob du das Bild auf deinem Computer lokal speicherst oder bei Photoshop.com, Facebook, Picassa, Flickr oder Photobucket veröffentlichst.

Fazit

Es muss wirklich nicht immer ein teures Programm sein, um ein Bild schnell aufzuwerten. Mit Photoshop Express kann selbst der Laie tolle Ergebnisse erzielen.

Besonders gut gefällt mir die Funktion, mit der sich einzelne Farben des Fotos hervorheben lassen. Das Bild rechts soll dies beispielhaft verdeutlichen.

Wie gefällt dir Photoshop Express? Schreib deine Meinung in die Kommentare.

Bilder: Screenshot (oben), eigenes Bild (unten)
Link: Photoshop Express