CSS3

Linkfutter 134

Mark Geyer hat einen Workshop zu Animationen im Interface gegeben. Freundlicherweise hat er die sehr interessante und sehr umfangreiche Präsentation dazu online gestellt.

Die Zukunft des E-Commerce ist Responsive, behaupten Patrick Lobacher und Sven Wolfermann in einem gemeinsamen Vortrag.

Markdown soll endlich eine offizielle Spezifikation bekommen, die möglichst alle bisherigen Mutationen auch abdeckt. Und da sich der Markdown-Erfinder wie ein störrisches Kind benimmt, wird das Ganze unter CommonMark verhandelt. Na, dann sind wir mal gespannt.

Linkfutter 107

  • Codrops ist eine anscheinend nie versiegende Quelle für tolle Inspirationen und für Code, den man sich einfach nehmen und anpassen darf. Diesmal werden uns ein paar Ideen präsentiert, wie man Links interessanter machen kann.
  • Der IE 11 hat einen Unternehmensmodus spendiert bekommen. Man kann das eigentlich nur mit einer Mischung aus Mitleid, Bedauern und Häme zur Kenntnis nehmen. Denn dieser Modus emuliert für auswählbare Seiten den IE8. „Unternehmen“ ist also quasi synonym zu „veraltet, antik, technologisch abgehängt“. Traurige Sache, oder?
  • Im Smashing Magazine gibt es einen „Guide to picture and srcset„, also einen Überblicksartikel zu responsiven Bildern.
  • Brad Frost erklärt, wie man sein Pattern Lab zusammen mit Grunt nutzen kann.
  • Die Vorträge von der SmashingConf in Oxford gibt es jetzt bei Vimeo.

Linkfutter 101

Neue Schulung: HTML5 MasterClass

Frontendentwicklung ist kein leichter Job. Die technischen Rahmenbedingungen ändern sich ständig. Oft bleibt nicht genügend Zeit, um neben dem Job auf dem neuesten Stand zu bleiben. Und am Arbeitsplatz selber wird einem oft die Möglichkeit nicht eröffnet.

Deshalb sind Schulungen für viele Unternehmen und Entwickler wichtig, um technisch nicht abgehängt zu werden.
(mehr …)

Navigation mit ausklappender Zusatzinfo – ohne JavaScript

Hin und wieder kann es vorkommen, dass man erklärende Infos zu einem Navigationspunkt weitergeben möchte. Oder einfach noch ein wenig Werbung für die zu erwartenden Inhalte machen will. Das kann man prima ohne JavaScript mit ein wenig CSS erreichen. Ich habe drei unterschiedliche Varianten in einem Codepen zusammengestellt. Als Basis für die Gestaltung habe ich die Standard-Dateien von YAML – meinem bevorzugten Framework – genutzt. Schliesslich kommt es im Wesentlichen auf die Umsetzung der Funktionalität, nicht auf das konkrete Design an.

See the Pen Navigation with additional infos on hover – stripped down by Jens Grochtdreis (@jensgro) on CodePen

In allen drei Varianten wird beim Überfahren des Listenelementes – nicht des darin enthaltenen Links – ein zusätzlicher Text eingeblendet. Ich habe diesen mittels der YAML-Klasse ym-hideme aus dem Viewport geschoben und nicht mittels display: none ausgeblendet. Dadurch ist der Zusatztext Screenreadernutzern grundsätzlich zugänglich. Es geht hier ja nur um einen visuellen Effekt. Diese Klasse arbeitet mit position:absolute, um den zu versteckenden Text aus der Sicht zu schieben. Und hier setzt der Unterschied der ersten beiden Vorschläge an.

Denn beim Überfahren eines Listenelements werden die Positionierungskoordinaten des Zusatztextes verändert. left: 100% sorgt dafür, dass der Zusatztext direkt an die Navigation anschliesst. Der Verzicht auf einen Pixelwert macht die Lösung flexibel. Sie kann in fixen, aber auch in fluiden oder responsiven Layouts eingesetzt werden. Durch die absolute Positionierung ist der Orientierungsrahmen wichtig. Ein absolut positioniertes Element orientiert sich nach dem nächsten Elternelement, dass eine andere Positionierung als static hat. Elegant löst man dieses Problem meist mit position: relative.

In der ersten Varianten wird der Liste position:relative zugewiesen, in der zweiten Variante ist es das Listenelement selber. So hängt in der ersten Variante der Text also immer ob an der Navigation. Das lohnt sich speziell für längere Texte. Bei der zweiten Version hängt der Text direkt am Navigationspunkt und macht so seine Zugehörigkeit für die Nutzer sehr deutlich. Die dritte Version ist komplett anders. Hier realisiere ich durch left: 0 und einem position: relative auch für den eingeblendeten Container, dass der Text direkt unter innerhalb der Navigation als Ergänzung zum Navigationspunkt erscheint.

Um das Einblenden ein wenig angenehmer zu gestalten, habe ich Transitions genutzt. Alte IE werden diese nicht anzeigen, das Ausklappen funktioniert trotzdem. Wegen der Animation war es mir wichtig, die Hintergrundfarbe nicht wie bei den anderen beiden Lösungen auf den Zusatztext zu legen, sondern auf das aktivierte Listenelement. So gibt es keine leichte Verzögerung, bis man die Hintergrundfarbe sieht, die Animation wirkt dadurch viel angenehmer.

Wen der SCSS-Code nicht interessiert, der kann sich auch das resultierende CSS leicht anschauen. Einfach am rechten unteren Ende des SCSS-Tabs auf „View Compiled“ klicken und das resultierende CSS wird angezeigt. Alternativ auf „Edit und Codepen“ klicken und dann im CSS-Tab auf das Wort „CSS“ klicken. Auch dann wird das SCSS in CSS umgewandelt.

Übrigens habe ich auch eine Seite erstellt, die die Techniken im Zusammenhang eines Gridsystems zeigen. Denn es stellt sich ja die Frage, ob die nach rechts ausragenden Layer nicht mit anderen Informationen auf der Seite kollidieren. Der Praxistest zeigt, dass da kein Problem entsteht.

CSS-Transitions zur Verkaufsförderung

Mit Animationen, Transformationen und Transitionen kann man viel herumspielen. In meinen Schulungen und Uni-Kursen merke ich immer wieder, dass dies die Entwickler anzieht. Von Designern und Marketingfuzzis Marketingspezialisten wollen wir jetzt gar nicht sprechen. Ich gebe immer wieder gerne eine Webseite von Andy Clarke als Beispiel, die leider schon lange nicht mehr existiert. Für ein paar Schulungs-DVDs hatte er „For a beautiful web“ erstellt. Da diese Webseite nur noch über das Web-Archiv erreichbar ist, habe ich die Quintessenz der Animation herausgezogen und in ein Codepen transferiert.

(mehr …)

Rezension: Pocket Guides von Five Simple Steps

Der kleine Verlag „Five Simple Steps“ veröffentlicht seit Anfang des Jahres besondere E-Books zu einem höchst attraktiven Preis. Die „Pocket Guides“ hätten gedruckt vielleicht A6 als Format und haben weniger als 100 Seiten Umfang.

Der geringe Umfang ist Konzept: die Autoren fokussieren sich auf ein inhaltlich begrenztes Spezialthema. Das macht das Schreiben schneller, aber auch das Lesen. Und der Preis ist unschlagbar: ein Büchlein kostet 2 Pfund (ca. 2,30 Euro). Man kann auch Bundles von vier Büchlein erwerben, diese kosten dann zusammen 6 Pfund. Die E-Books kommen in den Formaten PDF, epub und mobi.

(mehr …)

Boxschatten aus Photoshop in CSS transportieren

In Photoshop werden Schatten nicht mit CSS3-kompatiblen Reglern zugewiesen. Das verwundert nicht, schliesslich ist es eigentlich auch kein Webdesign-Programm. Möchte man die Photoshop-Einstellungen ohne allzuviele Probeläufe und Näherungstests in sein CSS übernehmen, bieten sich mehrere Ansätze an:

  1. CSSHat, eine Software, die es für Windows und Mac gibt.
  2. CSS3Ps, ein Photoshop-Plugin
  3. PSD to CSS3, eine Webseite, in der man alle Photoshop-Einstellungen einträgt und dann ein Ergebnis generiert bekommt.
  4. Ein Compass-Plugin, mit dem man die Photoshop-Einstellungen mittels Compass und Sass in CSS übertragen lässt.

CSSHat und CSS3Ps können mehr als nur Boxschatten transferieren. Ich habe keinen der Ansätze getestet, finde sie allerdings alle sehr hilfreich und probierenswert. Bislang habe ich normalerweise einen Schatten per Augenmass erstellt und ihn dann mit dem Designer abgestimmt. Das geht ohne Extra-Tools 🙂

Die Gedanken und Berechnungen hinter dem Compass-Plugin werden übrigens in einem Artikel ausführlich erläutert.

Videointerview mit mir

Ich durfte auf den JavaScript Days Anfang März in München zwei halbtägige Schulungen halten: eine über Responsive Webdesign und eine über CSS3. Am Morgen meines zweiten Tages – kurz vor der CSS3-Session – wurde ich vom Veranstalter kurz interviewt. Das Interview gibt es auf Youtube oder hier eingebunden.

Wichtige Seiten zu HTML5 und CSS3

In meinem letzten Projekt fiel mir genau wie in meiner letzten Schulung auf, dass vielen Kollegen der Überblick über wirklich hilfreiche und wichtige Links fehlt. Insbesondere der Umgang mit CSS3 und HTML5 erfordert das ständige Nachschlagen nach Browsersunterstützung und der Suche nach passenden Alternativen.

Es ist zudem aber auch wichtig, inhaltlich am Ball zu bleiben. Dafür benötigen wir inspirierende und gerne auch informative Artikel. Die gibt es in der gewünschten Güte und Qualität (leider) nur im englischsprachigen Web. Ich gebe hier mal eine Übersicht der mir besonders wichtigen Referenzen und Informationsseiten. Diese Übersicht ist nicht komplett, nur auf das Wesentliche eingedampft. Ich bin überzeugt, dass jeder an moderner Webentwicklung Interessierte diese Auswahl in seinen Bookmarks haben sollte.
(mehr …)