Imagini transparente

Bine ai venit

Legaturi

Cautare google

cautare

categorii

css

» Butoane

» Transparenta

» Componente formular

html

» Implementari

» Taguri

» Tabele

» Marquee

javascript

» Dimensiuni

» Imagini

» Implementari

» Efecte text

» Meniuri

photoshop

» Efecte 3D

» Logo

» Lentile

php

» Securitate

Ai ceva de facut in cod, design sau animatie si nu stii cum?
Trimite-ne mail si-ti vom face tutorial ce va rezolva problema ta.

Documentatii pentru toate nivelele, de la incepatori la avansati, dar si pentru cei ce au nevoie doar de o 'bucata de cod'

Imagini transparente

+ Bookmark-uri

Autor: Cristea Iulian

1 din 9 voturi

Voteaza acest articol

Tutorial not available for this language. Only english version.

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.

+ posteaza un comentariu

sitemap | termeni si conditii | contact