Special Effects for Web

RUSSIAN

FAIRYTALE BOXES

This heading with an image background was created with two special styles specific to the webkit browser core code. Since the heading is text and not an outline, it is searchable on the web. CSS:

font: 128pt/1.4em 'Black Han Sans';
text-align: center;
margin: 36px 0 0 0;
background: url("1_DSC0067_1004.jpg");
filter: drop-shadow(2px 3px 6px gray);
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Russian Fairytale Boxes
Box Theme Characters Depicted English Counterpart
The Grey Wolf Ivan Tsarevitch, Helen the Beautiful, the Grey Wolf none
The Horse with the Golden Mane Ivan Tsarevitch and the Horse with the Golden Mane The Magic Pony
The Firebird Ivan Tsarevitch and the Firebird The Phoenix
Father Frost Father Frost, the Snow Queen, and a troika of horses Santa Claus

This table uses an image background with alternating trasnparent white rows to make the text more readable. Rows were selected with the “nth-child” pseudo-selector.

Russian lacquer art developed from the art of icon painting, which focused on religious characters, and became popular in pre-1900s imperial Russia. Artists painted intricate works on papier mache boxes which were later made from wood. Common subjects today include characters from popular fairytales.

This fancy drop-cap was created by enlarging the “R,” floating left, and adding a background and text shadow to enhance readability.

font-size: 4.5em;
float: left;
line-height: 0.85em;
margin: 0 2px -6px 0;
background: url("1_DSC0067_1004_ghost.jpg");
text-shadow: 2px 3px 0 white;
background-size: contain;
padding: 4px;