A CSS material design based slider useful for timeframes

A CSS material design based slider useful for timeframes

Tonight, I discovered that I can combine CSS pseudo selectors. I’m creating a timeline theme for personal use in WordPress that displays each blog ...

Tonight, I discovered that I can combine CSS pseudo selectors. I’m creating a timeline theme for personal use in WordPress that displays each blog post as part of a timeline.

A simple Facebook timeline built using pure html and css.

A simple Facebook timeline built using pure html and css.

Step by step tutorial for creating a Facebook timeline.

Step by step tutorial for creating a Facebook timeline.

A super lean, semantic and progressively styled timeline in HTML and CSS and one image

A super lean, semantic and progressively styled timeline in HTML and CSS and one image

In this tutorial we are going to experiment with perspective and use a radio input trick to create a fun CSS-only timeline-like structure. The idea...

In this tutorial we are going to experiment with perspective and use a radio input trick to create a fun CSS-only timeline-like structure. The idea is to show a teaser of an item and when clicking on the associated radio input, the content will expand and rotate in 3D, giving some depth to the whole thing. We’ll be using CSS 3D transform, transitions and sibling selectors.

This is a simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some ...

This is a simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some example media queries show how to adjust the timeline for smaller screens.

I wanted to build a CSS  timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as mu...

I wanted to build a CSS  timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup. In this article I’ll share my approach to creating a timeline out of CSS and HTML which results in a nice looking, simple timeline.

Simple timeline boxes created with CSS

Simple timeline boxes created with CSS

This is a revamp of the Timeline Style Blog Comments that was posted earlier. This has been made to look simila...

This is a revamp of the Timeline Style Blog Comments that was posted earlier. This has been made to look similar to the Facebook’s timeline by changing the colors and background details. Though everything else is same as the previous one. It has the proper spaces for avatars and the dividing lines are well established. It was created with HTML and CSS.

Code experiment for the first steps to create a nice and flat timeline with CSS

Code experiment for the first steps to create a nice and flat timeline with CSS

Great example of a timeline with CSS and the option to set the timeline horizontaly and verticaly. It also has expandable text boxes.

Great example of a timeline with CSS and the option to set the timeline horizontaly and verticaly. It also has expandable text boxes.