Artikel mit Tag css

Sticker.js - Aufkleber Effekte für die Homepage

Sticker, landläufig auch als Aufkleber bekannt, sind allgegenwärtig, sei es an der Laterne um die Ecke oder auf dem Heck des Nachbarautos.

Es wird also höchste Zeit diesen Trend in die digitale Welt zu portieren.

Sticker.js hat hierfür einen Ansatz und stellt die typischen Aufklebereigenschaften als JavaScript Bibliothek zur Verfügung. Ganz ohne Abhängigkeiten und unter MIT Lizenz.

stickerjs

Sollte eine Stickervorlage vorhanden sein, erfolgt die Einbindung durch einen einfachen Aufruf innerhalb einer DIV Klasse. Größe und Hintergrund werden via CSS realisiert.

Somit hat der Anwender nach wenigen Arbeitsschritten einen "bedienbaren" Sticker auf der Webseite. Hört sich etwas komisch an, ist aber so.

 

 

Der Leser fragt sich sicherlich, wo die Einsatzgebiete so eines Stickereffekts sein könnten?

Ich denke in den Weiten des Internets lassen sich sicherlich Nerd,- Geek, - oder Hipsterseiten finden, die genau diesen Effekt seit Langem suchen.

Schönen Sonntag :)

Brackets - Adobes Antwort auf Githubs Atom Editor

Es muss nicht immer Atom sein. Adobe vertreibt einen Code Editor, der ähnliche Funktionen wie der kürzlich vorgestellte Editor von Github bietet.

Brackets nennt sich das gute Stück, welches ebenso wie die Konkurrenz auf Node.js. basiert. Der ebenfalls unter OpenSource Lizenz stehende Code Editor bietet neben Plugins und Themes eine Live Vorschau an. In der jetzigen Entwicklungsphase funktioniert diese allerdings nur mit Google Chrome.

Brackets

Da der Editor aus dem Hause Adobe stammt, kann er PSD Dateien einlesen und in CSS ausgeben. 

Für Webdesigner und Menschen, welche viel mit HTML, CSS und JavaScript arbeiten, ist Brackets sicherlich ein gute Wahl. Momentan ist Brackets in Version 1.3 verfügbar. 

Installation von Brackets unter Ubuntu 14.04

Zunächst fällt die Auswahl auf die Systemarchitektur, 32 oder 64bit

wget https://github.com/adobe/brackets/releases/download/release-1.3/Brackets.Release.1.3.64-bit.deb

wget https://github.com/adobe/brackets/releases/download/release-1.3/Brackets.Release.1.3.32-bit.deb

sudo dpkg -i Brackets.Release.1.3.*

 

Phone Home in Brackets deaktivieren

Eines haben Brackets und Atom gemeinsam, sie telefonieren beide nach Hause, zwar anoym, aber sie tun es. Glücklicherweise lässt sich dies deaktivieren.

Hiezu muss unter "Hilfe/Statusbericht" der entsprechende Haken entfernt werden.

brackets-statusbericht

Happy coding.

Animiertes Sonnensystem in CSS

Zum Freitag ein kleines Kunstwerk in CSS.

Julian Garnier hat unser Sonnensystem komplett in CSS umgesetzt. Das System ist natürlich animiert und bietet die Möglichkeit zwischen einer 2D und 3D Ansicht zu wechseln.

Zusätzlich lässt sich unser Solarsystem nach Größe, Geschwindigkeit oder Entfernung anordnen. Informationen lassen sich zu jedem Planet einzeln anzeigen. Thats it

css-solarsystem

Betrachten lässt sich das harte Stück Arbeit auf CodePen. Der reine Code kann aber auch via GitHub ausgecheckt werden.

CSS Hexagon Generator - Sechsecken für alle

Wer hat noch nicht davon geträumt ein Hexagon auf seiner Homepage einzubinden?

Musste früher noch zu Zirkel und Bleistift gegriffen werden, wird im digitalen Zeitalter ein Sechseck via CSS erstellt. 

CSS-Hexagon-Generator

Um keine unnötige Energie in ein Stückchen Code zu investieren verwendet der gewiefte Entwickler natürlich einen CSS Hexagon Generator:

Größe, Farben, Schatten...scroll...klick klack und fertig ist das Hexagon.

CSS-Hexagon

Den dazugehörigen HTML/CSS Code will ich euch nicht vorenthalten.

[geshi lang=css]

Shut Up - Automatisch Kommentare auf Webseiten ausblenden

Die Tage konnte man wieder von der Diskussion lesen, ob Kommentare auf Webseiten überhaupt noch sinnvoll sind in Zeiten von liken, plussen und tweeten. Nimmt man beispielsweise youtube, findet man zig geistreiche Kommentare zu jedem Videobeitrag.

Wer sich das sparen möchte, der ist mit der Chrome Erweiterung "Shut Up" auf dem richtigen Weg. Das Add-on blendet Kommentare auf bekannte Webseiten einfach aus.

Vorher

chrome-minus

Nachher

chrome-minus-kommentare

Die Erweiterung bindet sich als kleines Sprechblase neben der Adressleiste in Chrome ein. Sobald man auf eine Seite gelangt die unterstützt wird, erscheint ein Minuszeichen und die Kommentare können ausgeblendet werden.

kommentare-verstecken

Firefox Nutzer können auf ein Bookmarklet zurückgreifen, das einfach in die Lesezeichenleiste gezogen wird und bei Bedarf Kommentare deaktiviert.

shh

Ein Auszug der unterstützten Seiten bzw. Kommentarsysteme:

  • youtube
  • digg
  • wordpress
  • reddit
  • washington post
  • boxee
  • cnn
  • yahoo
  • bbc
  • zdnet
  • hp
  • ....

Die Erweiterung ist ein wenig mit Vorsicht zu genießen, denn technisch blendet sie IDs aus, beispielsweise mit dem Titel "comments". Auf manchen Seiten kann das zu unerwünschten Nebeneffekten führen.

Download