Advitum.de auf Google+

CSS3-Transformationen mit Matrizen – flexibler geht nicht

CSS3-Transformationen mit Matrizen – flexibler geht nicht
Von am
Kategorien: CSS, Programmieren, Tipps

Als leidenschaftlicher Transformations-Nutzer habe ich diese Woche einen großen Schrecken bekommen, als plötzlich die CSS-Transformation skew nicht mehr funktionierte. Des Rätsels Lösung: Skew wurde aus dem CSS-Transform-Draft entfernt und wird deshalb in Firefox 14 plötzlich nicht mehr unterstützt. Doof nur, dass viele visuelle Tricks, die im Internet verwendet werden, ohne das Scheren eines Elementes nicht mehr funktionieren.

Auf meiner Suche nach einer Alternative stieß ich darauf, dass man in der Transformation auch direkt mit einer Matrix vollziehen kann. Leider ist das nicht ganz so einfach wie bisher, aber wenn man weiß wie es geht, ist die Transformations-Matrix sehr flexibel. Ich zeige Dir in diesem Artikel die gängigsten Transformation, die man mit einer Matrix vollziehen kann. Artikel weiterlesen

Designen einer Scrollbar – so geht es richtig

Designen einer Scrollbar – so geht es richtig
Von am
Kategorien: CSS, Design, JavaScript, jQuery, Tutorials

Am Anfang war der Frame. Und mit dem Frame kamen die Scollbars innerhalb der Seite. Und der Programmierer sah, dass es gut war.

Jahrelang war auch alles gut, bis dann schließlich die Designer die unendlichen Weiten des Webs unsicher machten. Alles wollten die Designer verändern, alles sollte schöner werden. Doch an Scrollbars bissen sie sich die Zähne aus. Scollbars ließen sich leider nicht ohne weiteres anpassen.

In diesem Artikel zeige ich, wie man trotzdem, übrigens ganz ohne iFrames, Scollbars erstellen kann, die auch noch toll aussehen. Artikel weiterlesen

Men in Black 3 Filmposter erstellen – Photoshop Tutorial

Men in Black 3 Filmposter erstellen – Photoshop Tutorial
Von am
Kategorien: Design, Photoshop, Tutorials

Immer wenn mir die nötige Inspiration fehlt, um einen Artikel zu schreiben, gehe ich ins Kino. Naja, so ganz stimmt das nicht, dann wäre ich längst pleite, aber ab und an mach ich das wirklich. Denn im Kino sehe ich immer tolle Filmplakate für noch tollere Filme und sehe mich berufen, ein Photoshop Tutorial zu schreiben, um der Welt die Möglichkeit zu geben, das Poster mit eigenen Bildern nachzubauen. Diesmal sprang mir bei meinem Kinobesuch das Plakat des dritten Teils »Men in Black« ins Auge. Der Effekt ist sehr raffiniert und doch sehr einfach zu erreichen. Artikel weiterlesen

jQueryUI Slider auf feste Werte begrenzen

jQueryUI Slider auf feste Werte begrenzen
Von am
Kategorien: JavaScript, jQuery, Programmieren, Tipps

In meinem letzten Artikel habe ich gezeigt, wie man die jQueryUI-Silder auch auf dem iPad zum laufen bringen kann. Auf ähnliche Weise kann man die Slider-Funktion auch auf andere mobile Geräte portieren und mit der dritten Betaversion von jQuery Mobile halten intuitive und einfache Bedienung von Web-Apps weiter Einzug auf die Handys.

Das nehme ich zum Anlass, um einen weiteren Artikel über Slider zu schreiben, diesmal geht es aber darum, wie man einen Schieberegler auf feste Werte festlegen kann. Der Nutzer soll also nicht stufenlos Werte wählen, sondern nur zum Beispiel die Werte 0, 5, 10, 20, 100 und 150 wählen können. Standardmäßig ist diese Funktion nicht vorgesehen, deshalb muss man den normalen Slider etwas »aufbohren«. Artikel weiterlesen

Ajax-Scripts kinderleicht debuggen – jQuery Quick-Tip

Ajax-Scripts kinderleicht debuggen – jQuery Quick-Tip
Von am
Kategorien: JavaScript, jQuery, Programmieren, Quick-Tips, Tipps

Mit jQuery sind Ajax-Aufrufe wirklich kinderleicht. So kann man zum Beispiel ganz einfach auf folgende Weise Daten vom Server per Get-Request bekommen:

$.get('data.php', function(data) {
  //do something
});

In der Variable data steht dann die Antwort des Servers, im Normalfall also der Inhalt der Seite oder das, was vom PHP-Script ausgegeben wird. Artikel weiterlesen

Erweiterte Rahmen mit CSS3 – border-image – ein Gastbeitrag auf t3n.de

Erweiterte Rahmen mit CSS3 – border-image – ein Gastbeitrag auf t3n.de
Von am
Kategorien: CSS, Design, Photoshop, Tipps

Mit CSS3 wurden viele Webdesign-Träume wahr. Angefangen bei box-shadow für Schlagschatten, hört die lange Liste von neuen CSS-Eigenschaften auch nicht bei border-radius für runde Ecken auf. Eine weitere neue Eigenschaft, die ich erst vor kurzem entdeckte, die mir aber so hilfreich war wie keine zweite, ist die Eigenschaft border-image. Wie der Name schon vermuten lässt, kann man damit ganze Bilder als Rahmen definieren.

Diesen Artikel habe ich auf t3n.de veröffentlicht. Hier könnt ihr den ganzen Artikel lesen: Erweiterte Rahmen mit CSS3 – border-image Artikel weiterlesen

Automatische Bildskalierung mit PHP

Automatische Bildskalierung mit PHP
Von am
Kategorien: Arbeit, Design, PHP, Programmieren, Tipps

In vielen meiner Webanwendungen spielen Bilder verschiedenster Größe eine große Rolle. Auf Advitum und Weevo sind es meine Referenzen, auf abi12 vom Nutzer hoch geladene Bilder. Um die Bilder zu präsentieren, sollte man eine flexible Kontrolle über die Bildgröße haben.

Zeigt man per HTML Bilder an, kann man zwar die Größe als Attribute übergeben, allerdings sind nicht alle Browser gleich gut darin, die Bilder auf die gewünschte Größe zu reduzieren, was oft zu unschönen Ergebnissen führt. Außerdem werden die Bilder erst beim Clienten skaliert, also in voller Größe übermittelt. Besser wäre es, die Bilder schon auf dem Server zu skalieren, damit der Traffic reduziert und die Qualität der Skalierung nicht dem Zufall überlassen wird. Artikel weiterlesen

@font-face kann mehr, als man denkt – ein Gastartikel auf t3n.de

@font-face kann mehr, als man denkt – ein Gastartikel auf t3n.de
Von am
Kategorien: CSS, Design, Tipps

Nachdem der Artikel »CSS3-Buttons ohne Grafiken erstellen«, den ich für t3n geschrieben habe, dort so viel Anklang gefunden hat, wird jetzt ein weiterer Artikel von mit dort veröffentlicht. Ein Auszug:

@font-face kann mehr, als man denkt

Mittlerweile sollte jeder das Wunder namens @font-face benutzen oder zumindest davon gehört haben. Aber leider werden die Funktionen von @font-face noch nicht voll ausgenutzt. In diesem Artikel will ich zeigen, wie man Schriften am besten in das Projekt einbinden kann.

Ich verstehe nicht, warum auf FontSquirrel ein angeblich fertiges Kit angeboten wird, dass so viel falsch macht. Dabei ist es so einfach, @font-face richtig zu benutzen, wenn man erst einmal weiß, wie. Deshalb habe ich diesen Artikel geschrieben, damit @font-face Neulinge nicht den gleichen Fehler machen, wie ich und bestimmt auch viele andere. Artikel weiterlesen

Welches Content Management System nutzt ihr?

Welches Content Management System nutzt ihr?
Von am
Kategorien: Arbeit, Tipps

Ich als Coder benutze für meine eigene Seite kein Content Management System, weil ich die Seiten viel lieber selbst erstelle. Aber wenn ein Kunde gerne seine Seiten selbst mit Inhalt füllen will, ist ein Content Management System die beste Lösung. Die Frage ist aber, welches CMS man nutzen sollte.

Also frage ich euch: Welche Content Management Systeme werden bei euch verwendet und warum?

Natürlich will ich euch nicht vorenthalten, welche CMS ich liebe und welche nicht! Artikel weiterlesen

Aufzählungen & Listen – Webdesign liegt im Detail

Aufzählungen & Listen – Webdesign liegt im Detail
Von am
Kategorien: CSS, Design, Tipps, Tutorials

Beim Webdesign sind es oft die kleinen Details, die den Unterschied zwischen einem durchschnittlichen Design und einem außergewöhnlichen Design ausmachen. In diesem Artikel gehe ich auf Aufzählungen ein, deren Design leider viel zu oft vergessen oder vernachlässigt wird.

Im Grunde kann es so einfach sein, eine Internetseite mit ein wenig Arbeit an den Aufzählungen zu verbessern. Vielleicht werden solche Details nicht jedem Nutzer auffallen, aber wie schon gesagt, sind Details für ein Design sehr wichtig und können es verbessern. Artikel weiterlesen

  1. 1
  2. 2
  3. 3