Box w/ Stich'n

In this example below you will see how to do a Box w/ Stich'n with some HTML / CSS and Javascript

Simple div box with a stiching outline border. All css

Thumbnail
This awesome code was written by bbodine1, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bbodine1 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Box w/ Stich'n</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="box">
  <h1>Box w/ Stichi'n</h1> 
  <p>...and some other text and stuff here.</p>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/bbodine1/box-with-stichandaposn-aAGqh */
@import url(https://fonts.googleapis.com/css?family=Leckerli+One|Handlee);
html {
  background-color: #e95b33;
}

.box {
  position: relative;
  background-color: white;
  width: 400px;
  height: auto;
  margin: 40px auto;
  padding: 10px;
  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, 0.2), 0 6px 0 #fff, 0 7px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, 0.2), 0 6px 0 #fff, 0 7px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, 0.2), 0 6px 0 #fff, 0 7px 0 rgba(0, 0, 0, 0.2);
}
.box:after {
  content: '';
  position: absolute;
  border: 2px dashed #ccc;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  -moz-box-shadow: 0 0 0 1px #fff;
  -webkit-box-shadow: 0 0 0 1px #fff;
  box-shadow: 0 0 0 1px #fff;
}
.box h1 {
  font-size: 3em;
  color: #2980B9;
  font-family: 'Leckerli One', cursive;
  text-align: center;
}
.box p {
  font-family: 'Handlee', cursive;
  text-align: center;
  font-size: 24px;
  color: #34495E;
}


/*Downloaded from https://www.codeseek.co/bbodine1/box-with-stichandaposn-aAGqh */
// Forked from https://cssdeck.com/labs/full/fe1egt0a

Comments