CSS Text experiments

Textured text


The code reproduced is the one from Tympanus you can see here. The structure used is reproduced below.

Text element, transparent with CSS property for stroke. Absolute positionned
text element that will take the .clipped texture
div with texture and .clipped class
div container with white background

/* textured text using clip */
.clipped {
/* -webkit-background-clip clips the background of the element to the text */
-webkit-text-fill-color: transparent; /* overrides the white text color in webkit browsers */
-webkit-background-clip: text;
.stroked {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #2d7d4e;