picxl.de » Layout

Das Webstandard Weihnachtsgewinnspiel

Daniel Weihmann — Sat, 24 Dec 2011 14:30:53 +0000

Im CSS3 Adventskalender 2011 des Webstandard-Blogs wurde die Weihnachtszeit mit ganz vielen Informationen rund um spannende CSS3-Techniken versüßt. Ein Adventskalender endet üblicherweise am Tag 24 mit einem kleinen Highlight.
Im Webstandard-Blog ist dies Das große Weihnachtsgewinnspiel, bei dem eine ganze Reihe Bücher vom Galileo-Verlag, vom Verlag Addison-Wesley sowie von O’Reilly unter’s Volk gebarcht werden. Außerdem warten 3 Jahresabonemments der Websiteboosting auf ihre Gewinner.

Im CSS Adventskalender ging es die vergangenen Tage unter anderem um:

CSS Transform und Transition
CSS3-Keyframe-Animationen
CSS Media Queries
CSS3 Pattern mit Linear-Gradient
CSS3 Transform
CSS3 Count – HTML Elemente nummerieren
bis hin zu einen Ausblick auf CSS4

Mein persönliches Sahnestück hierbei: Das Auf- und Zuklappen von Menüs, dem CSS3 Toggle-Effect.

Noch bis zum 8. Januar 2012 kann man in den Lostopf gelangen. Wie? Steht alles im Webstandards-Blog von Heiko Stiegert.

CSS 3.0 Maker

Daniel Weihmann — Sun, 20 Feb 2011 14:37:34 +0000

Die (neue) schöne Welt des CCS3 und ihre (fast) unendlichen Möglichkeiten bei der Gestaltung von Webseiten…
Einige Browser unterstützen dabei alle CCS3-Eigenschaften, andere zum Teil und manch ältere Browser werden hierdurch völlig überfordert. Welcher Browser in welcher Version die bei CSS 3.0 Maker generierten Eigenschaften verarbeiten kann, wird angezeigt. Selbst der alte Internet Explorer in der Version 6 kann zumindest mit @Font-Face umgehen. Wobei CSS-Animationen derzeit nur für die neusten Chrome- und Safari-Versionen vorgesehen sind.

Das wichtigste ist aber sicherlich der sofort verwendbare CSS-Code, dessen Eigenschaften mit Schiebereglern und Auswahltboxen in sekundenschnelle den eigenen Bedürfnissen angepasst werden können.

Der CSS 3.0 Maker hinft beim Erstellen der Code-Bausteine für:

Border-Radius (abgerundete Ecken)
Gradient (Farbverläufe)
CSS-Transform, Transition und Animation
RGBA (Farbtransparenzen)
Text-Shadow und Box-Shadow
Text-Rotation
und @Font-Face zum Einbinden eigener Schriften

Dieser CSS3-Online-Generator wird mich sicher über lange Zeit bei meinen CSS-Arbeiten begleiten.

Online-Generatoren für’s Web

Daniel Weihmann — Mon, 23 Nov 2009 20:30:16 +0000

Ein großer Freund von Blog-Beiträgen wie "Die besten 10 dies" oder "100 unverzichtbare das" gehören eigentlich nicht zu meinen favorisierten Feed-Links, die mich zum Klicken animieren. Heute stieß ich allerdings auf über 55 Online-Generatoren für Webdesigner, die mir nicht alle unbekannt, aber so zusammengefasst noch nicht unter gekommen sind. Vorgestellt werden mehrere Generatoren für Webseiten-Hintergründe, Ajax-Ladebalken und Web 2.0-Badges. Button- und Logo-Maker, Chart- und Favicon-Generatoren sowie eine große Auswahl an Farbwählern und Farbpaletten. CSS-Menüs, CSS-Code-Generatoren und einige Formular-Ersteller runden das umfangreiche Verzeichnis ab.

Der Balkhis-Weblog informiert seine Leserschaft zu den Themengebieten WordPress-Templates, SEO, Twitter und vielem mehr. Den englischsprachigen Blog von Syed Balkhi werde ich nun sicher häufiger Besuchen und seine Webdesign-Ressource näher unter die Lupe nehmen.

Aktuelle Feed-Meldungen aus Balkhis-Welt:

Balkhis – Vision for Success: Balkhis Vision of Success – Resource for webmasters to assist them into maximizing their revenue.

My new site will cure your boredom

How One Extra Step in Customer Service Can Keep you from looking like a total Dumbass

The coupons experiment � New addition to the WPBeginner Network

I launched a new site *WPBeginner WordPress Gallery*

Welcome to Facebook Domination (My Projections)

BuySellAds Review

How to Get your Site Featured in Fast Company Magazine

Two of My Latest Presentations at WordCamps

Get your Free .com Domain with 1and1

The Good Ol� Newsletter Technique

Vom Foto zur Farbpalette

Daniel Weihmann — Wed, 15 Jul 2009 19:48:31 +0000

Das Online-Tool Colors Palette Generator extrahiert aus einem hoch geladenen bzw. per Web-URL ausgewähltem Bild, die am häufigsten auftetenden Farben und bildet daraus mehrere Farbpaletten. Diese reichen von einer helleren, über eine mittlere, bis hin zu einer dunklen Farbpalette mit je 7 Farbwerten. Eine Auswahl des vollständigen Farbbereichs wird ebenfalls zur Verfügung gestellt und dient, genau wie die 3 bereits erwähnten, als Grundlage der Gestaltung einer Webseite.

Das Ergebnis lässt sich als CSS- und als ACO-Datei zur weiteren Verarbeitung in Photoshop speichern. Ich finde das Online-Tool äußerst hilfreich bei der Webseiten-Gestaltung, da man hiermit aus einem potentiellen Header-Image oder einem vorgegebenen Logo die passende Farbstruktur einer Webseite erstellt bekommt.

Dynamic Internet

Daniel Weihmann — Tue, 19 May 2009 11:29:12 +0000

Das Thema WordPress steht bei Dynamic Internet ganz klar im Mittelpunkt. Und da die Arbeit mit WordPress ohne (X)HTML, CSS und etwas PHP nicht funktioniert, wird dies in Form von Tutorials sowie Tipps & Tricks in vielen Beiträgen verständlich beschrieben.
Standardkonformes Webdesign und der Umgang mit dem Framework YAML runden das Weblog inhaltlich ab.

Die selbst erstellten WordPress-Themes YAML-Coffee-Theme und das YAML-Green-Theme dürften vielen bekannt sein und bieten sich nicht nur für Einsteiger in das Geflecht aus YAML und WordPress an. Sehr ausführlich – einschließlich Video – wird auf die Einstellmöglichkeiten eingegangen und einige Tipps mit auf dem Weg gegeben. Die Themes sind unter der CC-A 2.0-Lizenz veröffentlicht und können somit privat und kommerziell verwendet werden.

Die Tipps & Tricks zum Erstellen eines eigenen WordPress-Themes sollten für alle, die sich damit befassen, zum Pflichtprogramm gehören. Das Tutorial beschäftigt sich in mehreren Abschnitten mit dem "Wie wird aus einer HTML-Seite ein Theme?" und gibt neben Code-Bausteinen und PHP-Funktionen auch zahlreiche CSS-Formatierungen mit auf den Designer-Weg.

Aktuell gibt es die folgenden neuen Beiträge auf Dynamic Internet und können dort vollständig gelesen und kommentiert werden:

dynamicinternet: Wir machen Ihr Web dynamisch!

Die TwentyEleven Navigation mit Social Icons erweitern

In diesem kleinen Tutorial wollen wir der Navigation unser RSS Feed, einen Link zur Twitterseite und zu unserem Facebook Profil als Icons hinzufügen. Diesmal ohne eine Zeile Code zu schreiben. Die WordPress Menüs bringen alles dafür mit. Zuerst gehen wir ins Backend zu Design-> Menü und schalten die CSS Klassen an. Dazu klicken wir auf [...]

Nebenwirkungen von WordPress 3.2

WordPress 3.2 ist raus und damit haben sich die Mindestvoraussetzungen der PHP-Version auf 5.2.4 erhöht. Ein begrüßenswerter Schritt. Damit einher gehend haben die Entwickler auch gleich mal bei diversen Klassen (ich bin nicht jede durchgegangen) die alten Konstruktormethoden gefeuert. Um so erstaunlicher, da sie doch sonst so auf Abwärtskompatiblität achten. Erweitert ein Plugin oder Theme [...]

WordPress: Videos im Textwidget

Gestern kam die Frage im Xtreme Theme Supportforum: Wie bekomme ich Videos in einem Textwidget eingebunden? In der functions.php des Themes schreiben wir: add_filter( ‘widget_text’, array( $wp_embed, ‘run_shortcode’ ), 8 ); add_filter( ‘widget_text’, array( $wp_embed, ‘autoembed’), 8 ); Danach braucht man im Textwidget nur die URL des Videos hineinkopieren und schon wird es angezeigt. Adobe [...]

Nächste Woche Xtreme One 1.2

Wenn alles gut geht, werden wir am kommenden Montag Version 1.2 des WordPress Framework Xtreme One veröffentlichen. Und wie bei jedem Release von uns wird es Features geben, die kein anderes Theme/Framework zu bieten hat: Jedes Childtheme verwaltet jetzt seine eigenen Optionen inclusive der Widgeteinstellungen. Das bedeutet für den Nutzer, daß er zwischen verschiedenen Childthemes [...]

Post Formats � was ist der richtige Weg?

Die seit WordPress Version 3.1 eingeführten Post Formats erfreuen sich wohl zunehmender Beliebtheit. Dabei stellt sich eine Frage: Wie implementiert man die am besten? Der mit Verlaub gesagt größte Mist ist im Theme TwentyTen zu finden. Der Loop ist vollkommen unübersichtlich, unterstützt nur 2 Formate (gallery, aside) und rattert bei jeden Aufruf die Schleife durch, [...]

WordPress Artikel-Datum

In älteren Themes sieht man noch oft in den Templatedateien die Funktion the_time( ‘j. F Y’ ) zum Ausgeben des Artikeldatums. Das Problem hierbei ist, daß das Datumsformat hardcoded ist. Irgendwann wurde in WordPress (ich weiß jetzt die Version nicht) im Backend unter Einstellungen->Allgemein die Auswahl des Datumsformats um mehrere Möglichkeiten erweitert. Somit konnte man [...]

WordPress post_class erweitern

Die WordPress-Funktion post_class() dürfte allgemein bekannt sein. Leider gleich komplett mit dem zugehörigen class-Attribut. Um post_class() zu manipulieren, gibt es einen Filter, post_class. Dazu schreibt man eine kleine Funktion: function my_post_class( $classes ) { $classes[] = ‘meine_eigene_klasse’; return $classes; } add_filter( ‘post_class’, ‘my_post_class’ ); Dieser Filter wirkt natürlich global. Überall, wo die Funktion post_class() aufgrufen [...]

Warum ein WordPress Theme niemals Daten speichern sollte

Ich arbeite gerade an der nächsten Version von Xtreme One. Die neuen Post Formats sind ein Thema, zu dem ich mir Gedanken mache. Wie integriert man diese? Sollte es ein Feature sein, welches das Framework mitbringt oder ist das eher eine Sache für ein Childtheme? Ich bin mir im Augenblick nicht sicher. Bei diesen Überlegungen [...]

Xtreme One goes HTML5

Das Xtreme One WordPress Framework ist ja noch recht jung. Trotzdem bietet es einige Features, die kein anderes WordPress Framework vorweisen kann. Damit das auch so bleibt, entwickeln wir es ständig weiter. Eine sehr spannende Sache läuft hier lokal in einer Testversion: die Ausgabe als HTML5. Im Adminbereich von Xtreme One gibt es eine Checkbox [...]

Making of xtreme-theme.com

Wir erhielten nach dem internationalen Launch von Xtreme One WordPress Framework ein paar Anfragen, wie wir die Seiten realisiert haben und ob wir Sprachplugins verwendet haben. Also mal der Reihe nach. Xtreme-theme.com ist eine WordPress Multisite Installation und das Supportforum ist ein vBulletin 4.0 Forum, welches sich in einem eigenen Verzeichnis befindet und unter der [...]

ColorBlender

Daniel Weihmann — Sun, 23 Mar 2008 18:24:59 +0000

Die Frage, welche Farbe wie mit einer anderen wirkt und welche Farben am besten zusammen passen, lässt sich mit diesem kleinen Webwerkzeug recht schnell beantworten. Per Schieberegler lassen sich die Werte für rot, grün und blau verändern und selbst die Auswahl einer Farbvariation zur gewählten Farbe lässt sich anpassen. Eine Farbkomposition für einen Webauftritt bzw. für das Grundlayout einer Webseite ist so schnell erstellt.

Ein von ColorBlender-Nutzern erstellter Katalog verschiedenster Farbpaletten zeigt eine unüberschaubare Masse an Farbvarianten, die so sich so direkt für eigene Projekte einsetzen lassen (wenn man mal gar keine Vorstellung oder sich einfach inspirieren lassen möchte). Zur Weiterverarbeitung (z.B. in Photoshop) steht eine entsprechende Downloadmöglichkeit als ACT- oder ESP-Datei zur Verfügung.

Farbkombinations-Tester

Daniel Weihmann — Tue, 19 Feb 2008 20:11:18 +0000

Colorcombos vereinfacht das Finden von Farbkombinationen für die eigenen (Web)-Projekte und stellt Entwicklern zum einen eine Plattform zum schnellen Überschauen passender Farbpaletten und zum anderen eine vielfältige Bibliothek mit Farb-Kombinationen bereit.
Der Combo-Tester zeigt sich hierbei als äußerst effektiv. Mit wenigen Mausklicks und der Angabe von hexadezimalen Farbwerten lassen sich sehr schnell erste Eindrücke über die getroffene Farbwahl treffen. Eine Schnellauswahl einer gespeicherten Vorlage hilft Unentschlossenen oder hilft bei der Suche nach einer passenden Kombination.

Die bereits erwähnte Farb-Bibliothek liefert seitenweise gespeicherte Farbschemas, natürlich immer gleich mit den passenden hexadezimalen Farbwerten, so dass auch ein direktes Übernehmen in das Webprojekt ohne Umweg über den Farbpicker erfolgen kann.

Mit Hilfe der "Color-Tags" lässt sich die Datenbank nach einer Wunschfarbe durchforsten und die eigene – oder eine beliebige andere Webseite – kann nach den dort verwendeten Farben abgefragt werden.
Das Online-Angebot wird durch englischsprachige Beiträge und News zum Thema Farben und Farbgestaltung abgerundet.

Für picxl.de ließ sich das folgende Farbschema ermitteln:

Web Designer Wall

Daniel Weihmann — Sat, 16 Feb 2008 10:02:23 +0000

Liebevoll gestalteter, englischsprachiger Blog, der inhaltlich die Themen Design- und Web-Trends, Layout- und Gestaltungs-Inspirationen sowie CSS und Photoshop-Tutorials aufgreift. Diese befassen sich zum überwiegenden Teil mit Techniken für Fortgeschrittene Anwender. Neben einer vernünftigen Auswahl der Howtos und einer übersichtlichen Erläuterung der einzelnen Schritte, steht oft auch eine zusätzliche Vorschau sowie ein Download der Beispiele zur Verfügung.

Die Kategorie Design Trends stellt Projekte und Ideen vor und im Bereich Allgemeines lassen sich News, Downloads, Technologien, Fonts und vieles mehr entdecken.

Die aktuellsten Beiträge auf Web Designer Wall:

Web Designer Wall – Design Trends and Tutorials: A wall of design ideas, web trends, and tutorials.

CSS3 Image Styles � Part 2

Previously I wrote two tutorials on how to style the image element with CSS3 inset box-shadow and border-radius. The trick is to wrap the image with a span tag and apply the image as background-image. However, I recently ran into a problem with that trick while designing the PhotoTouch theme. The issue is that the [...]

Advertise here with BSA

UPrinting Business Card Giveaways

This Friday giveaway is sponsored by UPrinting, a shop that provides a wide range of online printing services. We are giving away 3 sets of 250 die-cut business card printing to 3 winners. Each winner will receive a set of 250 business card printing with free shipping. To enter this contest, all you have to [...]

Advertise here with BSA

Responsive Design in 3 Steps

Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, check out the list of responsive sites that I recently posted. To newbies, responsive design might sound a bit complicated, but it is actually simpler than you think. To help you quickly get started with responsive design, [...]

Advertise here with BSA

Despositphotos Giveaways

As mentioned last week, I will be giving away some goodies in December. So here is the first giveaway sponsored by Depositphotos stock photos. Depositphotos is giving away $50 credit to 5 readers on Web Designer Wall. Hurry, this contest ends in two weeks on Dec 21, 2011. If you need stock photos for your [...]

Advertise here with BSA

MightyDeals is Giving an iPhone 4S

Can you believe it is December already? For the joy of December, I’m going to giveaway some goodies to you. The first nice one came across is the iPhone 4S (unlocked model) giveaway from MightyDeals, who gave away 2 iPod Nanos last year on the Wall. For your chance to win an iPhone or one [...]

Advertise here with BSA

FITC Logo Redesign Process by James White

At FITC Toronto in May of this year, Shawn Pucknell, FITC’s director approached James White to develop the creative for the following year’s event, FITC Toronto 2012. “I’ve spoken at FITC twice so far and being a huge fan of the event and the entire crew behind it, I jumped at the opportunity to work [...]

Advertise here with BSA

Another iPad2 Giveaway at Themify

Earlier this year I gave away an iPad2 to promote the buy 1 get 1 free WordPress theme deal on Themify.me. Now I’ve lowered the theme membership pricing: (you can get all WordPress Themes for just $69 with no recurring fee), I’m going to giveaway another iPad2. The contest is open to anyone. You can [...]

Advertise here with BSA

Mind Blowing Parallax Scrolling Sites

Video games often use parallax scrolling technique to create an illusion of depth by moving multiple layers of images at different speed. This technique can also be applied in web design. This post consists a list of mind blowing parallax scrolling sites, design tips, and resource tutorials. If you are considering to start a parallax [...]

Advertise here with BSA

Playing with SVG Design

After years of quarantine, the Scalable Vector Graphics is finally raising fame as a feature of HTML5 with full native browser support. Vlog.it, by Marco Rosella, is an experimental site launched last month to explore two aspects of SVG with interesting potential for the design of original interfaces: clipping paths and scalable 2D motion graphics. [...]

Advertise here with BSA

Inspiration: Fluid & Responsive Design

Responsive design all started with this article by Ethan Marcotte. Some people see it as a trend. But it is more than just a trend. It is a new design solution — it helps to resolve the design problems associated with the different resolutions and devices (desktop, laptop, tablet, and mobile). I’m going to share [...]

Advertise here with BSA

Smashing Magazine

Daniel Weihmann — Wed, 09 Jan 2008 19:11:24 +0000

Das englischsprachige Online-Magazin der Macher von Dr. Web stellt, genau wie sein deutsches Pendant, reichlich Informationen für Webdesigner und Layouter zur Verfügung. Hierbei wird jedoch nicht einfach eine Zweitverwertung der deutschen Inhalte geboten, sondern reichlich neues zu den Themen Grafik, Layout, Fonts, CSS, Templates, Webnews, Web 2.0 und noch vielen interessanten Neuigkeiten aus der Welt der Webworker.
Im "Best of the Month" wird, wie der Name schon verspricht, auf die Highlights des jeweiligen Monats eingegangen und vermittelt so einen komprimierten Überblick.

Aktuell gibt es auf Smashing-Magazine folgende Beiträge zu durchstöbern:

Smashing Magazine Feed:

How To Use Custom Post Types To Organize Online Marketing Campaigns

Freebie: St. Valentine’s Day Icon Set (10 PNG/PSD Icons)

Ten Things To Think About When Designing Your iPad App

Desktop Wallpaper Calendar: February 2012

The Future Of Screen Typography Is In Your Hands

Limiting The Visibility Of WordPress Posts Via Usernames

The UX Research Plan That Stakeholders Love

How To Deliver Exceptional Client Service

What Successful Products Teach Us About Web Design

Introduction To Linux Commands

WordPress – Theme Viewer

Daniel Weihmann — Thu, 29 Nov 2007 15:03:41 +0000

Eine täglich wachsende Theme-Datenbank für WordPress, die bereits über 1.000 fertige Vorlagen umfasst, steht hier zum Download bereit. Es kann durch die Lyout-Vorlagen geblättert oder per Suchoptionen bzw. Filter beispielsweise nach Spaltenanzahl, Farben usw. die Auswahl eingeschränkt werden. Alle Vorlagen werden als vergrößerbare Thumbnails vorgestellt und neben einer Beschreibung sowie einem Testlauf, gibt es natürlich auch eine direkte Download-Möglichkeit. Alle angeboten Themes beinhalten die PHP- und CSS-Dateien sowie Bilder und eventuell auch weitere Daten.

Der produktive Einsatz eines vorgefertigten Templates ist denkbar einfach. Die Dateien werden ins eigene Themes-Verzeichnis (/wp-content/themes/) auf dem Webserver geladen und können anschließend im WordPress-Backend unter Themes aktiviert werden. Ein Blick in eine meist vorhandene Readme-Datei schadet sicherlich nicht …

Aktuelle Templates und Neuigkeiten: