Gradum Ante Instructional Series

Today we will be doing a very simple stitch CSS only effect. What we fist want to do is get your favorite IDE fired up and make a simple html page. A bare bones page should look like this:

 

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">      
    </head>
    <body>
        <!--[if lt IE 7]>
            

You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.

        <![endif]-->        
    </body>
</html>

What we want do do now is add a style tag right in the head so that we can do the work as simple as possible. Also add one plain div tag in the body, and
you should have something that looks like this now:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

    </head>
    <body>
        <!--[if lt IE 7]>
            

You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.

        <![endif]-->
        

<div></div>


    </body>
</html>

Ok, awesome, now, lets ad some CSS markup, and then we will explain what is going on.

  div {
      width:400px;
      height:400px;
      border: dashed 1px #d9d9d9;
      background: #0d0d0d;
      box-shadow:0 0 0 5px #0d0d0d;                
      border-radius: 10px;                    
      }

Ok so what is going on here is we are making the div 400 x 400 pixels. That is pretty straight forward, then we are making a dashed border, that is 1 pixel wide with a very dark grey background.
Next we are using the CSS box-shadow property, and adding a non blurred effect to it. The CSS numbers mean this (in my code) the first “0” is the horizontal value, positive to move the shadow right, negative to move left, there is no value so the shadow is going to stay right behind he div. The second “0” is the vertical value, that works the same way, positive for down, negative for up. The third value is the blur effect, I have no blur effect, the fifth value, (my 5px) is the spread, meaning how far the “shadow” will protrude from the div. All these are in pixels, so try experimenting. The final value is the color, we make it match in this case to the background of the div because we are looking to make a stitched effect. And there we have it, the final product should look something like this:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20div%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A400px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A400px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border%3A%20dashed%201px%20%23d9d9d9%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%230d0d0d%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A0%200%200%205px%20%230d0d0d%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%2010px%3B%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin%3A50px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

    </head>
    <body>
        <!--[if lt IE 7]>
            

You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.

        <![endif]-->
        

<div></div>


    </body>
</html>

Stitched CSS Effect

There are many tools out there for experimenting with the Box Shadow feature, my favorite is here.

Please feel free to contact us with any questions, or, if you would like some custom work done!