Javascript Code: Protruded Text Box

To highlight a text, it is not necessary to always use colors. You can put your text in a protruded text box. It will look like it was written on a stone. Looks amazing!

<!-- this script got from www.javascriptfreecode.com coded by: Kerixa Inc. -->
<style>
:root,
:host,
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  letter-spacing: 0.5px;
  text-rendering: geometricPrecision;
  background: -webkit-gradient(linear, left top, right bottom, from(#fa8ced), to(#fffd90));
  background: linear-gradient(to bottom right, #fa8ced, #fffd90);
  color: #222;
}
:root .container,
:host .container,
html .container,
body .container {
  background: -webkit-gradient(linear, left top, right bottom, from(#fa8ced), to(#fffd90));
  background: linear-gradient(to bottom right, #fa8ced, #fffd90);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: grid;
  place-content: center;
}
:root .container .card,
:host .container .card,
html .container .card,
body .container .card {
  padding: 3rem;
  border-radius: 10px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3), -3px -3px 6px rgba(255, 255, 255, 0.3), inset 2px 2px 5px rgba(255, 255, 255, 0.3), inset -2px -2px 5px rgba(0, 0, 0, 0.3);
}
:root .container h1,
:host .container h1,
html .container h1,
body .container h1 {
  margin: auto;
  margin-bottom: 1.5rem;
  width: 90%;
  max-width: 300px;
}
:root .container p,
:host .container p,
html .container p,
body .container p {
  margin: auto;
  max-width: 300px;
  width: 90%;
}
</style>
<div class="container">
<div class="card">
<h1>Lorem ipsum dolor</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum odio dignissimos sapiente. Veritatis vitae reiciendis repellendus, debitis qui aspernatur a doloribus eveniet sequi quisquam! Eos, totam repudiandae dolor dolores quam hic, id non aliquid
asperiores nisi molestias odio reprehenderit quas architecto nobis nulla cum inventore ex perspiciatis corrupti saepe accusantium?
</p>
</div>
</div><a target='_blank' href='http://www.javascriptfreecode.com/' style='font-size: 8pt; text-decoration: none'>JavaScript Codes</a>

If you don't know how to use this code or need more information Click here!

Javascript Best Codes

Javascript Code: Protruded Text Box

Review

Links