Experiment with a fake background

Recently I conducted an interesting experiment on the rotation of the block in CSS without the use of images and Javascript. The trial revealed a variant suitable for use within a block custom fonts without distortion.

##Design & Task

The design of the page was a container with content centered in 960 pixels, background some blocks stretched 100 percent of the browser window and turned to -3 degree.

You need to get correct display on all modern browsers including Opera 12.16. As for browsers not supporting rotate, to achieve security of content, without distortion (without distortion? why? read below). Should be possible shadows turned block. Turned block must take 100% width and height of the block-container.

##Solutions

The very first solution that came to mind is turning an entire block at -3 degree and return content at 3 degree.


	<div class="block">
		<span class="text">I turned back...</span>
	</div>


	.block{
		transform: rotate(-3deg);
		padding: 100px;
		background-color: black;
		text-align: center;
	}

	.text{
		display: block;
  		transform: rotate(3deg);
  		color: white;
  	}

I turned back...

All is well, but when using custom fonts MacOS platform in Google Chrome and Safari gave an annoying bug with rendering, as it turned out later and with strict Arial viewed the same problem. A way to solve this problem I didn’t find (if you have a solution, please post in two words a solution to my email address, I will be glad to discuss). Had to find an alternative solution.

##Experiment

I decided to experiment with the creation of fake background using pseudo-element specifying a parent, relative positioning, and the pseudo-element is absolute, using z-index to give pseudo-element to the layer below and stretch as background.


	<div class="block">
		<span class="text">...and I remained in place</span>
	</div>


	.block{
		position: relative;
		padding: 100px;
		background-color: transparent;
		text-align: center;
	}

	.block::after{
		content: " ";
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		background-color: black;
		transform: rotate(-3deg);
	}

	.text{
		position: relative;
  		color: white;
  		z-index: 1;
  	}

...and I remained in place

A fairly simple way, however, he decided tasks set before me. I think that this method is suitable not only in the case of rotation background, but in all other cases where you may need experimental background.