Kasper Tidemann - human, developer, businessman, man of the world.
From our hands we give.

Category: CSS

Preventing Mobile Safari from upscaling font sizes

The other day, I noticed Mobile Safari on iPhone 6 was resizing the font sizes of my p tags when in landscape mode. The fonts rendered would be upscaled and not match the font-size: 18px; declaration in my CSS. After digging through the latest documentation, it appears there is a declaration for managing how fonts […]

Card – make your credit card form better in one line of code

Setting up payment options for the next big thing you’re just about to launch can be somewhat of a pain. Not only do you have to integrate with oftentimes curiously-looking APIs, it also has to be a pleasant experience for others to give you money. Jesse Pollak has taken a stab at the latter with […]

Improving CSS animation performance in Chrome

If you’re like me, you get a tickly feeling when working with CSS animations. Just the right sprinkle will spark magic and bring about it committed users. Well, not always since animation performance can be quite terrible, especially in Chrome. Reaching 60 fps in the browser is hard in general, but there has to be […]

Creating 3D worlds with HTML and CSS

Just recently, I stumbled upon a truly breath-taking experiment by Keith Clark: his take on how to create worlds in 3D using just HTML and CSS (and a sprinkle of JavaScript). In his blog post, he goes on to explain how to simulate lighting, shadows, and collisions – interesting stuff for anyone with first-person gaming […]

CSS3 Photo Stack

Randomly searching through the web for something else, I stumbled across this neat photo stack made in CSS3 by Ryan Collins using just a bit of JavaScript code for adding classes to div elements. This goes to show the power of transform, transition, and the :before and :after pseudo elements. Take a look for yourself […]

How to force word wrap using CSS

On this blog, I have several code examples with a grey background like this: some fancy code. All the code examples are contained within <span> tags. But what if a span tag contains a word – say, a path to a file on a Linux server – that is longer than the width of the […]

CSS3 PIE: CSS3 decorations for IE

In the projects I maintain, I’ve stopped supporting Internet Explorer 8 and below. For the Internet Explorer 9 users, there’s a bunch of CSS3 bells and whistles that they don’t see. Until now, that is. Micki Rasander Pedersen pointed me in the direction of CSS3 PIE, a 40 kB library for making Internet Explorer 6-9 […]

jQuery Transit – CSS3 animations for jQuery

I recently stumbled upon jQuery Transit, a library for making use of CSS3 transitions and transformations instead of the plain old changing of style values based on a timer. To bring it to life, you simply need to use $(..).transition() instead of $(..).animate() – and there you go.

Kasper Tidemann