A cool CSS spinner with LESS variables

This is a quick and dirty translated post I wrote in French some time ago.

I was playing with some css 2D transforms when I kinda ended with this css spinner 🙂 I chose LESS and yes I could have used SASS, sorry for fan boys :P.

The spinner itself

The HTML code

<div class="loader rspin">
  <span class="c"></span>
  <span class="d spin"><span class="e"></span></span>
  <span class="r r1"></span>
  <span class="r r2"></span>
  <span class="r r3"></span>
  <span class="r r4"></span>
</div>
Continue reading “A cool CSS spinner with LESS variables”

Expand clickable areas for a better touch experience

expand-areaOn mobile phones / tablets, where touch gestures comes into place, it’s sometimes hard to target little links with your finger. Mostly because it was primarily designed for a desktop use. Jacob Rossi, an Internet Explorer 10 engineer who worked on the awesome Microsoft’s pointer API (yeah true story man), said at the 2013 W3Conf that every touch oriented elements should be at least 40×40 pixels wide, to ensure the best user experience.

Continue reading “Expand clickable areas for a better touch experience”

Animate png sprites with css3 animations

Here’s a demo I made on Codepen that let’s you play with Ken (from Street Fighter II). There are several moves, like jumping, walking, etc and of course there’s the famous Hadoken! 🙂 It’s made with only CSS transitions and a minimum of javascript that let’s you control Ken.

See the Pen Ken’s Street Fighter II with animated sprites by Julien Knebel (@jkneb) on CodePen.

UPDATE
And here’s the post I wrote for the David Walsh Blog → where I explain how it works in details.

Continue reading “Animate png sprites with css3 animations”

CSS transition from a fixed px width to an auto width

I was struggling trying to animate the width of a <div> from a fixed px width to a 100% (or auto) width. The idea was to have a completely fluid 2 columns layout. A main col taking all the space and a right col with a fixed width. Then, on a particular user action, the right col animates until taking all the remaining space (overlapping the main col). I needed to achieve the effect only with css transitions.

Here’s how I did it…

Continue reading “CSS transition from a fixed px width to an auto width”

How to target old versions of Internet Explorer in our CSS in 2013

This is how I like to do in my projects, it may be or may be not the best solution but it works just fine for me, hope you’ll find it useful.

I find myself following these 2 rules :
* Is there a better approach in order to avoid specific ie version targeting?
* If ie specific styles are required, how can I avoid code scattering at all cost?

Continue reading “How to target old versions of Internet Explorer in our CSS in 2013”

Pure CSS 3 fancy separator

I recently had to reproduce a fancy “kinda separator” and I gave it a try in pure css. The result is quite cool. It works like a charm in ie9, Chrome, Safari, Opera and Firefox.

If you’re using Firefox you’ll notice (or not) that the dashed rounded border is “solid” rather than being “dashed” (inside the white circle)… Well there’s a bug about it in Firefox opened since 2007… dashed border simply doesn’t work when a border-radius is applied to it. Too bad… Well the guys at Webkit’s have the solution, wonder why Firefox didn’t implemented it jet.

Anyway the :after shadow border works great every where I tested it so it’s a quite robust ie9+ technique. I need to apply a degraded version for ie8, maybe just a simple grey border.

Here’s the Codepen version. You can play with the tabs to see how it works underhood.

See the Pen Shadow separator by Julien Knebel (@jkneb) on CodePen.

Get rid of the black layer when click event on iOS

On iOS devices, when you click on something you get this black semi-transparent layer for a second or less. What if you would to hide it?

To get rid of it you can apply this css rule:

a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

It says every single “a” elements will be black (the 3 first values of the rgba function) and completely transparent (the last value, 0 means fully transparent, 1 means fully opaque).

-webkit-tap-highlight-color is an iOS css rule so you’re targeting only Apples devices.

But this selector is a bit to wide, adjust it in each case, something like this would be maybe more appropriate:

.btn, input, select, .navbar a,
.close-btn, .etcetera {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

As a side note, be aware that you may need to add an !important at the end of the rule to make it override every thing. Usually !important are considered as bad practice but here you’re targeting only iOS devices and on a very limited use case.

Resources

* Official Apple Documentation (with many other iOS css rules)

How to make absolute positioned elements overlap their overflow hidden parent

I believe, every front-end developer encountered this situation, at least once. Let’s say you need to absolute position something… And then you try to move it in some direction, and boom it disappears… You forgot the parent was set to overflow:hidden and now your element is lost in the hidden infinite vacuum.

Well, usually it ends by putting the absolute element outside of the annoying overflow:hidden parent, and you grumbling about how CSS sucks and so on… Actually you’re quite right. CSS do sucks a lot, even CSS3, I mean … ok no troll here 🙂

Let me show you a neat trick.

Continue reading “How to make absolute positioned elements overlap their overflow hidden parent”