Skip to content

Posts from category ‘Tutorials’

Custom Counters in pure CSS

Read the post

CSS, since its version 2.1, offers a relatively unknown counter system due to an old incompatibility on IE. Some of you will probably defend the following position: CSS is not made for that, you have to use JavaScript. So be it! But know that it exists, and discover how to use it. Small introduction!

Customize checkbox and radio button with CSS

Read the post

In the past, I worked on several projects looking for a way to deal with custom styled proposed by some good designers to change aspect of form controls like checkbox, radio, file input, etc. As you may know, these elements are historycally not stylable for an accessibility reason. (as I heard). Still. I have a way to style checkboxes and radio buttons… Ready?

Copy into clipboard with JavaScript

Read the post

You certainly already met those buttons to “Copy into Clipboard”. They usually use a trick made with Flash to overcome a security feature provided by our web browsers? Avec the evolution of JS API and the listening of developer requests, you can now (since some months) do it with JavaScript natively.

Create a Sticky menu with CSS and JavaScript

Read the post

I recently worked on several websites, and the request for a sticky menu was almost systematic. Sometimes it was justified, sometimes I approached the stereotypical ergonomic counter-example. But still! Let’s see together how we can do that.

A more performant “onresize” and “onscroll” in JS

Read the post

If you are a frequently user of JS, you have certainly noticed that some events are triggered quite occasionally, and others can be triggered very frequently and become quite difficult to manage, as in the case of “onscroll” and “onresize” for example.

Advanced drop shadows with CSS3

Read the post

I use the name “CSS3″ only for its “commercial” aspect. Actually, we will use my two favorite pseudo-elements :after and :before which are available since CSS2.1. I mean they are available since a long time ago… Demos you see in the demo page are composed with only one unique <div> and some CSS properties.