Webseiten erstellen – Seite 2

Schatten mit CSS Pseudo-Elementen hinzufügen

In diesem Beitrag möchte ich euch zeigen, wie man mit ganz einfachen Mitteln einen Schatteneffekt an beliebige Block-Elemente hinzufügen kann. Der Clou dabei ist jedoch, dass dafür kein HTML angefasst werden muss, sondern dies ausschließlich über normale CSS Mittel funktioniert.

Ja klar, werden jetzt einige rufen. Dafür kann man ja einfach die CSS Deklaration box-shadow verwenden! Richtig. CSS3 erlaubt es seit einiger Zeit, mit box-shadow schöne Schatteneffekte an beliebige HTML Elemente zu zaubern und ist dabei ziemlich flexibel.

Aber leider ist es wie mit vielen neuen Dingen - einige Browser unterstützen es noch nicht, oder nur mit speziellen Browserprefixen wie -moz-, -o- oder -webkit-. Dies bedeutet, man muss diese Deklaration für jeden Browser in seiner speziellen Schreibweise wiederholen und bläst damit sein Stylesheet unnötig auf. Und selbst dann werden ältere Browser wie IE8 (und niedriger) oder Opera 10.10 (oder niedriger) nicht unterstützt.

Aus diesem Grund möchte ich euch eine weitere Möglichkeit vorstellen, wie man noch einen Schatten erstellen kann.

Gestatten, Pseudo-Elemente :before und :after

CSS2 bietet schon seit einiger Zeit die Möglichkeit mit Hilfe der Pseudo-Elemente :before und :after Inhalte vor bzw. nach Elementen per CSS hinzuzufügen. So lässt sich zum Beispiel mit folgender Anweisung vor allen Link-Elementen ein Text hinzufügen:

a:before {content: "Ich bin ein Link: "}

Und das alles, ohne etwas am HTML selbst ändern zu müssen. Und ein weiterer Vorteil für uns ist, dass diese Pseudo-Elemente auch schon von einigen älteren Browserversionen unterstützt werden und zudem noch ohne spezielle Prefixe auskommen.

Weiterlesen →

Kittyfier Bookmarklet – Süße Kätzchen überall

Was passiert, wenn man sich als Programmierer mal etwas vom normalen Arbeitsstress ablenken will? Man programmiert etwas, dass Spaß macht.

Auf genau diese Weise ist auch dieses Bookmarklet entstanden. Es wandelt einfach alle per IMG HTML-Tag eingebundene Bilder einer Seite in Bilder mit niedlichen kleinen Katzen um. Um zu sehen, was es macht, einfach den folgenden Link in die Bookmark-Leiste eures Browsers ziehen und auf einer beliebigen Seite mit Bildern ausprobieren!

Kittyfier Bookmarklet

Wer es gleich hier auf dieser Seite testen möchte, kann auch einfach nur den Link anklicken.

Hier sind ein paar zufällige Bilder zum Testen.

Wer wissen möchte, wie das Kittyfier Bookmarklet funktioniert, kann sich den kompletten Code hier ansehen. Eigentlich nichts besonderes:

var images = document.images; 
var icount = 0; 
for(var i = 0; i < images.length; i++) { 
var img = images.item(i);
if (img.width > 20 && img.height > 20) { 
img.src = "http://placekitten.com/"+img.width+"/"+img.height+"?image="+icount; 
icount++;if(icount > 16){icount=0;}
} 
}

Wie man sehen kann, verwende ich den Placekitten Service, welcher es einem erlaubt durch Angabe von Höhe und Breite beliebig große Katzenbilder zu generieren um diese als Platzhalter in die eigenen Entwürfe einzubauen. Dies ist vor allem dann praktisch, wenn man nur mal schnell ein HTML Layout testen möchte, aber noch keine passenden Bilder hat.

Ich hoffe ihr habt Spaß an diesem kleinen Script und ich freue mich über eure Kommentare.

A small update to my CSS3 Rotating Image Gallery

A couple of months ago I wrote a small image gallery script using some of the new CSS3 functions like transitions and transforms of the Webkit Nightly Browser. It is a simple gallery with only four pictures in it which rotates on mouse click to show the next picture.

That thing became a little famous and was shown on many other websites as an example to what can be done with CSS3 and a modern browser.

Now, a year later, I updated this script so it works now in many other modern browsers such as Firefox, Chrome, Opera and Internet Explorer.

Just browse to the example page and see it for yourself.

And if you have an older browser you can watch this little screen capture:

I hope you like it and I am eager to see what you can come up with using those CSS3 transitions and transforms.

5 extrem nützliche Tools für JavaScript Entwickler

Wenn es eine Programmiersprache gibt, die ich wirklich liebe, dann ist dies auf jeden Fall JavaScript. Früher von vielen belächelt, hat sich JavaScript heute zu einem wirklich mächtigen Tool unter Webentwicklern gemausert. Viele hilfreiche Seiten wie z.B. Google Maps wären ohne JavaScript überhaupt nicht möglich gewesen und selbst auf der Serverseite findet es in letzter Zeit immer mehr Verwendung - siehe node.js. Heute möchte ich euch fünf interessante und nützliche Tools vorstellen, die einem das Arbeiten mit JavaScript sehr erleichtern können.

JSFIDDLE - JavaScript direkt im Browser entwickeln

Dieses Tool ist noch relativ jung, hat sich aber für mich bereits jetzt zu einem der wichtigsten Tools beim Entwickeln und Testen von JavaScript Scripten entwickelt. Das Besondere an JSFIDDLE ist, dass man vier verschiedene Felder zur Verfügung gestellt bekommt. Im Ersten schreibt man seinen HTML Code, im Zweiten den benötigten CSS Code und im Dritten schließlich das JavaScript.

Wenn man möchte lassen sich externe JavaScript Bibliotheken wie Prototype, jQuery, Mootools und viele weitere per Klick einbinden.

Ein Klick auf 'Run' und das fertige Script wird ausgeführt und das Ergebnis im vierten Feld angezeigt. Diese so geschriebenen Scripte können gespeichert werden und sind über eine feste URL jederzeit wieder aufrufbar. Bei jedem Speichern bleibt übrigens die vorherige Version erhalten und kann über die alte URL aufgerufen werden.
Weiterlesen →

Vanilla Forums – Ein eigenes Forum einrichten

Auf webmatze.de gab es schon fast von Anfang an ein Forum. Anfangs hauptsächlich dafür da, um den Besuchern eine Möglichkeit in die Hand zu geben, sich zu den Inhalten zu äußern oder auch um Fragen zu stellen. Man muss sich dazu vorstellen, dass es in den ersten Jahren nicht möglich war, Kommentare zu den Beiträgen auf der Seite abzugeben. Dementsprechend gut wurde das Forum dabei auch angenommen.

Heute werden im Forum z.B. Fragen zu einzelnen Scripten und Programmen gestellt, um Hilfe bei Problemen mit HTML, JavaScript oder PHP gebeten oder über allgemeine Themen diskutiert.

Die verschiedenen Foren auf webmatze.de

Im Laufe der Jahre habe ich jedoch mehrmals die Forensoftware gewechselt, da ich meistens nicht ganz zufrieden mit den Funktionalitäten war, wichtige Funktionen fehlten oder nicht richtig funktionierten.

Zuletzt war ich beim Vanilla Forum gelandet welches in der Version 1 seit ein paar Jahren auf webmatze.de läuft. Was mich an diesem Forum begeisterte war die einfache Funktionsweise, der übersichtliche Aufbau und der Verzicht auf viele Features anderer Foren, die bei anderen Foren eher verwirren als wirklich zu helfen. Zudem ließen sich neue Funktionen über ein Plugin-Framework leicht nachrüsten.

Die neue Version - Vanilla Forums 2

Seit Mitte Oktober 2010 habe ich das Webmatze.de Webmaster Forum auf die neue Version 2 des Vanilla Forums umgestellt. Diese wurde von den Entwicklern noch einmal komplett von Grund auf neu entwickelt und an die heutigen Bedürfnisse angepasst. Weiterlesen →

Eine eigene Online-Community

An dieser Stelle wollen wir euch in Zukunft auch interessante Software und Scripte vorstellen, die Euch dabei helfen noch schneller und bequemer Eure eigenen Seiten oder Communities zu erstellen. Anfangen wollen wir heute mit der PHP Community Software Marlida.

Mit der PHP-Software Marlida kann kostengünstig und ohne grossen Aufwand eine eigene Online-Community erstellt werden, sei es eine regionale Community für Ihre Stadt/Region, eine Nischen-Community zu einem bestimmten Thema oder auch ein allgemeines Netzwerk.

Marlida Die zahlreichen Funktionen und benutzerfreundlichen AJAX-Elemente der Basissoftware bilden das Grundgerüst und machen Marlida zu einer der beliebtesten Community-Lösungen. Auch die zahlreichen Module lassen nichts zu wünschen übrig: Forum, Blogs, Gruppen, Chat, Dating, Eventkalender, Fotoalben, Marktplatz, News und viele mehr. Durch den modularen Aufbau lässt sich Marlida jederzeit erweitern und so an die individuelle Bedürfnisse der jeweiligen Community anpassen.

Installiert wird Marlida auf Ihrem Server/Webspace, benötigt wird lediglich PHP (in der Version 4 oder 5) sowie eine MySQL-Datenbank. Auf Wunsch kann die Installation und Einrichtung auch komplett vom Anbieter übernommen werden. Die Sourcecodes sind unverschlüsselt zugänglich, so dass mit PHP-Kenntnissen problemlos eigene Erweiterungen integriert werden können. Ansonsten lässt sich die eigene Community völlig ohne Programmierkenntnisse über den umfangreichen Adminbereich verwalten.

Online-Communities liegen im Trend: Die Mehrheit der deutschen Internetnutzer, genau 85 Prozent, sind bereits Mitglied in einem oder mehreren Social Networks. Dies besagt die aktuelle Studie 'Web 2.0 - Soziale Netzwerke' der PriceWaterhouseCoopers. Beliebt sind unter anderem auch sogenannte Nischen-Communities, also ein Social Network, welches sich auf eine Stadt/Region bezieht oder aber ein spezielles Thema behandelt (zum Beispiel Auto, Sport, Musik usw.). Dazu gehören aber auch firmeninterne Netzwerke oder eine eigene Community für Vereine und Clubs.

Dies ist ein Gastbeitrag von Patrick Brunner.