Creating a Stitched Effect Using CSS

By . Filed in Web Design

There are many visual effect possibilities we can achieve with CSS; the limit is only our creativity and imagination. This time, as the title suggests, we are going to try creating the stitched effect using only CSS and this screenshot below shows how out final output will look like.

Let’s get started.

Preparing Assets

First, we need resources to deliver the F icon of Facebook. In this tutorial, we are going to use this font: Modern Pictogram by John Caserta. We will also need an image for the background, and this time, we are going to use this linen texture from Premium Pixels.

Then, put all these things in appropriate folders, like so;

Structuring HTML Markup

Create a new HTML document and CSS file. Then, link the CSS file as well as the CSS Normalize in the <head> section, as follows.

<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
<link rel="stylesheet" href="css/style.css">

To create this icon, we only need a single div. Put this div below within the <body> section.

<div class="icon">F</div>

Styles

Now, we work on the styles and, as usual, we start off by adding the @font-face rule and add the linen background in the body document, like so.

@font-face {
    font-family: 'ModernPictogramsNormal';
    src: url('fonts/modernpics-webfont.eot');
    src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/modernpics-webfont.woff') format('woff'),
         url('fonts/modernpics-webfont.ttf') format('truetype'),
         url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
	background: url('../img/ios-linen.jpg');
}

Then, we add decorative styles to .icon, including specifying the height and width, add rounded corners, box shadow, and color gradient for the background.

.icon {

	font-family: "ModernPictogramsNormal";
	font-size: 4em;
	color: #fff;
	text-align: center;
	line-height: 0.406em;
	text-shadow: 1px 1px 0px rgba(0,0,0,.5);

	width: 65px;
	height: 65px;
	padding: 7px;
	margin: 50px auto;

	position: relative;

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;

	-webkit-box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .15);
	-moz-box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .15);    
    box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .15);

	background: #375a9a;
	background: -moz-linear-gradient(top,  #375a9a 0%, #1b458e 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#375a9a), color-stop(100%,#1b458e));
	background: -webkit-linear-gradient(top,  #375a9a 0%,#1b458e 100%);
	background: -o-linear-gradient(top,  #375a9a 0%,#1b458e 100%);
	background: -ms-linear-gradient(top,  #375a9a 0%,#1b458e 100%);
	background: linear-gradient(to bottom,  #375a9a 0%,#1b458e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#375a9a', endColorstr='#1b458e',GradientType=0 );
}

The Stitched

Regarding the stitched effect, we are going to add it with pseudo-elements, :before and :after. We will first specify their height and width as well as rounded corners, which is smaller than their parent element, .icon.

.icon:before, .icon:after {
	content: "";
	display: block;
	width: 63px;
	height: 63px;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	position: absolute;
}

Then, we add these pseudo-elements with dashed border, but each will have a different color. The :before will be in dark blue, like so.

.icon:before {
	border: 1px dashed #0d2b5e;
}

Whilst the :after pseudo-element border will have white color with low intensity, we define it with RGBA color mode. Furthermore, we also need to position the :after element 1px from the top and 1px from the left, so its border line is noticable.

.icon:after {
	border: 1px dashed rgba(255,255,255, .1);
	top: 7px;
	left: 7px;
	margin-top: 1px;
	margin-left: 1px;
}

That’s all the codes we need. Here is the result and you can download the source from these links below.

Author:

Thoriq has been dabbling in Web Design for 5 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.

Tags:

Advertisement