CSS3 - Up In Stitches!

creating a stitched effect, way cool...

Code Library »

Stitched Leather Look

White Leather

Below is the same setup just downloaded a different color swatch.

Brown Leather

Do you need Swatches for your next project?

These swatches and others are found at: Subtle Patterns website

How It's Done

HTML

<div class="swatch1">
	<div class="wht-outer-stitch">
		<div class="wht-inner-stitch">
			<p>White Leather</p>
		</div>
	</div>
</div>
<br />
<p class="text-primary">Below is the same setup just downloaded a different color swatch.</p>
<br />
<div class="swatch2">
	<div class="drk-outer-stitch">
		<div class="drk-inner-stitch">
			<p>Brown Leather</p>
		</div>
	</div>
</div>

CSS

Set the image as the background and round the corners

.swatch {
	width: 300px;
	height: 295px;
	position: relative;
	background-image: url('white_leather/white_leather.png');
	border-radius: 5px;
	box-shadow: 3px 3px 8px 1px rgba(0,0,0,0.5);
}

Establish a "dashed" border.

.swatch .outer-stitch {
	position: absolute;
	width: 290px;
	height: 285px;
	margin: 5px;
	border: 2px dashed white;
	border-radius: 10px;
	box-shadow: 0px 0px 1px darkgray;
}

HINT:

The "trick" is to use the box-shadow tag, shown above, to create an outside shadow around the border. Then, in the next frame below, we will create another border-shadow tag to create a shadow on the inside of the "dashed border"

Positioning the typography on the swatch.

.swatch .outer-stitch .inner-stitch {
	position: absolute;
	top: 0;
	left: 0;
	width: 285px;
	height: 280px;
	border-radius: 10px;
	box-shadow: 0px 0px 1px darkgray;
}

Giving the typography some pressed effect with shadows.

.swatch .outer-stitch .inner-stitch p {
	font: 25px Georgia, serif;
	color: white;
	font-weight: bold;
	line-height: 280px;
	text-align: center;
	text-shadow: 0px -2px 2px darkgray, 0px 2px 2px darkgray;
}