Turn HTML into a Photoshop

Here we are again. Fighting with the code making it graphical pleasing.
Where are the days of the Dreamweaver were we thrown the images on the surface and all the gibberish were written for us automatically?
The are gone, Luckily gone.

Some say the code is poetry. Some see the website graphically and want it to be as beautiful as photography is.
I see no problem in it.

The picture, g.. damn pictures, Square objects.. no fun..
Sure pictures are squared but there is a way how to convince them to take any shape you like.

Consider this out.
The Photo editor has layers right? We stuck each layer on top of the other apply the effects to cut this part this way that part other way. The assembly of all the content layers is what makes it stand out, it is the way how we can create complex graphical layout.
And it is the same in HTML.

By default all objects are aligned like bricks.

html

No overlapping. No layers. But!
There is actually one “layer” like structure already. The container that holds the text or what ever you have can have a background defined, and image if you like.. we all know that. This is really powerful already.

Say we have a image, but we do not want to show it all just a part.

html_image

The div, the container is basically a cutting mask, even more it is non destructible mask, Meaning it won’t cut the image it’ll just oncovers its part as like window lets you see slice of the world behind.

html_image_cut

Where are the layers then? Well anything in side the object actually lays on top of it. Like the text you write in the object.

html_image_cut_letter

Even the background of the page can have background which can be considered as another layer.

html_image_cut_letter_grad

The container can change its shape and so cut the image with it.

html_image_cut_letter_grad_mask

Unlike in Photoshop and the like where picture is just a picture, the HTML is interactive.
All the container and its properties can be changed for example while the mouse hovers over it.

The CSS is :

.container{
  background:url(lizard.png);
  opacity: 0.3;
}
.container:hover{
  background:url(lizard.png);
  opacity: 1;
}

In plain words.
The container will have a lizard picture as its background plus it will all be semitransparent.
On mouse :hover the opacity goes to its max. it’ll become opaque.

The problem:
The problem is that the the containers opacity turn semitransparent everything in it as well ./ .. the text all of it, making the content unreadable in this case.

What the hell! This seams to be promising!

And so the opacity is of any help in our situation. There are many tricks how to accomplish it, but we also look for the easiest way how to do it.

So, if we cannot use the opacity, what if we blend between two background images? What if, one of them would be just an empty image – a transparent image.. Whoooaaaaaa ;]

<html>
	<head>
		<style>
			.block{
				/* background styles */
				height:200px;
				width:200px;
				border-radius:100%;
				background:url(alfa.png) black;
				transition: all 0.5s;
				/*  some font styling */
				color:black;
				font-size:3rem;
				/* move the text in center horizontaly and vertically */
				/* learn the tricks the frog way: http://flexboxfroggy.com/ */
				display:flex;
				justify-content: center;
				align-items: center;
			}
			.block:hover{
				/* background styles */
				background:url(lizard.gif) black;
				background-size: cover;
				transition: all 0.5s;

				color:white;
			}
		</style>
	</head>
	<body>
		<div class="block">
		    text
		</div>
	</body>
</html>

The result would be like this (hover over the point):

As you can see the HTML is not just yet another tedious Photoshop copy but something much more that beats the static picture in many aspects.
We can mask images, we can transform its shape interactively, we can change background images, anything that can be specified in one state can be changed in the other.

What is grate plus is that you create all the masks automagically. You do not need to cut all image to one shape or size in image editor over and over again for each “project picture”, you just set the class once and let it do it for you anytime you like. Plus if you want to generate for example a gradient over something, you can do it with CSS with few rows of code.. Imagine how huge would the image with decent quality for such a simple thing be?

What Photoshop gives you this possibility?

That is not all. If you really want the “real layers” the HTML/CSS has them too.
They are bit tricky to work with, but you asked for it.

Layers works for objects with either absolute, fixed, or relative position. All objects in HTML are static by default (W3schools).

The css would be:

Only this time the positioning will tore the elements out from the common HTML flow and the alignment will become much trickier than you might think.
Master the common elements keep the absolute/fixed&relative positioning for later.

all dandy posts