Posts Tagged ‘css’

Pure CSS image lightboxes

13th May 2016

I don’t like using JavaScript unnecessarily. That’s why I love pure CSS solutions. As browsers are getting better and better at implementing CSS3 features, pure CSS solutions are getting slicker and more production-ready.

One of the few pure CSS solutions I built recently was a pure CSS lightbox. I built my solution first and then looked at the tens of other solutions out there to compare and check if I missed anything important.


The trouble with HTML and CSS skills

15th November 2012

When talking to recruitment agents, I very often hear that having “just” HTML and CSS skills is no big deal as everyone is good at those. That’s probably because they hear and read so many times from web developers that they are really good at them. So, they think those skills are not very valuable.

But the truth is, while many developers say they have good HTML and CSS skills, most of them really haven’t. The problem is that the languages themselves are very easy (so, they might not be really lying as such). But applying them to real world projects isn’t easy at all. You could also say it’s the distinction between “CSS, the language” and “CSS, the skill”.
If it was easy, why is the quality of at least 90% of the web so crap? While working with other developers I have found that the vast majority (at least about 90%) of them are overestimating their HTML and CSS skills by far.

During the over 10 years of working in this business, I have worked with roughly 100 other web developers. And out of those only five were good enough in HTML and CSS so that I would rate them 4 or 5 (out of 5).


Trick Question: How many link states can be defined in CSS?

10th July 2011

Hint: There is more than one correct answer (well, sort of). I would fail 4 and pass 3 of them, while 2 of the 3 correct answers would get extra points (because it’s rare knowledge).

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


Basic is the new Reset

8th May 2011

I don’t like reset styles. (And I’m not the only one.) Instead I’m a fan of good basic styles.

Don’t get me wrong, reset styles serve their purpose. They are good for beginners and many intermediates and can save them a lot of trouble. It’s better to use reset styles if you’re not sure why basic styles might be better than not to use any of those two concepts.
Reset and basic styles alike should serve as a reminder to overwrite browser presets.

I don’t see the reason why you might declare, say, the first headline to have no margin (h1 {margin: 0;}), only to redeclare it to have a bottom margin (h1 {margin-bottom: 1em;}) a few lines later.
Basic styles should set all styles instead of resetting them. In order to make reset styles unnecessary, you only need to make sure to style every element and their necessary properties which browser default styles might add. And declare everything else that makes sense in your case.

So, ideally you should set and reset what you need at the same time. That’s what I’m doing with my basic styles.

Most of these styles are quite universal. I tried to keep them as generic as possible (e.g. with many shades of grey). But they are not meant to be taken without adjusting them to each project. You most likely want to change everything I marked with “§font”, “§fsize” and “§colour”.

They are already part of my DokuWiki Starter template and are will therefore be part of the new (soon to come) DokuWiki default template. I will provide an always up-to-date version apart from the following current version (2011-05-08): I will maintain them as basic.css on GitHub.


CSS Playing Cards

23rd August 2010

Some days ago a friend of mine told me that he would be interested in using pure CSS playing cards for a personal project. A few people have tried CSS playing cards before. But I wasn’t satisfied with any of our findings, as ideally they should be semantic, accessible and scalable, they shouldn’t use more markup than necessary and should be pleasing to the eye. So, I was up for the challenge and created them myself …