CodePen

HTML

            
              <h1>3D Inset Parallax Effect</h1>

<p class="inset">The following is an example of how you can create the illusion of a 3D inset block-level element (with parallax on scroll position) using some basic CSS and jQuery. To see the effect in action, just scroll the page.</p>

<h2>Example Form:</h2>

<form>
  <label>
    First Name:
    <input class="inset" type="text" placeholder="Enter First Name" />
  </label>
  <label>
    Last Name:
    <input class="inset" type="text" placeholder="Enter Last Name" />
  </label>
  <label>
    Email Address:
    <input class="inset" type="text" placeholder="Enter Email Address" />
  </label>
  <label>
    Address:
    <input class="inset" type="text" placeholder="Enter Address" />
  </label>
  <label>
    Phone Number:
    <input class="inset" type="text" placeholder="Enter Phone Number" />
  </label>
</form>

<h2>Example of Tall Elements:</h2>

<p class="inset">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in felis sem, eget scelerisque risus. Integer mollis lorem sit amet justo pellentesque cursus. Quisque et eleifend ligula. Quisque malesuada mauris quis enim lacinia ultricies. In nec odio euismod nulla elementum vehicula. Mauris purus quam, sodales vel mollis cursus, volutpat ac odio. Vestibulum in iaculis tellus. Fusce lectus eros, blandit a tristique sit amet, interdum id est. Integer varius ultrices tempor. Vestibulum volutpat ipsum a leo volutpat pretium. Proin vitae dolor urna, a dapibus nunc. Mauris volutpat ornare commodo. Nunc vehicula feugiat nisi ac vulputate. Ut ultrices sem non nulla vulputate imperdiet. Proin ipsum enim, molestie ac varius quis, mattis non felis. Phasellus orci eros, tristique eget iaculis eget, ornare non ligula. Pellentesque porta dui et turpis sodales ac sodales purus tristique. Aliquam dictum nibh magna. Aliquam hendrerit ultricies sem. Sed porttitor interdum faucibus. Nunc ac mollis lectus. Suspendisse dui urna, dictum sed condimentum nec, tristique sit amet ipsum. Ut non augue sit amet magna accumsan ullamcorper sit amet ut mauris. Pellentesque venenatis dapibus quam vitae egestas. Ut pulvinar, est sed sagittis porttitor, dui leo semper quam, vel euismod mauris purus eu lacus. Aliquam erat volutpat. Suspendisse justo urna, rhoncus eu bibendum eu, posuere eget ligula.</p>

<p class="inset">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in felis sem, eget scelerisque risus. Integer mollis lorem sit amet justo pellentesque cursus. Quisque et eleifend ligula. Quisque malesuada mauris quis enim lacinia ultricies. In nec odio euismod nulla elementum vehicula. Mauris purus quam, sodales vel mollis cursus, volutpat ac odio. Vestibulum in iaculis tellus. Fusce lectus eros, blandit a tristique sit amet, interdum id est. Integer varius ultrices tempor. Vestibulum volutpat ipsum a leo volutpat pretium. Proin vitae dolor urna, a dapibus nunc. Mauris volutpat ornare commodo. Nunc vehicula feugiat nisi ac vulputate. Ut ultrices sem non nulla vulputate imperdiet. Proin ipsum enim, molestie ac varius quis, mattis non felis. Phasellus orci eros, tristique eget iaculis eget, ornare non ligula. Pellentesque porta dui et turpis sodales ac sodales purus tristique. Aliquam dictum nibh magna. Aliquam hendrerit ultricies sem. Sed porttitor interdum faucibus. Nunc ac mollis lectus. Suspendisse dui urna, dictum sed condimentum nec, tristique sit amet ipsum. Ut non augue sit amet magna accumsan ullamcorper sit amet ut mauris. Pellentesque venenatis dapibus quam vitae egestas. Ut pulvinar, est sed sagittis porttitor, dui leo semper quam, vel euismod mauris purus eu lacus. Aliquam erat volutpat. Suspendisse justo urna, rhoncus eu bibendum eu, posuere eget ligula.</p>
            
          
!

CSS

            
              html {
  background: #f5f5f5;
}

body {
  width: 470px;
  margin: 20px auto;
	color: #333;
  font: 14px/1.6em Arial, Helvetica, sans-serif;
}

h1 {
  padding: 15px 30px 15px;
  color: #f5f5f5;
  font-size: 32px;
  text-align: center;
  background-color: #900;
}

label {
  display: block;
  margin-bottom: 1em;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
}

input[type=text] {
  margin-bottom: 0.5em;
}

input[type=text]:focus {
  outline: none;
  background: #f9f9e9;
}

p {
  margin-bottom: 2em;
}

.inset {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.5em;
  background: #f9f9f9;
  border-style: solid;
  border-width: 30px;
  border-top-color: #e5e5e5;
  border-right-color: #eee;
  border-bottom-color: #e5e5e5;
  border-left-color: #eee;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var origBorderWidth = parseInt($('.inset').css('border-top-width')),
    win = $(window),
    insets = $('.inset');

function set3D() {
  var windowHeight = win.height();
  
	insets.each(function() {
		var self = $(this),
			scrollHeight = win.scrollTop(),
			elementPosition = self.position(),
			positionPercentTop = Math.round((elementPosition.top - scrollHeight) / windowHeight * 100),
      positionPercentBottom = Math.round((elementPosition.top + self.outerHeight() - scrollHeight) / windowHeight * 100);
		
		self.css({
			'border-top-width' : origBorderWidth - (origBorderWidth * (positionPercentTop / 100)) + 'px',
			'border-bottom-width' : origBorderWidth * (positionPercentBottom / 100) + 'px'
		});		
	});
};

set3D();
	
win.on('load scroll resize', function() {
	set3D();
});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................