Hand-picked HTML and CSS code examples, tutorials and articles
CSS Gallery, jQuery plugins

Semantic HTML/CSS calendar-style date display

Semantic HTML/CSS calendar-style date display

Markup uses HTML5 element. CSS makes the date look like a calendar page. The position: absolute implementation works on all browsers. The inline-flex implementation requires a fairly recent browser: Ok in IE11, Chrome 29, Firefox 22; Broken in IE10, Chrome 28, Firefox 21, Safari 6.1, and most mobile browsers.

Author:
Denilson Figueiredo de Sá
Created:
date
Made with:
HTML, CSS

Find the Demo

See the Pen Semantic HTML/CSS calendar-style date display by Denilson Figueiredo de Sá (@denilsonsa) on CodePen.

Advertisement