Posts from category ‘CSS / CSS3’

Flexbox.ninja – Learn Flexbox thought use cases

Read the post

Flexbox.ninja is a project I started a few years ago and that I had never taken the time to finish and publish. I wanted to propose at least 6 common use cases, but the web people suggested that I publish it with 3 cases and open it to contributions. That’s done, now let’s look at it in more detail.

CSS Smooth-scrolling with scroll-behavior

Read the post

Recently in a small project, I had to build something quickly, like a prototype, which contains some little things like a sticky menu, a scroll-spy, mixed with a smooth-scrolling behavior. Some features that often ask to spend time on JavaScript coding. Well, not this time.

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?

Fast-tap: remove the 350ms delay on iOS

Read the post

You certainly know that weird feature on your smartphone that blocks your actions during a little delay (350ms) when you tap an item on your screen? Some JS scripts can be implemented to avoid that delay, but often without any side effect… Today, it’s possible to do it with only CSS!

Vintage Washed effect on photographies in CSS

Read the post

The Vintage Washed effect is actually fashionable. The “users” of this effect are looking for an old aspect, they want to give to their photographies a kind of history by giving them an aged appearance, some people talks about an “authentic” appearance. Let see how to reproduce that effect with CSS.

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.

Natural Flow First

Read the post

Last week, I worked on a new short web project: the WP Media Company website. It’s a single web page with some typical sections and subtle animations. I was ready to code it with a Mobile First method, and I finally thought about a more natural one. I named it: (Natural) Flow First.

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.