Sketchy Box

What is a sketchy box How do you make a sketchy box? This script and codes were developed by Mnicpt on 03 October 2021, Sunday.

How do I make an sketchy box?
  1. Sketchy Box Previews
  2. Sketchy Box HTML Codes
  3. Sketchy Box CSS Codes
  4. Sketchy Box JS Codes
Sketchy Box Previews

Sketchy Box HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Sketchy Box</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="wrapper">
  <div class="sketchy box">
    <div class="content">
      Content section with a hidden overflow when there is a massive amount of text
    </div>
    <div class="ellipsis">...</div>
  </div>
  <div class="sketchy box">
    <div class="content">
      Some other content that 
    </div>
    <div class="ellipsis">...</div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

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

</body>
</html>

Sketchy Box CSS Codes

.wrapper {
  margin: 20px auto;
  width: 80%;
  text-align: center;
}

.sketchy {
  margin: 20px;
  font-size: 12px;
  float: left;
}
.sketchy.box {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  padding: 1.4%;
  width: 100px;
  height: 100px;
}
.sketchy.box .content {
  position: relative;
  width: 100%;
  height: 96%;
  max-height: 100px;
  overflow: hidden;
  text-overflow: "";
  z-index: 100;
}

.ellipsis {
  display: none;
  content: '...';
  position: absolute;
  bottom: 17px;
  right: 2px;
  width: 2em;
  height: 1em;
}

.sketchy:before {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 88px;
  height: 96px;
  border-left: 3px double #444;
  border-right: 3px double #444;
  transform: rotate(-1deg);
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg);
  content: "";
  z-index: 50;
}

.sketchy:after {
  position: absolute;
  background-color: rgba(255, 212, 84, 0.5);
  top: 8px;
  left: 1px;
  width: 98px;
  height: 80px;
  border-top: 3px double #444;
  border-bottom: 3px double #444;
  transform: rotate(-1deg);
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg);
  content: "";
  z-index: 50;
}

Sketchy Box JS Codes

(function() {
  var content = document.querySelectorAll(".sketchy.box .content"),
      box = document.querySelectorAll(".sketchy.box");
  
  for(var i = 0; i < content.length; i++) {
    var thisContent = content[i],
        clientHeight = thisContent.clientHeight,
        text = thisContent.nextSibling,
        boxHeight = box[i].clientHeight,
        fontSize = window.getComputedStyle(content[0]).getPropertyValue("font-size").split("px")[0],
        rows = (boxHeight - (fontSize * 2)) / fontSize,
        contentLength = thisContent.innerHTML.split("").length;

    if (contentLength >  parseInt(fontSize, 0) * rows) {
      thisContent.nextSibling.nextSibling.style.display = "block";
    } else {
      thisContent.nextSibling.nextSibling.style.display = "none";
    }
  }
  
})();
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.