Text inputs with icon and decorative line
on 1 August, 2016
The Input Icon component is greatly simplified by using background images. In this case, multiple background images, including an SVG and a linear gradient, have been used to achieve the left border on the icon.
Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box
on 20 July, 2015
CSS' clip-path property is your ticket to shape-shifting the monotonous, boxy layouts traditionally associated with flat, responsive design. Once you get your hands dirty with clip-path, there’s no end to the shapes you can generate, simply by tweaking a few values.
Published in Smashing Magazine, May 2015.
Styling SVGs inside image tags
on 24 March, 2015
You know the trade-off. Use the img tag to display an SVG, and you get clean markup — at the cost of styling the SVG using its properties like fill, stroke, SVG filters and more.
Pure CSS icons for app views
on 1 May, 2013
Multiple views are a useful UI feature to allow users to choose how they wish to browse content on a web application. The most common views are thumbnail, detail and list views. The icons for the same are pretty straightforward. Of course, in the spirit of resolution independence, I was dead against using raster graphics, so PNG and JPG file formats went out of the window.
