Recently, having placed the idea on the back-burner for a long time, I finally decided to delve into the emerging world of CSS art. Whilst it would utilise the many features that are offered by CSS3, their application would be somewhat different from the day-to-day usage of building modern and innovative user interfaces. The result of my foray into this world is shown below (and can be seen at this URL: www.markbokeeffe.com/peeping-tom).
I have been working with CSS for many years: first of all as a Web Developer and then later as a Front-End Developer. As front-end technologies have evolved, so too has the role of CSS. In the earlier years, CSS tended to be used mainly for layouts and minor visual enhancements. Designs were often implemented mostly through the use of
.png image files, either as HTML
img elements or as CSS
background-image values. CSS sprites were popular and were widely used to create artistic back-drops to pages or elements on a screen. The result was that a standard static website could be enormously large in terms of file size, due to a large extent to the number of image files that were used to implement the design.
Where CSS Becomes A Paint Brush
On the back of the stronger power of CSS in creating visual designs and effects, a new genre of art has sprung up which demonstrates its capabilities. I have been very impressed by many of the CSS implementations that I have seen online and for some time, I have thought that it was something that I would like to try. In my spare time, I very much enjoy portraiture (see my website at www.markokeeffe.ie for examples of my work) and I have wondered if I could achieve a visualisation of part of the human face, purely through CSS.
Creating The Effect Of The Human Eye Via CSS
The human eye is full of interesting details. Although no twos eyes are visually the same — they come in different shapes and sizes — they generally do share a set of common attributes. CSS3 provides the tools to replicate many of these attributes — particularly
The iris was created as a
div with equidistant
width. With a
border-radius of 50%, a simple circle was created. Within this, the pupil was similarly created, with of course smaller dimensions. And inside of the pupil, two much smaller
divs were created as the pupil white spots — one with less
opacity, as the minor spot.
The iris was the perfect candidate for the
radial-gradient function, as I set the colours to transition from a deep blue on the outer edge, via bright purple and then on to green. For the multitude of dark narrow axes that cross a pupil, I created a painstaking list of
divs, each of which had low
opacity but enough visibility to create a realistic portrayal of the iris. I spaced these lines in a purposely irregular manner, in order for them to appear more natural. The CSS
transform property was relied upon heavily here, in order to appropriately rotate the lines around the iris. These lines ensured that the CSS files would swell significantly. However, as mentioned above, for this challenge, I was content to accept such swollen CSS. Finally, I placed the iris inside another slightly larger
border-radius: 50%, in order to place a slight, faint shadow around it.
The eye-ball, in order to take its final shape, required full manipulation of the four
border-radius values of the
div (they ended up as
343% 91% 136% 34%). This then was placed within an eye-frame
div, which provided for the lower eye-lid and socket depth. Its
border-radius mirrored that of the eye-ball
div, but by themselves, that was not enough to solve the problem of the overall eye shape. In order to force a more likely shape on the eye-ball, I was required to create a pseudo-element on the eye-frame
div, by use of
:after. This enabled me to place an absolutely positioned element with greater
z-index over the top right of the eye, in order to cover an unnaturally shaped upper right portion of the eye-ball
div. I also added a
transform of three degrees on the
div in order to make it less ‘comic-book’ style.
For the sclera of the eye (the white substance surrounding the iris), I gave it a
background-color value of off-white, and added some
box-shadow values in order to give it the depth that it required. I layered another
div over the upper area of this, with very low
opacity in order to create a shadow effect that would be cast by the upper socket. Finally, in order to replicate the caruncle (the small pink / red corner that is present in the human eye), I placed one more
div — pinkish in colour — in the left corner of the sclera, with a strong
box-shadow effect in order to create the effect of its fluid texture.
The upper and lower eye lashes were created as sets of long lists. In a similar manner to the iris axes,
transform was used heavily in order to create the desired effects.
For the skin and upper cheek, a number of layered
divs were added with
linear-gradient, again to create an impression of some depth.
A simple eye was no good on its own. It needed some context. The natural solution seemed to be to place it within a peep-hole, and a wooden fence provided a good opportunity for this. Suddenly, the eye became that of a ‘Peeping Tom’ and a subtle animation of the iris would only enhance that. This was achieved through a straight-forward
@keyframes rule. And with that, the job was done.