Kategorien
Design HTML/CSS

CSS- und HTML-Vokabular: Wörterbücher für Anfänger und Vergessliche

Selbst als erfahrener Entwickler hat man nicht, wo man geht und steht, CSS-Vokabular vor Augen. Oder murmelst du etwa kontinuierlich CSS-Syntax vor dich hin? Sollte dem so sein, wundere dich nicht, wenn die Menschen beginnen, dich zu meiden. Hast du in letzter Zeit derlei Anzeichen bemerkt, weißt du ja jetzt, woran es liegen könnte. Schon gut, danke mir nicht.

Möglicherweise hilft dir das Projekt, das ich dir heute vorstellen möchte, den Anschein beginnenden Wahnsinns zu widerlegen. Also, anstelle CSS murmelnd durch die Straßen zu ziehen, bookmarke einfach das kleine Projekt „CSS Vokabular“ und mach den Kopf frei…

CSS Vocabulary: Not More To It
CSS Vokabular: Viel mehr gibt es nicht zu sehen

CSS Vokabular: Wissen, was was ist

Das kleine Helferlein namens CSS Vocabulary, das mit der Hilfe einiger engagierter Zeitgenossen inzwischen nicht nur in englischer, sondern auch in deutscher Sprache, sowie einigen weiteren, verfügbar ist, ist im Grunde komplett selbsterklärend. Es besteht aus nicht mehr als einem einzelnen Quelltext-Beispiel und und einer Sidebar mit Begriffen. Wählst du einen beliebigen Teil des Quelltextes per Klick aus, wird der dazu passende Begriff in der Sidebar farblich hervorgehoben.

Umgekehrt funktioniert es genau so. Klickst du auf einen Begriff in der Sidebar, werden die dazu passenden Code-Teile im Quelltext-Beispiel farblich hervor gehoben. Mehr gibt es nicht zu sehen.

CSS Vocabulary: Code Example
CSS Vocabulary: das Quelltext-Beispiel

Klar, CSS Vocabulary bringt dir nicht wirklich CSS bei. Aber, wenn es dir wenigstens manchmal so geht wie mir, dann wirst du an dir selbst bemerkt haben, dass die genauen Begrifflichkeiten im Kopf nicht immer sicher abrufbar sind. Das ist besonders dann ungünstig, wenn du gerade einen Text über CSS schreibst. Du weißt genau, was du schreiben wolltest, aber wie hieß jetzt dieser verflixte Begriff noch gleich genau? Mir passiert das auch gerne, wenn ich einen Style Guide dokumentiere. Da freue ich mich über eine schnelle unkomplizierte Nachschlagemöglichkeit wie CSS Vocabulary.

CSS Vocabulary: Sidebar
CSS Vocabulary: Sidebar

CSS Vocabulary ist ein Projekt der Finnen Ville Vanninen, Pasi Jokinen und Timo Moilanen, das inzwischen in einem größeren Projekt namens Vocabs aufgegangen ist. Neben CSS findest du auf Vocabs einen in gleicher Weise aufbereiteten Wortschatz für HTML, eben das HTML Vocabulary.

Vocabs kann völlig frei unter einer MIT-Lizenz genutzt werden und ist zuhause bei Workflower.fi. 

(Der Beitrag erschien zuerst im Sommer 2014 und wird seitdem aktuell gehalten. Das letzte Update erfolgte im April 2019.)

Beitragsbild: MikesPhotos auf Pixabay

Kategorien
Design HTML/CSS

SVG & CSS: Was geht, was nicht in der Gestaltung per Stylesheet

SVG hat sich als Format für Vektorgrafiken im Browser etabliert. Grafikprogramme wie Adobes Illustrator unterstützen das Speichern in diesem Format und moderne Browser können sie problemlos darstellen. Da SVG-Grafiken wie auch HTML-Dokumente über eine Auszeichnungssprache erstellt werden, ist die Erstellung und Bearbeitung per Texteditor möglich. Für die Gestaltung von SVG-Grafiken kann man zudem auf Stylesheets zurückgreifen. Was den Einsatz von CSS betrifft, gibt es neben vielen Gemeinsamkeiten zu HTML jedoch auch einige Unterschiede zu beachten.

Kategorien
HTML/CSS Webdesign

Gitter voll im Griff: Firefox mit neuem Layout-Panel für CSS-Grids

Ordentliche, auf Raster beziehungsweise Gitter basierende Layouts waren bislang nur auf umständlichen Wegen möglich. Die neuen CSS-Grids, die in den neueren Versionen der bekannten Browser seit einiger Zeit möglich sind, erlauben endlich solche Layouts. Und im Firefox gibt es – zumindest in der Nightly-Version – ein neues Layout-Panel im Inspektor der Entwicklerwerkzeuge, welches dir den Umgang mit CSS-Grids vereinfacht.

Mit CSS-Grids zu besseren Layouts

Das neue Grid-Modell macht es endlich möglich, komplexe Layouts zu entwickeln, die auf der Grundlage eines selbst definierten Gitters bestehen. Dazu legst du per CSS Spalten und Reihen fest, bestimmst Abstände und Breiten. Anschließend werden beliebige Elemente innerhalb des Gitters platziert.

body {
  display: grid;
  grid-template-rows: 200px 1fr 100px;
  grid-template-columns: 25% 25% 25% 25%;
}

Für ein Grid-Layout muss die „display“-Eigenschaft zunächst per „grid“ auf das neue Layoutmodell umgestellt werden. Anschließend werden per „grid-template-rows“ und „grid-template-columns“ die Reihen und Spalten des Gitters definiert. Dabei sind absolute und relative Angaben möglich.

Für jede Reihe beziehungsweise Spalte wird ein Wert übergeben. Die Kombination von absoluten und relativen Werten ist möglich. So können wie im Beispiel Reihen feste Werte besitzen. Mit der Einheit „fr“ für „fraction“ lassen sich flexible Breiten und Höhen herstellen. Dabei füllt die Einheit „fr“ den freien Raum innerhalb des Gitters aus.

Zusätzlich kannst du per „grid-row-gap“ und „grid-column-gap“ Abstände zwischen den einzelnen Gitterzellen festlegen. So hast du die Möglichkeit, sehr individuelle und flexible Raster für deine Weblayouts zu entwickeln.

Ist das Raster festgelegt, müssen die einzelnen Inhalte platziert werden. Dazu wird angegeben, in welchen Zellen des Gitters der Inhalt positioniert werden soll.

header {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}

Mit „grid-column-start“ und „grid-column-end“ werden die Start- und Endpunkte innerhalb des Rasters angegeben. Analog dazu gibt es „grid-row-start“ und „grid-row-end“. Dank der vier Eigenschaften ergeben sich die Zellen, in denen das jeweilige Element stehen soll.

Das Prinzip des CSS-Grids ist also recht einfach. Die Auszeichnung ist hingegen nicht unbedingt leicht nachvollziehbar – gerade bei komplexen Rastern. Hier kommt das neue Layout-Panel des Inspektors von Firefox ins Spiel.

Neues Layout-Panel zeigt Raster

Das neue Panel sorgt zunächst einmal dafür, dass alle auf einer Seite definierten Raster dargestellt werden. Während das eigentliche Raster auf einer Website ja nicht sichtbar ist, stellt Firefox die einzelnen Spalten und Zeilen sowie gegebenenfalls die Zwischenräume dar, sodass es Entwickler einfacher haben, sich innerhalb des Gitters zurechtzufinden.

Das Layout-Panel erreichst du, indem du die Entwicklerwerkzeuge aufrufst und in den Inspektor wechselst. Dort findest du das Layout-Panel. Für jedes Grid-Element wird ein Button eingeblendet, der das für das jeweilige Element hinterlegte Raster einblendet. Im Browserfenster werden Rasterlinien über das Layout gelegt, die das von dir per CSS-Grids definierte Gitter hervorheben.

Zusätzlich wird das Raster auch im Panel selbst angezeigt. Bewegst du die Maus über dieses Raster, wird die entsprechende Zelle sowohl im Inspektor als auch im Browserfenster hervorgehoben.

Das Einblenden von Zeilennummern erleichtert dir zudem, einzelne Rasterzellen ausfindig zu machen. Die unendlichen Gitterlinien, die du optional dazuschalten kannst, führen die Linien des Rasters auch jenseits des jeweiligen Grid-Elementes weiter. Das kann mal nützlich, mal störend sein, weshalb das Ein- und Ausblenden dieser Option sinnvoll ist.

Rasterbereiche benennen und darstellen

Mit der CSS-Eigenschaft „grid-areas“ hast du die Möglichkeit, Bereiche innerhalb deines Gitters zu benennen und somit zu einer Art Gruppe zusammenzufassen. Alle Zellen mit derselben Bezeichnung stellen somit eine Gruppe dar.

grid-template-areas:
  "header header header header"
  "nav content content content"
  "footer footer footer footer";

Über die Option „Display grid areas“ (ist in der aktuellen Nightly-Version noch nicht ins Deutsche übersetzt) werden dir diese Rasterbereiche im Browserfenster dargestellt. Dabei werden die einzelnen Bereiche durch eine dickere Linie im Gitter hervorgehoben. Zusätzlich wird die jeweilige Bezeichnung des Bereichs eingeblendet.

Bewegst du deine Maus im Layout-Panel über eine Gitterzelle, wird im Browser nicht nur die Zelle hervorgehoben, sondern auch der Bereich, dem die Zelle zugeordnet ist.

Transformierungen werden berücksichtigt

Dank der CSS-Eigenschaft „transform“ sind Drehungen, Skalierungen und Verzerrungen von Elementen möglich. Auch auf ein Gitter-Element lassen sich diese anwenden. Der Inspektor berücksichtigt alle per „transform“ gemachten Änderungen und passt das Gitter entsprechend an.

Das heißt, bei einem gedrehten Gitter-Element wird auch das Raster selbst mit gedreht.

Fazit

Das neue Layout-Panel im Inspektor von Firefox hilft dir dabei, deine Grid-Layouts besser zu verstehen und zu entwickeln. Die Hervorhebung der Gitterlinien und die Nummerierung helfen dabei, Elemente zu platzieren und einen visuellen Eindruck des Gitters zu bekommen.

Dabei werden alle Möglichkeiten wie Abstände zwischen den Rasterzellen und die Einteilung in Bereiche mit berücksichtigt. Insgesamt macht der neue Panel einen guten Eindruck. Dass sich das neue Grid-Layout durchsetzen wird, dürfte nur eine Frage der Zeit sein, weshalb diese neue Funktion sicher für viele Webentwickler eine große Erleichterung bei der Arbeit darstellen wird.

Wann es das neue Layout-Panel in den regulären Firefox schafft, steht noch offen. Aber wer schon einmal probieren möchte, kann sich die Nightly-Version herunterladen. Da es sich dabei um keine ausgereifte Version handelt, sollte man sie nur zu Entwicklungszwecken und die in einer Live-Umgebung nutzen.

Kategorien
Design Webdesign

Besser platzieren und transformieren dank verschachtelter SVGs

Das Erstellen von SVG-Grafiken ist eine recht unkomplizierte Sache. Wer HTML beherrscht, findet sich auch schnell in der SVG-Syntax zurecht. Allerdings gibt es einige kleine, aber durchaus relevante Unterschiede zwischen HTML und SVG, was die Positionierung von SVG-Formen betrifft. Denn diese werden grundsätzlich absolut innerhalb einer SVG-Zeichenfläche platziert.

So werden Formen in SVG-Grafiken platziert

Was die Positionierung von SVG-Elementen wie „<rect>“ oder „<circle>“ betrifft, gibt es schon bezüglich der Syntax einen großen Unterschied zu HTML. Denn während HTML-Elemente per CSS-Eigenschaften „left“ und „top“ platziert werden, lassen sich SVG-Elemente nur per „x“- und „y“-Attribute (bei Kreisen sind es die „cx“- und „cy“-Attribute) platzieren.

Während Farben und Konturen wie bei HTML per CSS gestaltet werden können, ist eine Positionierung per CSS im SVG-Format gar nicht möglich.

Der zweite Unterschied ist der, dass SVG-Formen grundsätzlich absolut innerhalb eines „<svg>“-Elementes platziert werden. Auch wenn es mit dem „<g>“-Element eine Möglichkeit gibt, Elemente zu gruppieren, so lässt sich dem „<g>“-Element selbst keine Position zuweisen.

Gerade bei komplexen Grafiken stellt dies schon mal ein Problem dar. Denn will man die Position einer Figur ändern, die möglicherweise aus dutzenden Einzelementen besteht, müssen die „x“- und „y“-Attribute sowie die anderen positionsbestimmenden Attribute wie „cx“, „cy“ und „d“ beim „<path>“-Element verändert werden.

Bei statischen Grafiken ist das Problem noch relativ einfach lösbar, indem man die Grafik in einem Zeichenprogramm wie Illustrator öffnet. Dort kannst du dann alles anpassen und wieder als SVG-Datei speichern.

Bei dynamischen Veränderungen, die zum Beispiel per JavaScript oder PHP berechnet werden, muss jedes einzelne neu zu platzierende Element einer Figur verändert werden. Und gerade beim „<path>“-Element mit seinem komplexen „d“-Attribut ist das durchaus eine Herausforderung.

SVGs verschachteln und doch relativ platzieren

Es gibt aber einen Weg, wie man SVG-Formen doch relativ innerhalb einer SVG-Grafik platzieren kann. So erlaubt das SVG-Format nämlich das Verschachteln von SVG-Grafiken.

Innerhalb eines „<svg>“-Elementes darf nämlich ein weiteres „<svg>“-Element liegen. Zwar können die verschachtelten „<svg>“-Elemente selbst auch nur absolut platziert werden. Aber innerhalb einer Verschachtelung ist die absolute Platzierung auf das jeweilige Eltern-„<svg>“-Element begrenzt.

<svg width="750" height="500" style="background: gray">
  <svg x="200" y="200">
    <circle cx="50" cy="50" r="50" style="fill: red" />
  </svg>
  <circle cx="50" cy="50" r="50" style="fill: yellow" />
</svg>

Im Beispiel wird innerhalb und außerhalb einer verschachtelten SVG-Grafik ein Kreis gezeichnet. Die Kreise sind so platziert, dass sie jeweils an der linken oberen Ecke stehen. Da das verschachtelte „<svg>“-Element 200 Pixel vom linken und oberen Rand entfernt ist, wird der rote Kreis auch entsprechend 200 Pixel von beiden Rändern entfernt platziert.

Änderst du die „x“- und „y“-Attribute des zweiten „<svg>“-Elementes, wird auch die Platzierung aller darin enthaltenden Formen verändert.

Anders als das „<g>“-Element zum Gruppieren hast du mit verschachtelten „<svg>“-Elementen also die Möglichkeit, die Position mehrerer Formen gleichzeitig zu verändern.

Elemente transformieren

Die CSS-Eigenschaft „transform“ skaliert und dreht nicht nur HTML-Elemente, sondern auch SVG-Formen. Allerdings wird „transform“ im SVG-Kontext anders interpretiert als bei HTML.

Vor allem beim Drehen, also der „rotate()“-Funktion, macht sich das bemerkbar. Denn von HTML kennt man es, dass „rotate()“ dafür sorgt, dass Elemente sich um den eigenen Mittelpunkt drehen.

Im SVG-Format werden Elemente jedoch immer um die linke, obere Ecke der SVG-Zeichenfläche gedreht. Das macht es natürlich schwierig, Drehungen zu realisieren. Will man beispielsweise einen Text hochkant stellen, reicht es nicht, diesen um 90 Grad zu drehen. Auch die „x“- und „y“-Attribute müssen angepasst werden.

Denn ein Element, welches 200 Pixel von links und oben platziert und um 90 Grad gegen den Uhrzeigersinn gedreht wird, verschwindet gegebenenfalls nach oben aus der Zeichenfläche.

Allerdings kannst du dir auch hier verschachtelte SVG-Elemente zur Hilfe nehmen. Zwar erreichst du es nicht, dass Elemente sich um den eigenen Mittelpunkt drehen. Aber wenn du die zu drehenden Elemente links oben des verschachtelten „<svg>“-Elementes platzierst, ist die Anpassung der Position relativ einfach.

<svg width="750" height="500" style="background: gray">
  <svg x="100" y="100">
    <rect x="0" y="0" width="142" height="142" style="fill: yellow" />
    <rect x="50" y="-50" width="100" height="100" style="fill: black; transform: rotate(45deg)" />
  </svg>
</svg>

Im Beispiel werden innerhalb eines verschachtelten „<svg>“-Elementes zwei Rechtecke platziert. Während das erste ohne „transform“-Eigenschaft auskommt, wird das zweite Element dank dieser Eigenschaft und der „rotate()“-Funktion um 45 Grad gedreht.

Damit das zweite Rechteck dennoch mit der linken und oberen Position des ersten Rechtecks beginnt, müssen die „x“- und „y“-Attribute geändert werden. Ohne die Anpassung würde das zweite Rechteck um die linke obere Ecke des verschachtelten „<svg>“-Elementes nach links gedreht und zur Hälfte aus der Zeichenfläche herausragen.

Erschwerend kommt hinzu, dass die Positionierung abhängig ist von der Rotation. Denn das Koordinatensystem der gedrehten Form wird ebenfalls gedreht. Der Wert für „x“ basiert also nicht mehr auf der Horizontalen, sondern auf einer um 45 Grad gedrehten Achse.

Weiterer Vorteil verschachtelter SVGs

Es gibt noch einen weiteren Vorteil – oder zumindest etwas, was man beachten sollte. Über ein „<svg>“-Element lassen sich per CSS auch Farbe und Kontur zuweisen. Ist den Formen innerhalb dieser Zeichenfläche selbst keine Farbe oder Kontur zugewiesen, übernehmen sie alle das Aussehen des SVG-Elternelementes.

<svg width="750" height="500" style="background: gray">
  <svg x="100" y="100" style="fill: yellow; stroke: red">
    <rect x="0" y="0" width="142" height="142" />
    <rect x="100" y="-50" width="100" height="100" style="transform: rotate(45deg)" />
 </svg>
</svg>

So ist es also auch unkompliziert möglich, allen Elementen eines SVG-Zeichenfläche ein einheitliches Aussehen zu verpassen.

Kategorien
(Kostenlose) Services Essentials Freebies, Tools und Templates JavaScript & jQuery Programmierung

Dribbbox stellt Ihr Dribbble-Portfolio als Website dar, ganz ohne Aufwand

Viele Tools sind einfach. Aber wenige davon sind einfach gut. Dribbbox vom belgischen Designer Benjamin De Cock ist beides. Benjamin erstellte ein zeitgemäßes, responsives Portfolio-Design, das automatisch den Inhalt eines beliebigen Dribbble-Portfolios auslesen und sehr ansprechend darstellen kann. Das ist schon gut. Noch besser ist, die Lösung hosten Sie selber auf Ihrer eigenen Domain.

dribbboxcom

Dribbbox: Instant-Portfolio auf Basis von HTML, CSS und JavaScript

Dribbbox laden Sie frei als Zip-Archiv mit einem Gewicht von 50 kb herunter. Im entpackten Archiv finden Sie den Ordner app. Im obersten Level dieses Ordners findet sich die Datei config.js, welche es noch anzupassen gilt. Im Auslieferungszustand enthält sie natürlich noch die Konfigurationsdaten des Belgiers:

dribbbox.config = {

  dribbble_username : "bdc",
  short_description : "User interface and icon designer.",
  email_address     : "ben@deaxon.com"

}

Ersetzen Sie den Inhalt der drei Parameter mit Ihren Angaben. Danach laden Sie den kompletten Inhalt des Ordners app in einen beliebigen mit einer Domain oder Subdomain verbundenen Ordner Ihres Webspace hoch. Rufen Sie die Domain/Subdomain über einen Browser Ihrer Wahl auf. Ihr Dribbble-Portfolio sollte ohne weitere erforderliche Handgriffe zu sehen sein.

Dribbbox entfernt den gesamten Netzwerk-Overhead aus Ihrem Dribbble-Profil und zeigt ausschließlich die von Ihnen hochgeladene Arbeit. Auf diese Weise können Sie Ihr Portfolio quasi automatisch mit aus Dribbble speisen, ohne sich um potenziell kritische Kommentare oder sonstiges Beiwerk sorgen zu müssen.

Dass Dribbbox voll responsiv arbeitet, erwähnte ich bereits. Der schlanke Portfolio-Generator basiert ausschließlich auf HTML, CSS und JavaScript und beinhaltet auch alle erforderlichen Dateien. Es gibt keine externen Abhängigkeiten. Nachdem das System so in sich geschlossen ist, können Sie das Look & Feel Ihres Portfolios nach Belieben anpassen.

Wenn man unbedingt etwas zu kritisieren sucht, dann bietet sich höchstens der Umstand an, dass Dribbbox-Portfolioseiten auf sehr großen Bildschirmen etwas leer wirken, da die Dribbble-Bilder stets nur 400 x 300 Pixel groß sind. Dribbbox liest die Bilder aus Dribbble aus und zeigt sie in derselben Größe zentriert im rechten Bildschirmbereich an. Auf meinem DELL 27"er mit 2.560 x 1.440 Pixel und maximiertem Browserfenster wirkt das dann logischerweise etwas filigran. Auf mobilen Geräten hingegen ist die Darstellung bar jeder Kritik.

Auf jeden Fall ist Dribbbox ein Must-Have für den engagierten Dribbble-Nutzer.

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

Powerange und Switchery: HTML5 für Schalter und Slider im Flat Design

Alexander Petkov macht mit zwei unter der MIT-Lizenz frei nutzbaren HTML5-Komponenten auf sich aufmerksam. Powerange erlaubt die Erstellung schicker Slider im von iOS7 inspirierten Flat Design und mit Switchery baut man dazu passende Schalter. Beide Komponenten funktionieren als Kombination von CSS und JavaScript ohne weitere Abhängigkeiten und laufen in allen modernen Browsern, sogar im Internet Explorer (Switchery 8+, Powerange 9+). Man muss kein Fan von iOS7 sein, um sich an den vielen Fähigkeiten von Powerange und Switchery zu erfreuen.

switchery-powerange

Powerange – Ganz frisches UI-Tool zum Sliderbauen

powerange

Powerange ist erst wenige Tage alt, aber die Inspiration ist schon älter. Petkov ist ein Fan der Powerrangers und das sieht man dem Projekt nicht nur am Namen an. Wer möchte kann sogar seine Slider mit Buttons in Form von Powerrangers-Helden gestalten. Alle anderen werden eher den schlichten Flat Design Stil wählen, der dieser Tage so überaus populär ist.

Mit Powerange erstellen Sie Slider, die sich per CSS und JavaScript genau an die Erfordernisse Ihres Projekts anpassen lassen. Ob Sie horizontale oder vertikale Slider benötigen, bunte oder schlichte, Startwerte oder Mindest- und Maximalwerte mit definierten Intervallen setzen wollen, Powerange ist dazu in der Lage. Auch die Verwendung von Icons anstelle von Zahlenwerten ist möglich. Mir ist kein Anwendungsbedarf eingefallen, den man mit dem Tool nicht abbilden kann. Natürlich, soweit es sich um den Bedarf an Reglern zur Einstellung von Werten handelt.

Die Verwendung ist einfach. Hat man das CSS und JavaScript aus dem Github-Repository erst einmal eingebunden, initialisiert man Powerange, welches sich fortan um jegliches Inputfeld vom Typ Text kümmert, dass Sie definieren und zusätzlich mit einer kompatiblen Klasse ausstatten. Die Standardwerte werden einmalig über defaults mitgegeben, können jedoch an jedem Element per CSS verändert werden.

Da Powerange seine Fähigkeiten über benutzerdefinierte Klassen ausspielt, sind der Fantasie kaum Grenzen gesetzt, es wird allerdings auch eine Bereitschaft zur Einarbeitung vorausgesetzt. Powerange ist keine Automatik, die Sie nur an- oder ausschalten müssen.

Nachdem Powerange völlig kostenfrei unter MIT-Lizenz verwendet werden kann, sollten Sie das Tool jedenfalls im "Mobile Web"-Eckchen Ihres Entwickler-Werkzeugkastens ablegen.

Powerange im WWW: Demo | Github Repository

Switchery – Flache Schalter, so bunt Sie wollen

switchery

Switchery funktioniert im Wesentlichen identisch zu Powerange, nur dass es sich nicht mit Wertebereichen befasst, sondern mit simplem Ein-/Aus-Schaltern. Insofern benötigt Switchery keine Input-Felder des Typs "Text" wie Powerange, sondern solche des Typs "Checkbox".

Die gesamte übrige Vorgehensweise nebst Syntax ist identisch zum eben beschriebenen Projekt. Insofern ergibt es mehr als Sinn, sich für Sliders und Switches auf Petkovs Gesamtpaket zu verlassen.

switchery-github-pic

Switchery im WWW: Demo | Github Repository

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Essentials Freebies, Tools und Templates Photoshop

Total Recall #1: 140+ kostenlose HTML/CSS-Website-Vorlagen und PSD-Templates

In unserer schnelllebigen Branche ist es sinnvoll, ab und an mal innezuhalten und zurück zu schauen. Denn die Geschwindigkeit hat auch ihre Nachteile. So neigen wir dazu, nur auf den neuesten heißen Scheiß zu schauen, obwohl es ein paar Monate zuvor möglicherweise bessere Lösungen gegeben hat.

Kategorien
Design HTML/CSS

HTML, CSS, PSD und mehr: 22 kostenlose Design-Ressourcen aus dem Dezember 2013

Design-Ressourcen werden aus verschiedenen Gründen stets gern genommen. Einige von uns verwenden sie als Bausteine für ihr nächsten Projekt. Andere nutzen sie lediglich, um sich eigenen Kreationen inspirieren zu lassen. Aber uns allen gemeinsam ist, dass wir diese Ressourcen sammeln. Der alte Jäger und Sammler in uns lässt sich halt nicht überlisten. In vollem Bewusstsein dieses Umstandes haben wir uns wieder durch die Tiefen des Netzes bewegt und sind mit der folgenden Liste voller HTML-, CSS- und PSD-Templates wieder aufgetaucht. Nehmen Sie sie mit zur Feuerstelle und hören das begeisterte Uga, Uga.

Eins noch vorab: Alle der folgenden Elemente können frei genutzt werden. Manchmal ist allerdings im Vorfeld des Download eine kostenlose Registrierung erforderlich…

Sektion #1: HTML-Vorlagen

Every Web Service: HTML-Template im Web-Service-Look

Every web service template

Erstellt von: Matt Boldt
Features: Minimalistisches Design, eher was für Unternehmen

Wijayakusuma: Landing-Page mit großem Countdown-Zähler

Wijayakusuma landing page

Erstellt von: Bagus Fikri
Features: Extrem prominenter Countdown

Hawthorne: Minimalistisch, mit schöner Typografie

Hawthorne HTML template

Erstellt von: Type and grids
Features: was für Minimalisten und Freunde durchdachter Typografie

Flat UI Components: Interaktive UI in HTML5 und CSS3

Flat HTML UI

Erstellt von: Javier Latorre López-Villalta
Features: Moderne HTML/CSS-Vorlage im aktuellen Designtrend

Sektion #2: PSD-Vorlagen und Elemente

The Depending Theme: Dunkles Grid-Template für Agenturen

The depending theme PSD

Erstellt von: Gennadiy Ukhanov
Features: grid-basiert

Swiss: Modernes Tumblr-Template

Swiss PSD template

Erstellt von: Niall MacFarlane
Features: gut strukturiert und minimalistisch

Delize: Newsletter-PSD-Template mit huter Layer-Organisation

Delize PSD template

Erstellt von: Michael Reimer
Features: sehr gut organisierte PSD-Datei

Startup: Flat Design mit vielfältigen Einsatzmöglichkeiten

Startup PSD template

Erstellt von: eWebDesign
Features: sehr vielseitig verwendbar und im aktuellen Flat-Trend

GerduKreatip: für das Agentur-Portfolio

GerduKreatip PSD template

Erstellt von: Andreansyah Setiawan
Features: mehrere Seiten im Template

Smart App: Minimalistische Landing-Page für App-Entwickler und andere

Smart App PSD template

Erstellt von: PsdBooster
Features: Minimalistisches, sehr modernes und ansprechendes Design

Church Website Template: Texturen, aufwändige Typografie, dennoch nicht überladen

Church Website PSD tempate

Erstellt von: FREEPSDFILES.NET
Features: PSD-Datei wohl-organisiert

Bloom: Flat Template für E-Commerce’ler

Bloom e-commerce PSD template

Erstellt von: Enes Danış
Features: durch das Flat Design entsteht ein starker Fokus auf die Produkte

Sektion #3: Elemente für grafische Benutzeroberflächen

Flat UI Final: Standard-Flat-Kit für Designer

Flat UI final

Erstellt von: Samsu
Features: Flat Widgets für mobile Apps

Instagram UI: Instagram Interface aus Vektoren

Instagram UI

Erstellt von: MarinaD
Features: Hübsches Instagram-Interface für Mockups

UI Kit: Flat Widgets-Kit für Web Apps

UI kit

Erstellt von: Simeon K.
Features: Flat Elemente für soziale Anwendungen im Web, sowie Dashboards

Dark Transparent UI Kit: Transparente Widgets für Soziale Apps

Dark transparent UI kit

Erstellt von: Lovi Joshi
Features: Dunkel, modern, mit verschiedenen Nutzerprofil-Elementen

iOS 7 Wireframe Kit: Nützlich für iOS-Entwickler

iOS7 wireframe kit

Erstellt von: Jay Visavadia
Features: 2 Themes enthalten

UI Set: Elemente für mobile Social Apps

UI Set

Erstellt von: Muharrem Şenyıl
Features: iOS7 lässt grüßen

Bootstrapee Dark UI: Dunkle Elemente für Web Apps

Bootstrapee Dark UI

Erstellt von: Bootstrapee
Features: 5 Menüs, 3 Drop-Down-Menus und viele weitere Elemente

Flat Design User Interface Elements: Frei skalierbare Elemente für jede Art von Projekt

Flat design user interface elements

Erstellt von: Marie Dehayes
Features: (Fast) alle Elemente, die man braucht für mobile Apps

Lucid UI Kit: Modern, klar, mit weichen Texturen und Verläufen

Lucid UI kit

Erstellt von: Lucid Site Designs
Features: Ausgewogene Farbwahl, sehr ansehnlich

Massive UI Kit: Auffälliges iOS7-Interface

Massive UI kit

Erstellt von: Max Silenkov
Features: schon im Stile von iOS7, aber dennoch recht auffällig gehalten

Weitere Teile unserer monatlichen Serie mit Design-Ressourcen

Haben Sie erst heute herausgefunden, dass wir die besten Design-Ressourcen regelmäßig zusammenschnüren und als Paket bereit stellen? Wollen Sie sehen, was wir in den vergangenen Monaten ausgegraben haben? Dann schauen Sie mal hier:

Die Autoren

Die Shock Family ist ein Team von Web-Enthusiasten, Designern und Entwicklern, die sich der Erstellung aller Arten von nützlichen Ressourcen rund um das Web widmet. Wer sich offenen Auges im Netz bewegt ist mit Sicherheit schon über eines oder mehrere Projekte der Shock Family gestolpert, als da wären themeshock, eine Sammlung hochwertiger WordPress-Themes und nützlicher Freebies, iconshock, eine der größten Icon-Sammlungen mit mehr als einer Million Piktogramme und WPthemegenerator, ein Online-Tool zur Erstellung von WordPress- und XHTML-Themes.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

DevDocs: Zentrales Nachschlagewerk für Webentwickler

Thibaut Courouble ist wieder da. Der französische Frontend-Entwickler, den wir im Sommer 2012 erstmalig bei Dr. Web vorstellten, meldet sich mit seinem jüngsten Projekt DevDocs zurück. DevDocs will nicht weniger, als das zentrale Nachschlagewerk für Webentwickler sein. Und in der Tat ist die themenübergreifende Bündelung verschiedener Dokumentationen mit einer ebenso übergreifenden Suchfunktion gar keine schlechte Idee.

devdocs

Courouble: Kein Unbekannter in der Entwicklergemeinde

Thibaut Courouble kennen regelmäßige Dr. Web-Leserinnen und Leser schon seit längerem. Auffällig an ihm ist insbesondere seine philosophische Art, den Menschen und Themen des Netzes zu begegnen. Das mag nicht jedermann Sache sein. Darüber hinaus jedoch ist er ein äußerst talentierter Entwickler mit interessanten Ideen.

Im August 2012 stellten wir sein damals neues Projekt WebInterfaceLab vor, das er zwischenzeitlich in CSSFlow umbenannte. Am Konzept, CSS Snippets kostenfrei und ganze Interface Kits kostenpflichtig anzubieten änderte sich indes nichts. Einzig die Zahl der angebotenen Elemente ist seither gestiegen. Nach wie vor sollte die Website in keinem Designer-Werkzeugkasten fehlen.

DevDocs: HTML5, CSS, JavaScript, DOM, HTTP und vieles mehr

Mit seinem neuesten Projekt DevDocs geht Courouble ein Problem an, das selbst erfahrene Webentwickler immer mal wieder ereilen wird. Man muss eine Funktion, ein Feature, eine Schreibweise nachschlagen. Dazu gibt es im besten Falle eine schnell auffindbare Dokumentation. Nicht immer ist zumindest das schnelle Auffinden gewährleistet. Ich jedenfalls suchte mir schon mehr als oft einen Wolf in den Weiten des Netzes.

DevDocs ist auf Wachstum ausgerichtet. Courouble bittet um aktive Vorschläge zur Integration weiterer Dokumentationen in seinen Service. Dabei ist die Zahl der verfügbaren Referenzen schon jetzt ganz beachtlich und beinhaltet neben den unabdingbaren Basics, wie CSS, DOM, HTML, HTTP und JavaScript auch Frameworks und Tools wie jQuery, Node.js, Ruby, Sass, Less und weitere.

devdocs-css-snap
Links die Übersicht eines Teils der Themen, rechts die Inhalte

Interessant ist einiges am Konzept der DevDocs. Zunächst können Sie diejenigen Dokumentationen aktiv markieren, die für Sie von Relevanz sind. So schließen Sie irrelevante Informationen von vornherein aus. Eine nun durchgeführte Freitextsuche erstreckt sich über alle Themenbereiche, die Sie zuvor markiert haben. Dabei bietet DevDocs in begrenztem Umfang sogar eine Fuzzy Logic und erkennt ähnliche Ergebnisse. Will man gezielt nur in einer bestimmten Doku suchen, stellt man dem Suchbegriff den Namen nebst einem Tab voran. Die Web-App unterstützt Keyboard-Shortcuts. Auch die Suche über die Adressleiste des Browsers ist vorgesehen. Wer es noch bequemer will, installiert die Chrome App.

devdocs-chromeapp

DevDocs ist kostenfrei unter Open Source Lizenz verfügbar. Man muss allerdings der englischen Sprache mächtig sein, um es sinnvoll zu nutzen. Inwieweit es künftig mehrsprachig zugehen wird, ist nicht klar, aber meines Erachtens nicht zu erwarten, wenn man bedenkt, dass Courouble nicht mal seine eigene Muttersprache berücksichtigt.

Im Ergebnis ist DevDocs eines dieser Projekte, die Webentwickler ihrer Bookmark-Sammlung hinzufügen sollten. Nicht unwichtig ist noch, dass DevDocs ebenfalls für die Anzeige auf mobilen Geräten optimiert ist.

Links zum Beitrag

Kategorien
Essentials Freebies, Tools und Templates Inspiration Showcases

HTML, CSS, PSD und mehr: 25 kostenlose Design-Ressourcen aus dem November 2013

Ja. Hallo erstmal. Auch in diesem Monat melden wir uns wieder mit einer weiteren Ausgabe unseres monatlichen Komplettpakets der besten, frischesten Design-Ressourcen der letzten Wochen. Wenn Sie unsere regelmäßige Serie bereits kennen wissen Sie ja, was Sie erwartet. Wieder haben wir einen Sack voller HTML-, CSS- und PSD-Templates zusammengestellt und um die besten UI-Kits ergänzt. Alle der folgenden Elemente können frei genutzt werden. Manchmal ist allerdings im Vorfeld des Download eine kostenlose Registrierung erforderlich…

Sektion #1: HTML-Vorlagen

Fore: Minimalistisches HTML-Theme

Erstellt von: Jordan Bowman aka Papaya
Features: Responsives Template im aktuellen Onepager-Stil

Fore HTML template

Spotlight: Landing Page mit Konversionsdrang

Erstellt von: bestpsdfreebies.com
Features: Drei verschiedene Farbkombinationen, komplett mit PSD und DokumentationSpotlight HTML theme

Piccolo: Modern, klar, einfach

Erstellt von: Nathan Brown
Features: Basierend auf Bootstrap bietet dieses Theme 19 verschiedene Seitenlayouts.

Piccolo theme

Flat Ui: Benutzerinterface im Flat Design mit HTML/CSS

Erstellt von: Javier Latorre López-Villalta
Features: HTML/CSS Flat GUI

Flat UI HTML/CSS

Zeni : Responsives HTML5-Theme

Erstellt von: Luiszuno
Features: Responsives Template mit diversen Seitenlayouts

Zeni HTML theme

Wee: Professioneller One-Pager mit HTML5

Erstellt von: Egrappler
Features: verschiedene Seitenlayouts

Wee HTML theme

Sektion #2: PSD-Vorlagen und Elemente

Hexal: Portfolio-Template mit stark sechseckigem Einschlag

Erstellt von: Petrovski Marijan
Features: Flat Design mit vielen Ecken und Kanten ;-)

Hexla PSD template

Golden Gate: Portfolio-Theme, inspiriert vom goldenen iPhone

Erstellt von: Viktor Hanacek
Features: Gold is the new Black, könnte man sagen. Das iPhone 5s inspiriert jedenfalls.

Golden Gate PSD template

Travel Booking Website: PSD-Template für Reise-Sites

Erstellt von: vasiligfx
Features: Modernes, klares Design, dem Flat Trend folgend

Travel Booking PSD template

Selly: eine einfache Landing Page als PSD

Erstellt von: Michał Ptaszyński
Features: Einseitiges Template für Web-Wartehäuschen

Selly Landing Page

My Charity: Grid-basiertes, Flat Design Template

Erstellt von: cssauthor
Features: Wieso diese Vorlage ausdrücklich für mildtätige Zwecke geeignet sein soll ist unklar. Als Portfolio-Template über die volle Breite des Screens macht es sich ebenso gut.

My Charity PSD template

Aqual: ein weiteres minimalistisches Landing Page Template

Erstellt von: Ainar
Features: modernes Design, mehrere Seiten verfügbar

Aqual landing page PSD

Fooseshoes: Flat E-Commerce-Template

Erstellt von: Enzo Li Volti
Features: One-Pager in modernem Look

FooseShoes

Perth: Flat Landing Page Template mit sanfter Farbgebung

Erstellt von: blazrobar.com
Features: Onepager, fluffige Farben

Perth template

Rumors: Magazin- und News-PSD-Template

Erstellt von: herowp.com
Features: für Blogs, Nachrichtenseiten und Magazine geeignet

Rumors PSD template

Dexter’s Lab: und noch ein Landing Page Template

Erstellt von: Balkan Brothers
Features: Flat und modern

Lab template

Sektion #3: Elemente für grafische Benutzeroberflächen

Flat Ui Kit: An Behance erinnerndes User-Interface für mobile Anwendungen

Erstellt von: uipixels.com
Features: Social Media Widgets im Flat Design

Flat UI kit

Ubuntu GUI Template: Komplettes Set für Ubuntu-Fans

Erstellt von: DesignShock
Features: Linux-UI für echte Freunde des alternativen Betriebssystems

Ubuntu GUI template

UI Kit by Jamie Syke: Flach und rund und mit lebhafter Farbgebung

Erstellt von: Jamie Syke
Features: Dashboard-Widgets in zeitgemäßen Design

UI kit by Jamie Syke

Minimalistic Flat UI: Blau-dominiertes UI-Kit für mobile Apps

Erstellt von: superstoked
Features: Blau…

Minimalistic Flat UI

Flat UI Kit mit starkem Fokus auf das soziale Element

Erstellt von: Abhimanyu Rana
Features: Einfach und klar, flat und pastellig

Flat UI kit

Incoming Call Interface: Designvorschlag für eine Mobil-App

Erstellt von: Martijn Otter
Features: Sanfte Farbverläufe erinnern an ältere Apple-Designstandards und an das brandneue iOS 7 ;-)

Incoming Call UI kit

Flatty UI: mit viel Liebe zum Detail erstelltes Interface

Erstellt von: Mahmoud Baghagho
Features: detailreich und gut strukturiert

Flatty UI

Google Maps UI: detailgetreuer Nachbau der Google UI

Erstellt von: Victor Soussan
Features: Vektor-basierend und reichlich originalgetreu

Google Maps UI

Dribbble App Concept PSD: So könnte eine App wohl aussehen

Erstellt von: marekdvorak
Features: Gäbe es eine Dribbble-App, könnte sie so aussehen. Aber auch andere Apps könnte man mit diesem Kit dengeln.

Drible Concept PSD

Weitere Teile unserer monatlichen Serie mit Design-Ressourcen

Haben Sie erst heute herausgefunden, dass wir die besten Design-Ressourcen regelmäßig zusammenschnüren und als Paket bereit stellen? Wollen Sie sehen, was wir in den vergangenen Monaten ausgegraben haben? Dann schauen Sie mal hier:

Die Autoren

Die Shock Family ist ein Team von Web-Enthusiasten, Designern und Entwicklern, die sich der Erstellung aller Arten von nützlichen Ressourcen rund um das Web widmet. Wer sich offenen Auges im Netz bewegt ist mit Sicherheit schon über eines oder mehrere Projekte der Shock Family gestolpert, als da wären themeshock, eine Sammlung hochwertiger WordPress-Themes und nützlicher Freebies, iconshock, eine der größten Icon-Sammlungen mit mehr als einer Million Piktogramme und WPthemegenerator, ein Online-Tool zur Erstellung von WordPress- und XHTML-Themes.

(dpe)

Kategorien
Design HTML/CSS

CSS for Runaways: 5 unterschätzte Selektoren

In CSS gibt es jede Menge interessanter Selektoren, die kaum jemand kennt, geschweige denn benutzt, und das hat in erster Linie zwei Gründe. Zum einen scheint es so, als ob die lange Zeit gültigen Beschränkungen des IE6 irgendwann zur Gewohnheit geworden sind. Zum anderen enthält der von CMSystemen erzeugte Quelltext oft viele Klassen, die dann auch für das Styling genutzt werden. Trotzdem oder gerade deswegen lohnt sich ein Blick auf die neuen Selektoren, von denen dieser Artikel fünf kurz vorstellt.

HTML5_sticker

Nummer 1. Der Kindselektor: > selektiert nur Kindelemente.

Nachfahrenselektoren sind weit verbreitet. ul li zum Beispiel selektiert alle Listenelemente innerhalb einer ungeordneten Liste.

Wenn man aber zwischen den beiden Typselektoren statt der Leerstelle ein Größer-als-Zeichen setzt, werden nicht mehr alle Nachfahren, sondern nur noch Kindelemente selektiert.

Kinder sind Elemente, die in der DOM-Hierarchie genau eine Stufe tiefer stehen. ul > li wählt also nur die Listenelemente der ersten Ebene aus. Die Leerstellen links und rechts vom Größer-als-Zeichen sind übrigens optional, machen die Sache aber besser lesbar.

Besonders in verschachtelten Listen wie Navigationen mit mehreren Ebenen ist der Kindselektor sehr praktisch, da man zum Beispiel Einrückungen für die unteren Ebenen nicht erst wieder zurücksetzen muss.

Folgender Selektor entfernt innerhalb einer Navigationsliste mit mehreren Ebenen das padding-left nur für die erste Ebene:

nav > ul { padding-left: 0; } 

Die folgende Abbildung zeigt die Auswirkung dieses Selektors.

abbildung1-kindselektoren
Ein Kindselektor wählt nur die erste Ebene aus.

Ein herkömmlicher Nachfahrenselektor wie nav ul hätte die Einrückung auch für die verschachtelten Listen entfernt, die man dann mühsam wiederherstellen müsste.

Nummer 2. Attributselektoren haben [eckige] Klammern

Der einfachste Attributselektor überprüft nur das Vorhandensein eines Attributs: a[title] selektiert alle Links mit dem Attribut title.

Mit einem Gleichheitszeichen kann man einen Attributselektor auf einen bestimmten Wert einschränken, was besonders in Formularen sehr nützlich ist. Hier zwei Beispiele:

input[type=”email”] 
input[type=”submit”] 

Das Gleichheitszeichen kann durch eine Tilde, ein Hütchen, ein Dollarzeichen oder Sternchen erweitert werden, die folgende Bedeutungen haben:

  • [attr^="zeichen"] = "zeichen" am Anfang des Wertes
  • [attr$="zeichen"] = "zeichen" am Ende des Wertes
  • [attr*="zeichen"] = "zeichen" irgendwo im Wert

Dadurch gibt es besonders für Links einige interessante Möglichkeiten:

  • a[href^="http"] selektiert alle Links mit http am Anfang
  • a[href$=".pdf"] gestaltet alle Links auf PDF-Dateien
  • a[href*="wikipedia.org"] wählt alle Links zur Wikipedia

Fehlt nur noch die Tilde ~. Der Selektor [attr~="zeichen"] wählt alle Elemente, die in einem bestimmten Attribut unter anderem diesen Wert haben, und zwar mit einer Leerstelle davor und dahinter. Das ist besonders praktisch, wenn ein Attribut mehrere Werte hat, wie es zum Beispiel bei Klassen oft der Fall ist:

[class~="grid4"] selektiert alle Elemente mit der Klasse grid4, auch wenn Sie noch weitere Klassen enthalten, wie z. B. <div class="info grid4 box">.

Nummer 3. Die Pseudoklassen :first-child und :last-child

Pseudoklassen heißen so, weil damit zwar wie mit einer Klasse eine Gruppe von Elementen ausgewählt wird, dabei aber im HTML das Attribut class nicht auftaucht.

Besonders nützliche Vertreter dieser Gattung sind :first-child und :last-child, mit denen das erste bzw. das letzte einer Reihe von Geschwistern ausgewählt werden.

So wird in Navigationslisten der erste und der letzte Menüpunkt oft etwas anders gestaltet. Im folgenden Beispiel bekommt zunächst jedes Listenelement rechts eine senkrechte Rahmenlinie:

nav li { border-right: 1px solid #ccc; }

Um dem ersten Listenelement auch links eine senkrechte Linie zu geben, bietet sich :first-child an:

nav li:first-child { border-left: 1px solid #ccc; }  

Die folgende Abbildung zeigt dieses Beispiel im Browser:

abbildung2-first-child
Der Selektor :first-child fügt die erste Rahmenlinie hinzu.

Nummer 4. :nth-child() ist der Zauberstab für Kinder

Mit Pseudoklassen können Sie wie eben gesehen ganz einfach das erste und das letzte Kind eines Elements ansprechen, aber das ist noch lange nicht alles, denn mit :nth-child() können Sie richtiggehend zaubern, was die Auswahl von Kindern angeht.

Der englische Ausdruck the nth child heißt frei übersetzt soviel wie "das xte Kind" oder auch "das soundsovielste Kind". Das "n" ist ein Platzhalter für Ordnungszahlen wie first, second, third und so weiter.

Die Zaubertricks zum Auswählen von Kindelementen werden durch das Klammernpaar nach der Pseudoklasse möglich. Zunächst einmal kann man dort einfache ganze Zahlen notieren: :nth-child(2) wählt zum Beispiel das zweite Kind aus.

Mit :nth-child() können Sie zum Beispiel vier aufeinanderfolgende Listenelemente auswählen und ihnen eine unterschiedliche Hintergrundfarbe zuweisen:

nav li:nth-child(1) { background-color: #058; }
nav li:nth-child(2) { background-color: #069; }
nav li:nth-child(3) { background-color: #07b; }
nav li:nth-child(4) { background-color: #08c; }

abbildung3-nth-child.jpg
;Die Pseudoklasse :nth-child() in Aktion

Die Klammern von :nthchild() können aber nicht nur Zahlen aufnehmen, sondern auch einfache Ausdrücke nach dem Muster :nth-child(an+b), wobei "a" und "b" für beliebige ganze Zahlen stehen. Die Möglichkeiten von :nth-child() tendieren gegen unendlich und zum Üben gibt es auf css-tricks.com ein sehr schönes Tool. Link siehe unten.

:nth-child() ist besonders bei Listen und Tabellen sehr nützlich, denn dort gibt es für ein Elternelement in der Regel viele gleichartige Kindelemente.

Nummer 5. Die Pseudoklasse :target

Mit der Pseudoklasse :target kann man das Sprungziel eines Hyperlinks hervorheben. Ein sehr schönes Beispiel dafür findet sich in der Wikipedia. Wenn man dort auf ein hochgestelltes Fußnotenzeichen klickt, springt man zu der Fußnote auf derselben Seite weiter unten. Diese Fußnote wird mit der Pseudoklasse :target farblich hervorgehoben.

abbildung4-target
Die angeklickte Fußnote wird per :target hervorgehoben.

Der Link <a href="#cite_note-2">[2]</a> springt zu der Fußnote <li id="cite_note-2"> unten auf der Seite. Dadurch wird der Zusatz #cite_note-2 an das Ende der URL gehängt und das Element mit dieser ID durch das folgende CSS hervorgehoben:

ol.references > li:target { background: #def; }  

Das Pfiffige an :target ist, dass das li-Element nur hervorgehoben wird, wenn vorher auf den Link geklickt wurde, der die ID des Listenelementes aufruft.

Mit dem geschickten Einsatz von :target kann man zum Beispiel CSS-only-Lösungen für mobile Navigationen oder Akkordeons erstellen.

Links zum Beitrag

Falls Sie diesen kurzen Exkurs in die Welt der modernen Selektoren interessant fanden, gibt es in Kapitel 8 meines Buches noch eine Menge mehr davon:
Infos zu »Flexible Boxes«

(dpe)

Kategorien
E-Business Social Media

Dr. Webs Favoriten KW 43/2013: Die besten Links der Woche

Wenn Sie uns auch in den sozialen Netzwerken folgen, wissen Sie, dass wir dort Mengen zusätzlichen Content bieten. Links zu Freebies, Tutorials, interessanten Artikeln oder anderen erwähnenswerten Inhalten aus den Weiten und Tiefen des Web, dabei aber nicht von uns selbst erstellt. Allerdings ist nicht jede Leserin und jeder Leser in diesen Netzwerken aktiv, manche lehnen die Teilnahme daran kategorisch ab, wofür es natürlich auch gute Gründe gibt. (Ja, liebe NSA, das muss man noch sagen dürfen.) Für diese Zielgruppe und all jene, die unsere Postings schlicht verpasst haben, stellen wir im folgenden Beitrag noch einmal die besten Links der abgelaufenen Woche zusammen. Die Links zu unseren eigenen Artikeln, die natürlich im Grunde die Besten sind, lassen wir dabei mal raus…

Die besten Links der Woche vom 19. bis zum 25. Oktober 2013

Ganz aufmerksame Zeitgenossen könnten jetzt einwenden, dass der Titel des Beitrags nicht mit der obigen Unterüberschrift korrespondiert. In der Tat ist die Interpretation der Kalenderwoche unter Einschluss des dieser vorangegangenen Wochenendes nicht standardkonform ;-) Da unser Aktivitätsschwerpunkt aber ohnehin an den Werktagen liegt, möge man uns diese Verschiebung im Raum-Zeit-Kontinuum verzeihen…

1. Abstract Artwork in Pixelmator

Schickes abstraktes Wallpaper mit Pixelmator selbst erstellen (Tutorial)

pixelmator-abduzeedo

2. CSS Specificity

Gruselig, aber einprägsam! Pflichtbesuch für Webdesigner…

cssspecificity

3. 500+ Million More…Mailbird Launches IMAP Support

Mailbird jetzt mit IMAP verwendbar. Das kostenlose Windows-Mailtool wird langsam interessant!

mailbird

4. Dancing Robot in Pure HTML5/CSS on LiveWeave

Tanzender Bender aus Futurama, gemacht mit purem HTML5/CSS3 (inkl. Code)

bender

5. Adobe: Using CSS Shapes to Enhance Visual Storytelling

Webdesigner? Wenn du heute nur Zeit hast, einen Artikel zu lesen, dann wähle diesen! Adobe stellt CSS Shapes vor und bietet ein absolut grandios beeindruckendes Beispiel dazu.

rabbit-hole

6. Creating geometric patterns in Illustrator

Veerle Pieters mit einem großartigen Tutorial zur Erstellung geometrischer Muster in Illustrator

geometric-patterns-cubes-final

7. Mapicons – A free collection of maps for every country in the world, available in 11 sizes or in SVG

Kostenlose Kartenumrisse nahezu jedes Landes der Erde in 11 Größen und als SVG | Mapsicons auf Github

mapicons

8. Freebie: The Flat Design UI Pack (PSD)

Schickes Freebie bei den Kollegen von Speckyboy | 125 mb schweres Flat Design UI Pack

flat_design_ui_pack_large

9. Font Awesome Game: What was the name of that icon again?

Kurzweiliges Quiz, in dem Sie Teile von Font Awesome erraten müssen. Zeittotschläger!

fontawesomequiz

10. Ionicons

345 kostenlose, minimalistische Icons als Font unter MIT-Lizenz

ionicons

Kategorien
Inspiration Tutorials

Bento: Intelligente Liste der besten Online-Kurse zum Thema Web-Development

Erst vor ein paar Tagen stellten wir Ihnen hier eine Liste mit 22 der besten internationalen Online-Schulungsangebote vor. Heute stolperten wir geradezu über eine neue Ressource namens Bento, die ihrerseits die besten konkreten Kursangebote für alle Themen rund um Webentwickler-Themen sammelt und aufbereitet verfügbar macht. Die Sammlung setzt auf die Mithilfe aller und kann sich auf diese Weise zu einem der besten Anlaufpunkte im Netz mausern.

bento-homepage

Bento: Verschiedenste Kurse für verschiedenste Kenntnis-Level

Bentobox.io (kurz: Bento), programmiert von Jon Chan aus New York City, ist ein Repräsentant einer interessanten Herangehensweise an das Feld des Online-Lernens. Hier wird nicht etwa der nächste Kursanbieter entstehen, stattdessen will Bento die besten bereits existierenden Onlinekurse aus den Weiten des Web zusammenziehen und zentral zugänglich machen. Unter den vertretenen Anbietern findet sich Dash, das wir Ihnen erst kürzlich vorstellten, ebenso wie Codecademy und Treehouse, die bereits in unserem großen Roundup ihren Platz fanden, und einige weitere namhafte und weniger namhafte Dienste für Wissbegierige.

Bento ist nach Sprachen/Plattformen/Technologien sortiert. Innerhalb des jeweiligen Themas wird nach Kenntnislevel unterteilt. Es finden sich Materialien für Anfänger, Fortgeschrittene und Profis, wobei der Bereich, der sich an Profis wendet noch häufig unbesetzt ist. Anfänger finden auf jeden Fall genügend Lernstoff.

Wählt man ein Thema an, schlägt Bento per farblicher Hervorhebung weitere Themen vor, die man im Anschluss bearbeiten sollte. In Anbetracht der Vielfalt des Gebotenen, kann eine solche farbliche Strukturierung durchaus helfen, einen klaren Weg durch das Wissensdickicht einzuschlagen.

Bento hat Materialien für nahezu jedes erdenkliche Thema, darunter solche, von denen nicht einmal ich schon je etwas gehört habe. Über 80 Themen mit einer unterschiedlichen Zahl verfügbarer Kurse wollen durchgearbeitet werden. Sollten Sie daran interessiert sein, sich mit der Entwicklung nativer Apps für die drei großen Mobilplattformen zu beschäftigen, ist Bento ebenfalls eine gute Anlaufstelle.

Wenn Sie der Auffassung sind, dass eine der besten Ressourcen zum Thema X fehlt, sind Sie aufgerufen, diese Ressource aktiv zu ergänzen. Diese Form der Weisheit der Vielen ist das Konzept auf dessen Basis Bento noch besser werden soll. Die gemeinsame Arbeit wird über Github organisiert.

Laut Chan ist Bento das Resultat eines einstündigen Code-Hacks. Entstanden am 20. September fand das Projekt innerhalb weniger Stunden seinen Weg auf die wesentlichen Linkhubs unserer Tage, namentlich Reddit und Hacker News. Chan hat sich inzwischen die Zeit genommen und die Story gebloggt.

So, und nun gehen Sie rüber zu Bento, helfen es zu erweitern oder bauen Ihre eigene Version. Immerhin stehen jedem von uns laut Warhol 15 Minuten Ruhm zu.

Ebenfalls eine gute Anlaufstelle für alle Lernwilligen ist das kostenlose E-Book von vergleich.org, welches 500 kostenfreie, deutsche Onlinekurse auf ca. 150 Seiten beinhaltet.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Alles so schön bunt hier: 21 kostenlose Design-Ressourcen zum Herbstanfang 2013

Guten Morgen, Designer, Developer und übrige Netzbewohner. Wir sind zurück mit der neuesten Ausgabe unseres monatliches Rundumschlags mit den besten, frischesten Design-Ressourcen des vergangenen Monats. Wenn Sie unsere regelmäßige Serie bereits kennen, dann wissen Sie ja, was Sie erwartet. Wieder haben wir einen Sack voller HTML-, CSS- und PSD-Templates zusammengestellt und um die besten UI-Kits ergänzt. Alle der folgenden Elemente können frei genutzt werden. Manchmal ist allerdings im Vorfeld des Download eine kostenlose Registrierung erforderlich…

Megacorp: Minimalistisches Multi-Layout-Theme für Desktop- und Mobil-Geräte

megacorp

Erstellt von: HTML5Templates
Features: Minimalistisches UI-Design, ein- oder zweispaltig, sowohl für Desktop, wie auch Tablets und Smartphones geeignet

Moderne Open Source-Website im minimalistisches Designstil

slide one

Erstellt von: Start Bootstrap
Features: 17-seitiges Template auf der Basis von Bootstrap 3

Prologue: Template für Fotografie-Seiten im Flat Design

Prologue

Erstellt von: HTML5 UP
Features: Navigationsmenü im Mobil-Stil, Flat Design, responsiv und mit guter Social Integration

Zizurs: Einfaches Template für Coiffeure

Zizurs

Erstellt von: Free Website Templates
Features: Auch das gibt’s. Ein Template für Friseurinnen und Friseure. Es bietet einen minimalistischen Style und weiche Seitenübergänge.

Escape Velocity: Responsives Site-Template

Escape Velocity

Erstellt von: HTML5 UP
Features: Parallax-geeignet, mit schönen Hintergrundmustern und einem eleganten Glas-Effekt in den Menüs

Tapestry: Mehrspaltiges Blog-Design

Tapestry

Erstellt von: HTML5Templates
Features: Mehrspaltiges, responsives Design mit schickem Hintergrund, bild-zentriert

PSD-Template im Flat Style für App-Websites

app website PSD

Erstellt von: Tomas Laurinavicius
Features: UI-Komponenten für Websites zu mobilen Apps, fokussiert sich auf Fotografie

Business: PSD-Website-Template mit kräftigen Farben

Business

Erstellt von: Blaz Robar
Features: Flat Stil, starke Farben, responsives Layout.

STE.AM: Flat PSD-Templates für Event-Websites

STE.AM

Erstellt von: Subash Dharel
Features: PSD mit zwei Templates, auch wieder Flat Design, bemerkenswerte Illustrationen und gute Social Integration

Gusto: PSD-Template zur Erstellung erfolgreicher E-Mail-Newsletter

Gusto

Erstellt von: Michael Reimer
Features: Besonders interessant ist die Trennung von Bild-, Inhalts- und LInk-Containern. Werbeflächen sind vorgesehen.

Worx: Responsives, flexibles WordPress-Theme

Worx

Erstellt von: Cyberspace Builder
Features: flaches, responsives Einseiten-Theme

Thunder: Riesen-PSD-Website-Template

Thunder

Erstellt von: WP Explore!
Features: großes Template für WordPress-Sites mit PSD-Rohdaten.

Crisp UI Kit: Mengen von Web-Elementen

Crisp UI

Erstellt von: Michael Reimer
Features: Für Freunde des minimalistischen UI. Enthält verschiedene Arten von Schaltflächen, Auswahlmenüs, Slider, Fortschrittsbalken. Ganz in pastelligen Harmonietönen gehalten.

UI Kit 2: PSD-Kit im Flat Design

UI kit 2

Erstellt von: Aykut Yilmaz
Features: unzweifelhaft hübsches Kit im trendigen Flat Style mit Kommentarbereich, Slider, Fortschrittsbalken, etlichen Widgets und mehr

Flatilicious User Interface: Optimal für Wireframing

Flatilicious

Erstellt von: Patrick M
Features: Flat Interface mit verschiedenen Elementen, darunter ein Login- und Registrierungsoverlay und ein Widget zur Integration von Twitter

iOS7 GUI: Mehr als 1.000 Elemente für Ihre iOS-App

iOS 7 GUI

Erstellt von: IconShock
Features: iOS7 lässt grüßen, Retina-ready, minimalistische Icons und Elemente

UI Kit: PSD-Set für Fliesenleger ;-)

UI kit

Erstellt von: Rebecca Machamer
Features: ein bisschen Metro-Flair versprüht dieses Set im Flat Design, Windows 8 Enthusiasten vor

Schickes Web-User-Interface-Design-Kit als PSD

Putih Ijo UI kit

Erstellt von: Aryan Dhani
Features: Viele Elemente für den E-Commerce im Flat Design

Metro Vibes UI Kit: Kreative Design-Elemente sparen einen Haufen Arbeit

Metro Vibes

Erstellt von: Freebies Galleries
Features: Ein Füllhorn, unter anderem mit visuellen Kontrollelementen, Sliders, Icons, Schaltflächen und Besonderheiten, wie einer Preistabelle, ein Nachrichtenfeld, eine Wetteranzeige und mehr

Flatimus iOS UI Kit: Flacher als das flache iOS7

Flatimus

Erstellt von: Satys
Features: Retina-ready, Flat UI, Elemente als Positive wie Negative für helle oder dunkle Layouts

Hotel UI Kit: Reise-Apps und Websites bedienen sich bitte hier

Hotel UI kit

Erstellt von: pixelkit
Features: mit Ebenen versehene PSD-Dateien auf der Basis eines 960er Grids, kommerzielle Nutzung erlaubt, skalierbare Vektorgrafiken, kostenlose Updates, freie Schriftarten

Die Autoren

Die Shock Family ist ein Team von Web-Enthusiasten, Designern und Entwicklern, die sich der Erstellung aller Arten von nützlichen Ressourcen rund um das Web widmet. Wer sich offenen Auges im Netz bewegt ist mit Sicherheit schon über eines oder mehrere Projekte der Shock Family gestolpert, als da wären themeshock, eine Sammlung hochwertiger WordPress-Themes und nützlicher Freebies, iconshock, eine der größten Icon-Sammlungen mit mehr als einer Million Piktogramme und WPthemegenerator, ein Online-Tool zur Erstellung von WordPress- und XHTML-Themes.

(dpe)

Kategorien
Design HTML/CSS

Koala – Brandneue Cross-Plattform-App erleichtert den Umgang mit Präprozessoren wie LESS , Sass und anderen

Aus der chinesischen Großstadt Shengzhen stellt uns Entwickler Ethan Lai kostenlos ein Tool zur Verfügung, das den Umgang mit Less, Sass, Compass und CoffeeScript erleichert. Dies gilt umso mehr, wenn Sie, wie ich, unter der Flagge verschiedener Betriebssysteme segeln. Denn Koala, so der sympathische Name des Werkzeugs, läuft unter Windows, Mac OS und Linux. Gestern stellte Lai die Version 2.0 in einer Beta-Fassung vor.

koala-app

Koala kompiliert und komprimiert einmal hinzugefügte Ordner automatisch

Ein nettes Detail will ich gleich einleitend erwähnen. Koala folgt dem Trend zum Flat Design und gehört optisch bereits jetzt zu meinen Favoriten für das sauberste App-Layout des Jahres. Sicherlich ist das nicht sonderlich schwierig zu erreichen gewesen, gemessen am sehr überschaubaren Feature-Set der App. Dennoch, es fällt auf.

Über seinen Amazon Clouddrive stellt Lai die verschiedenen Versionen zum Download bereit. Ubuntu erhält eine angepasste neben denen für die übrigen Linux-Derivate. Out of the box unterstützt Koala derzeit Less, Sass, Compass und CoffeeScript. Die in Version 2 hinzugekommene Extension-Architektur erlaubt es allerdings, der App weitere Sprachen beizubringen.

Ebenso modularisiert präsentiert sich Koala hinsichtlich der unterstützten Sprachen der UI. Language-Packs erlauben die Übersetzung in beliebige Sprachen, derzeit steht neben der englischen, chinesischen, französischen und portugiesischen Übersetzung auch bereits die deutsche zur Verfügung. Die genannten Sprachen sind im Download-Paket bereits enthalten.

Der Umgang mit Koala ist einfach. Nach dem Start der App zieht man seine Projektordner per Drag and Drop in das Programmfenster oder fügt sie mittels des links oben angeordneten Plus-Buttons über den Datei-Dialog hinzu. Einmal hinzugefügte Ordner werden fortan überwacht. Bei Änderungen an unterstützten Dateien werden diese automatisch kompiliert und komprimiert. Compiler-Optionen können bei Bedarf für jede Datei einzeln gesetzt werden. Es ist sogar möglich, externe Compiler einzubinden, sofern das erforderlich sein sollte.

Für die Kompilation von Sass wird Ruby benötigt. Dieses ist auf Mac-Systemen ohnehin per Standard vorhanden. Linuxer installieren es über die bevorzugte Package-Verwaltung nach. Für Windows liefert Koala seit Version 2 Ruby direkt mit, so dass es nicht separat installiert werden muss. Die von Koala erzeugten JS- und CSS-Dateien kann das Tool auch gleich kombinieren, so es denn gewünscht ist.

Koala wird seit April 2013 aktiv entwickelt, wobei die seit gestern vorliegende Version 2 sicherlich als Meilenstein, vor allem aufgrund der Modularisierung, bezeichnet werden darf. Lai stellt Koala über die Produkt-Website und das Github-Repository kostenlos zur freien Nutzung unter der Lizenz Apache 2.0 bereit.

Insbesondere webdesignende Betriebssystem-Weltenwanderer werden sich für das Werkzeug interessieren. Und das sicher nicht nur wegen des unbestreitbar niedlichen App-Icons ;-)

koala-icon

Links zum Beitrag:

Kategorien
Best-of HTML/CSS/PSD-Ressourcen Bilder & Vektorgrafiken bearbeiten Design Essentials Photoshop

Best of Juli 2013: 30+ frische HTML/PSD-Themes und UI-Elemente

Im zweiten Teil unserer neuen monatlichen Serie mit frischen HTML/PSD-Themes und UI-Elementen stellen wir Ihnen Ressourcen vor, die sämtlich im Juli 2013 entstanden sind. Wir liefern Ihnen mit über 30 verschiedenen Werken ein breites Set an vorgefertigten Themes, Templates und sonstigen Elementen. In vielen Fällen werden die Rohdaten zur Bearbeitung mit Ihrem favorisierten Bild- oder Vektorbearbeitungsprogramm direkt mitgeliefert. Da sollte für jedermann was dabei sein…

Elegante HTML- und CSS-Themes

Wenn Sie nach Web-Templates suchen, für die Sie nicht erst Photoshop oder Illustrator anwerfen müssen, sind Sie mit der folgenden Liste gut bedient:

Gardentruck: Free Responsive HTML5 Template

Erstellt von: Templatemonster

GardenTruck Html5 Template

Avenir: Clean and Modern “Coming Soon” Page Template

Erstellt von: Wegraphics.Net

Free Coming Soon HTML Template

Caprice: Simple and Beautiful HTML Template

Erstellt von: Elemisfreebies.com

simple and beautiful HTML template

Telephasic: Minimalistic and Responsive Site Template

Erstellt von: HTML5 UP

responsive site template

zAgroPlus: Responsive Dark WordPress Theme

Erstellt von: Templatemonster.com

Responsive Dark WordPress

Simplistic: Simple and Minimalistic HTML5 Template

Erstellt von: Css3templates.co.uk

minimalistic HTML5 and CSS3 template.

ZCorPoRate: Blue and White Responsive HTML5 Theme.

Erstellt von: Zerotheme.com

Blue and White Theme.

PSDs zu Inspirations- und anderen Zwecken

Die folgenden PSDs enthalten Themes mit teils mehreren Layoutvarianten. Sie dienen zu Inspirationszwecken, können aber natürlich auch direkt genutzt werden, wenn man Lust und Fähigkeit zu umfangreichen Anpassungen hat.

Seabird: Elegant Homepage Multipurpose PSD Template

Erstellt von: Elemisfreebies.com

Seabird Free Homepage PSD

Motion: Single Page PSD Web Template

Erstellt von: Mahmoud Baghagho

single page PSD web template.

About Us Page: Minimalistic “About Us” Landing Page

Erstellt von: Chris Allen

About Us Page

Modus Versus: Free Multi-purpose PSD Template for Designers

Erstellt von: Dimitar Tsankov

multi-purpose PSD template

Black Sea: Flat Style Business Template PSD

Erstellt von: Css Author

Clean website design template PSD

Skybox: Minimalistic White PSD Home Page Template

Erstellt von: Elemisfreebies.com

Skybox Free Homepage PSD

Pinball: Responsive Grid Style Blog PSD

Erstellt von: CSS Author

responsive grid style blog PSD

Display: Complete and Elegant Website Template

Erstellt von: Bestpsdfreebies.com

elegant website template

Calm: Free PSD Portfolio Containing a Page for the Home and Another One for the Blog

Erstellt von: Salah Elimam

creative simple portfolio & blog PSD

Bluebox: Flat Website PSD Templates Design

Erstellt von: Adam Engledow

BlueBox: Flat Website PSD

Aditii: Premium Ecommerce Website Template in PSD

Erstellt von: CSS Author

clean e-commerce template.

Coole GUIs zur Entwickler-Entlastung

Mobiles Design entwickelt sich rasant und ist unumgänglich. Kein Wunder also, dass sich mehr und mehr Entwickler in diesen Bereich vorwagen. Zum leichteren Einstieg haben wir folgend eine umfangreiche Liste mit PSD-basierten Interfaces zusammengestellt. Die meisten dieser GUIs sind vollständig.

Modern Touch: Flat and Complete Set of UI Elements in PSD Format

Erstellt von: Pixelkit.com

Modern Touch UI Kit

Light UI Kit: Clean and Deep Collection of UI Elements for Your Web

Erstellt von: Andrewspixels.com

Light and Deep UI Kit

iOS 7 GUI: Fantastic Set of GUI Elements for iOS 7 iPad

Erstellt von: Kim Ruelo

iOS-7 iPad GUI

Dark UI Kit: Simple and Flat Set of UI Elements

Erstellt von: Max Denisov

Dark UI Kit

Fantastic iOS 7 GUI: Spectacular and Useful Resource for Web Designers & Developers

Erstellt von: DesignShock.com

Fantastic iOS 7 GUI

Pop Songs:  Flat Music Player UI Widget

Erstellt von: Pele Chaengsavang

flat music player UI widget.

Flat UI Kit: Nice Set for Flat UIs

Erstellt von: Pixelsdaily.com

Flat UI Kit Free

Marble UI Kit: Simple and Useful GUI Kit in PSD Format

Erstellt von: Jian Wei

Marble UI kit

Dashboard UI: Beautiful Set of Dashboard UI Design PSD

Erstellt von: CSS Author

Dashboard UI

Chubby Stacks: Complete and Elegant UI Kit for Your Next Project

Erstellt von: Pixelkit

Chubby Stacks UI Kit

UI Kit: Modern UI Kit for Web Designers in PSD Format

Erstellt von: Aykut Yılmaz

UI kit for web designers

Flat GUI Kit: Fantastic and Useful Flat GUI Kit in PSD File

Erstellt von: Freepik

Flat GUI Kit

Infographic GUI: Info Graphic PSD Templates Designed in Simple and Clear Style

Erstellt von: Free PSD Files

Infographic PSD Templates

Wooden GUI Set: More Than 1,000 Design Elements for Your Next Web/Software Project!

Erstellt von: DesignShock

Wooden GUI Set

Dark Flat GUI: Cool UI Kit That Includes a Set of Beautiful Components

Erstellt von: Graphicburguer

Flat Design UI Components

Die Autoren

Die Shock Family ist ein Team von Web-Enthusiasten, Designern und Entwicklern, die sich der Erstellung aller Arten von nützlichen Ressourcen rund um das Web widmet. Wer sich offenen Auges im Netz bewegt ist mit Sicherheit schon über eines oder mehrere Projekte der Shock Family gestolpert, als da wären themeshock, eine Sammlung hochwertiger WordPress-Themes und nützlicher Freebies, iconshock, eine der größten Icon-Sammlungen mit mehr als einer Million Piktogramme und WPthemegenerator, ein Online-Tool zur Erstellung von WordPress- und XTML-Themes.

(dpe)