Archiv für das Tag "CSS"

Sliding underline

In a current project, the designer asked if we could add a little gimmick to the horizontal navigation, which consists of just a few one-level items. Of course the idea is visual-, desktop-, and mouse-input-device-centric, and a discussion about other devices and the resulting state of the navigation ensued, and we agreed to treat this as a nice to have if everything else is cared for.
Nevertheless I was intrigued; would it be possible to animate a border to 'slide' from one menu item to the next on (mouse)over? So if you 'leave' the currently hovered item, the line should ...

What Comes Next Is the Future

Dedicated to all the people who work to make the web a little better every day
[…] a documentary film about the web […] It is the story of Tim Berners-Lee’s creation – how it came to be, where it’s been, and where it’s going – as told by the people who build it.
vimeo.com

Wer verstehen will, warum ich seit Mitte der neunziger Jahre "was mit Web" mache, worin die Faszination dieses Mediums für mich besteht - 'ne Stunde Zeit nehmen und diesen Film auf Vimeo anschauen.

… realizing ...

the C in CSS, it is not 'component'.

(my recent web dev timeline in a nutshell; everyone seems to have a strong opinion around that fact)

Ch-ch-ch-changes

For a long time it has bugged me that the css for the recent version of my site was desktop-down. I made some adjustments for adaptive/responsive behaviour three or four years ago, but since the code base of my site is organically growing since I started it on WordPress in 2005… uhm, I think you get the picture. So all I did back then was to consider how the site should look on smaller screens, and making modifications inside max-width media queries, keeping all of the desktop-related stuff as the default styles, outside any media queries.
Of course when starting ...

CSS Basics

Pfft. Da macht man (ich) seit Jahren, fast Jahrzehnten, mit diesem CSS-Zeugs rum, denkt, dass man den Krams eigentlich ganz gut verstanden hat und im Griff hat. Klar, manchmal passieren komische Sachen, die man nicht so direkt versteht oder nachvollziehen kann, dann stochert man ein bisschen rum, sucht sich ähnliche Probleme und/oder Hinweise zusammen, fixt den Kram oder lässt von der konkreten Idee ab und nimmt einen anderen Weg zum Ziel. Und dann gibt es so AHA Momente, meistens völlig unerwartet und ohne Vorwarnung -- einen solchen hatte ich heute früh, als mir Jens Linksammlung durch die Morgentimeline ...

3D Cube in CSS

CSS - Cascading Style Sheets - has come a long way from being the "paint" on HTMLs structure. In the relativly short span of one afternoon I was able to create a threedimensional cube, that, with a little help of some JavaScript glued onto some input fields, can be rotated along its X-, Y-, and Z-axis. Wowsy.

See the Pen CSS 3D cube by Tom (@webrocker) on CodePen.

CSS Layout Yoga

Von den vielen Eindrücken und dem ganzen Hirnfutter der fantastischen Smashing Conference, der ich Ende März in Oxford beiwohnen durfte, ist mir vor allem der Talk von Zoe Gillenwater zum Thema "Leveling Up With Flexbox" in Erinnerung geblieben. Im Sinne von: Wow, damit will ich sofort rumspielen.

Stark vereinfacht gesagt, ist Flexbox ein komplett neuer Ansatz in CSS, wie man die Positionierung von Elementen und die Reihenfolge unabhängig von der "echten" Abfolge im Quellcode bestimmt, was gerade im Zusammenhang mit Responsive Web Design eine Herausforderung ist. Die Browserunterstützung ist vor allem auf "mobilen" OS schon ziemlich ...

Beobachtungen zum CSS Naked Day gestern

Gestern war die Webrocker-Seite den ganzen Tag ohne Formatierung am Start und kam im angesagten Web 0.2-Look daher:

Die Besuchszahlen, Seitenaufrufe und die Verweildauer im Blog sind nahezu gleich geblieben
Die Anzahl übertragener KBs ist nur leicht gesunken - das war zu erwarten, da CSS ja ein möglichst schlankes Markup fördert und lediglich die Hintergrundbilder bei abgeschaltetem CSS "gespart" werden

Die visuelle Attraktivität der Seite scheint kein großes Kriterium zu sein (was mich als Designer natürlich etwas schmerzt :-)

webrocker.de ist nun ja kein Riesending mit tausenden von ...

CSS Naked Day

Let me see you stripped... denn der 9. April ist dritte "CSS Naked Day".

What happened to the design?

To know more about why styles are disabled on this website visit the

Annual CSS Naked Day
website for more information.

Ja Kinners, heute ist Zeit, mal die CSS-Hosen runter zu lassen und zu zeigen, ob Eure Seite auch ohne jegliches Formatierungszeug nutzbar ist.

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on

...

  • Seite 1 von 2
  • 1
  • 2
  • »

The design, the code, 1959 texts, the illustrations, and some photos are made by me.

Motorisiert durch WordPress