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

Externe Links markieren – CSS Quick-Tip

Externe Links markieren – CSS Quick-Tip
Von am
Kategorien: Allgemein

Auf vielen Seiten hängt externen Links das Attribut target="_blank" an, was bewirkt, dass sich diese Links in einem neuen Fenster oder Tab öffnen. Bis heute ist diese Vorgehenweise von den einen bejubelt und von den anderen verpöhnt, denn es gibt sowohl Vor- als auch Nachteile.

In diesem Artikel will ich Dir deshalb eine schöne Alternative dazu präsentieren. Wir werden einfach alle externen Links visuell von den internen unterscheiden.

Zunächst ist vielleicht interessant, warum die Verwendung von target="_blank" so umstritten ist. Auf der einen Seite steht der klare Vorteil, dass der Nutzer so unsere Seite nicht so schnell verlässt. Wenn ein Besucher auf einen externen Link klickt und ihm der externe Inhalt gefällt, ist die Wahrscheinlichkeit, dass er zurück auf unsere Seite kommt, sehr gering. Wurde die externe Seite jedoch in einem neuen Fenster geöffnet, kehrt der Nutzer automatisch wieder auf unsere Seite zurück, wenn er die externe Seite schließt. Artikel weiterlesen

Nahtlose Parkett-Textur in Photoshop erstellen

Nahtlose Parkett-Textur in Photoshop erstellen
Von am
Kategorien: Photoshop, Tutorials

Vor kurzem bin ich umgezogen. Was hat das mit diesem Artikel zu tun? Nun ja, ich habe in der neuen Wohnung einen PVC-Boden in Parkett-Optik verlegt und das hat mich zu diesem Artikel inspiriert. Überhaupt ist ein Umzug eine geniale Quelle der Inspiration — die neue Stadt, die neue Umgebung — all diese Eindrücke haben mir viele Ideen für neue Artikel und Projekte gegeben, ich werde also viel zu tun haben.

Nun aber zurück zum Thema. In diesem Artikel zeige ich Dir, wie man mit Photoshop eine nahtlos kachelbare Parkett-Textur erstellt.

Wir beginnen mit einem neuen Dokument, die Größe ist hier egal. Ich habe mich deshalb für das Standard-Format von Photoshop entschieden. Den Hintergrund füllen wir mit weiß.

Als nächstes färbe ich auf einer neuen Ebene einen horizontalen Streifen mit schwarzer Farbe. Eigentlich ist die Farbe egal, wir verwenden diese Ebene bloß als virtuelle Schnittvorlage. Drücken wir mit gehaltener Strg-Taste auf die Ebene, erhalten wir eine Auswahl in Form der Ebene. Diese werden wir später verwenden, um aus einer Holz-Textur Planken auszuschneiden.

Es ist wichtig, dass der schwarze Bereich genau so Breit wie das Dokument ist, nur so lässt sich die Textur hinterher lückenlos kacheln. Artikel weiterlesen

Planung, Dokumentation und Veröffentlichung – Typo3: Extension selbst erstellen

Planung, Dokumentation und Veröffentlichung – Typo3: Extension selbst erstellen
Von am
Kategorien: Content Management Systeme, PHP, Programmieren, Tutorials, Typo3

In diesem Artikel zeige ich Dir an einem konkreten Beispiel, wie man eine Typo3-Extension von Anfang an entwickelt. Am Ende dieses Artikels hast Du eine Extension, die deine neuesten Tweets auf Deiner Seite darstellt.

Dieser Artikel baut auf den ersten vier Teilen der Artikelserie »Typo3: Extension selbst erstellen« auf, Du solltest also vielleicht vorher die ersten Artikel der Serie lesen! Artikel weiterlesen

Grunge Apocalypse – Typografie-Wallpaper in Photoshop erstellen

Grunge Apocalypse – Typografie-Wallpaper in Photoshop erstellen
Von am
Kategorien: Photoshop, Tutorials

Ich habe neulich irgendwo ein Produktdesign gesehen und war von der Typografie absolut begeistert. Das hat mich dazu inspiriert, diesen Artikel zu schreiben.

Oben siehst Du schon das Endergebnis dieses Tutorials, so oder so ähnlich kann Dein Resultat aussehen. Ich zeige dir insbesondere, wie du Text mit ein paar Grunge-Brushes aufwerten oder verändern kannst. Also viel Spaß!

Wir beginnen mit einem kleinen Ausflug auf eine meiner Lieblings-Seiten für kostenlose Schriftarten, nämlich dafont.com. Hier suchen wir uns eine schöne Stencil-Schriftart aus, die wir für unsere Typografie verwenden wollen. Ich habe für euch schon fünf verschiedene Schriften ausgewählt, die ihr benutzen könnt, ich habe jedenfalls Disparador Stencil benutzt. Artikel weiterlesen

Lokalisierung und FlexForms – Typo3: Extension selbst erstellen

Lokalisierung und FlexForms – Typo3: Extension selbst erstellen
Von am
Kategorien: Content Management Systeme, PHP, Programmieren, Tutorials, Typo3

Unsere Extension bietet seit dem letzten Teil der Artikelserie schon eine recht gute Konfiguration über TypoScript. In diesem Artikel will ich dir zeigen, wie du dem Nutzer die Möglichkeit gebt, direkt beim Einfügen des Plugins Einstellungen zu definieren. Dazu benutzen wir FlexForms.

Außerdem lernst du, wie man die Extension in mehreren Sprachen anbieten kann. Artikel weiterlesen

Kreuzworträtsel selbst erstellen mit XWords

Kreuzworträtsel selbst erstellen mit XWords
Von am
Kategorien: Arbeit, Inspiration, JavaScript, jQuery, Programmieren

Den heutigen Artikel möchte ich gerne Nutzen, um euch mein neuestes Projekt, den Kreuzworträtsel-Generator XWords vorzustellen. Damit könnt ihr direkt im Browser eigene Kreuzworträtsel erstellen.

Momentan befindet sich XWords noch in einer frühen Alpha-Version, leider sind noch nicht alle geplanten Funktionen, wie zum Beispiel das Teilen von Kreuzworträtseln auf Facebook oder das Lösen des Rätsels direkt im Browser, umgesetzt. Ich habe mich aber trotzdem dafür entschieden, euch das Zwischenergebnis schon einmal zu präsentieren. Artikel weiterlesen

Photoshop CS6 – Finale Version nun verfügbar

Photoshop CS6 – Finale Version nun verfügbar
Von am
Kategorien: Photoshop

Bisher war Photoshop CS6 nur als öffentliche Vorserienversion verfügbar. Nun hat Hersteller eine endgültige Fassung der Bildbearbeitungssoftware auf den Markt gebracht. Es wurden diverse Besserungen an der Software vorgenommen, die von der Retuschetechnik bis hin zu den Verzerrungskorrekturen reichen.

Durch mehrere neue Filter werden dir neue gestalterischen Möglichkeiten in Photoshop CS6 ermöglicht. So kannst du Kissen- und tonnenförmige Verzerrungen in Weitwinkel- und Fisheye-Aufnahmen deutlich besser entfernen. Dabei bleibt es dir selber überlassen, ob du dies automatisch auf Basis der Kamera- beziehungsweise Objektivdaten oder fein gesteuert per Hand vornehmen möchtest. Ein weiteres neues Feature ist die Weichzeichnergalerie, mit der du Unschärfe um Hauptmotive herum oder eine Weichzeichnung mit Miniatureffekt erzeugen kannst. Es werden dabei auf Wunsch ansehnliche Unschärfe-Effekte errechnet. Artikel weiterlesen

Typografie-Wallpaper in Photoshop erstellen

Typografie-Wallpaper in Photoshop erstellen
Von am
Kategorien: Photoshop, Tutorials

Bisher habe ich die Typografie in Photoshop meist ziemlich stiefmütterlich behandelt, deshalb werde ich nun mal wieder einen Typografie-Effekt präsentieren.

Wir starten mit einem Dokument in beliebiger Größe, ich habe mich zum Beispiel für 1920×1080 Pixel entschieden, damit ich das Ergebnis hinterher als Wallpaper nutzen kann. Artikel weiterlesen

Ajax-OnePage – Inhalt richtig per Ajax nachladen

Ajax-OnePage – Inhalt richtig per Ajax nachladen
Von am
Kategorien: JavaScript, jQuery, PHP, Programmieren, Tutorials

Immer wieder stolpere ich im Netz über Ajax-OnePages, also Seiten, bei denen, sobald man auf einen internen Link klickt, der gewünschte Inhalt per Ajax nachgeladen wird. Dadurch werden oft interessante Animationen, wie zum Beispiel Diashow-Übergänge oder Ähnliches möglich. Leider führt das Nachladen von Inhalten per Ajax, wenn man es nicht richtig macht, zu einer riesigen Katastrophe: keine Suchmaschine indiziert den nachgeladenen Inhalt und ohne JavaScript wird die Seite gänzlich unbrauchbar für den Nutzer.

In diesem Artikel will ich deshalb zeigen, wie man eine Ajax-OnePage richtig umsetzt und die zahlreichen Stolpersteine umgeht.

Der Schlüssel zum Erfolg liegt im Progressive Enhancement. Ohne JavaScript und Ajax funktioniert die Seite ganz normal, erst mit dem JavaScript kommen Animationen und OnePage-Charakteristika hinzu. So ist die Seite für jeden nutzbar und auch Suchmaschinen können den gesamten Inhalt indizieren. Artikel weiterlesen

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8