Transparent images

Hello Guest

Links

Google Search

Transparent images

+ Share and Enjoy

Author: Cristea Iulian

1 from 9 vots

Vote this article

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

We can create a transparency effect in many ways but here is a simple and a fast one.
We need only two lines of CSS and two images for our effect. It can be done in the same way for a fixed background using a fixed value for background attribute, but I will show you how to create a transparent effect for a background that you want to use it anywhere into a page.

First of all we need an image. The second one, that we will use for transparency we made it in Photoshop or into another application of this type.

In our case we have a 20 pixels view of image covered by the transparent one. As a first step, we create a duplicate from the first one and will cut 20 pixels from top and left of it form the left top corner. As a result we will have an image smaller with 20/20 pixels than the first one.

Now let's create another layer and fill it with whatever color we like, and set the transparency how much we need.

Now, having two pictures we'll create the html and css code.

This can be done using "div" tags but "table" are ok too or any other container. We use in our sample a "div" tag.

The first "div" will contain our non-transparent image and the second one will contain the transparent one.

We need to set "no-repeat" to the background because if we'll have a much heigher or wider content that won't be to nice.

Here is the css and html code used for this.

CSS

<style type="text/css">


.mainEffect
{
	background: url(image.jpg) no-repeat;
	padding-top:20px;
	padding-left:20px;
}
.contentEffect
{
	background: url(image.jpg) no-repeat;
}

</style>

HTML

<div class="mainEffect">
	<div class="contentEffect">
		your content goes here
	</div>
</div>

Be aware for any other padding and margin from your css because that can affect your entire effect.

At the first div we need to set a 20 pixels padding to top and left, those being the cutted one. And that's it. Enjoy.

+ post a comment

sitemap | terms and conditions | contact