In this series, of exploring CSS functionality from the (hopefully, very near) future, I look at the :is() pseudo-class.   View :is() Demo Concept The :is() pseudo-class takes a selector list as its argument, then selects any element that can be selected by one of the selectors in that list. It can be seen as […]

In this series, of exploring CSS functionality from the (hopefully, very near) future, I look at the ::marker pseudo-element.   View ::marker Demo Concept The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number, thus allowing them to be styled or have their content value customized. […]

In this series, of exploring CSS functionality from the (hopefully, very near) future, I look at the aspect-ratio property.   View aspect-ratio Demo Concept Use of aspect-ratios comes in handy when displaying multimedia (photos, videos etc.) elements on web pages; with some of the common ones we encounter including: 1:1, 3:2, 4:3, 8:5, 16:9. The idea […]

CSS Variables! They’re finally available and supported in all browsers – Yeay! … Well almost all.

Over the years, developers have been trying different methods for laying out content in the browser; going from tables to float, flexbox (which did really well, actually) and now Grids, which are presently the most powerful layout system in CSS. So what are CSS Grids? It is a layout system, which excels at dividing a page […]

In this tutorial, we style Radio Buttons and Checkboxes with pure CSS; CSS3 to be specific and without the use of images.     View Radio Button Demo   View Checkbox Demo Background HTML forms and accompanying input elements, including radio buttons and checkboxes, are indispensable in web design, but until the recently, they have not been easy to […]

In this tutorial, we create a HTML and CSS only accordion, using the radio button method.     View Demo Background Accordions are graphical control elements, which comprise a vertically (or horizonally) stacked list of items, such as labels, headings or thumbnails. Each item can be “expanded” or “stretched” to reveal the content associated with […]