Box w/ Stich'n

Simple div box with a stiching outline border. All css What is a box w/ stich'n How do you make a box w/ stich'n? This script and codes were developed by Brad Bodine on 15 October 2021, Friday.

How do I make an box w/ stich'n?
  1. Box w/ Stich'n Previews
  2. Box w/ Stich'n HTML Codes
  3. Box w/ Stich'n CSS Codes
  4. Box w/ Stich'n JS Codes
Box w/ Stich'n Previews

Box w/ Stich'n HTML Codes

<!DOCTYPE html>
<html >
<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>

Box w/ Stich'n CSS Codes

@import url(http://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;
}

Box w/ Stich'n JS Codes

// Forked from http://cssdeck.com/labs/full/fe1egt0a
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.