1

I want to make UI on web page like this. But I cant understand how should I do that. I tried z-index and I couldn't make the page like this.

This is transparent tile example

<style>
    .divilk {
        background-color: red;
        z-index: 1;
        width: 100%;
        height: 500px;
    }

    .divikinci {
        background-color: purple;
        width: 200px;
        height: 300px;
        margin-left: 200px;
        margin-top: 100px;
        z-index: 2;
    }

    .divtrans {
        z-index: -999;
        background-color: transparent;
        margin-top: 100px;
        margin-left: 50px;
        height: 50px;
        width: 50px;
    }
</style>
<div style="margin-top:100px;">
    <div class="divilk">
        <div class="divikinci">
            <div class="divtrans"></div>
        </div>
    </div>
</div>

And I tried divtrans's z-index:1.

MehmetF
  • 61
  • 1
  • 14
  • what have you tried? Code? We can't put an accurate answer if you don't show us your 'setup' first! otherwise, we can't help you and you can't easily adapt ANY answer – jbutler483 Sep 09 '14 at 13:12
  • You are asking us for a big job here... plus ther is not enough information to be able to answer corectly, for example, is the layout supposed to be responsive? and how should it react whent browser width changes? this question may help you : http://stackoverflow.com/a/22412842/1811992 – web-tiki Sep 09 '14 at 13:21
  • CSS opacity should help you get started. http://www.w3schools.com/cssref/css3_pr_opacity.asp – chconger Sep 09 '14 at 13:21
  • I already made tiles. This is sample code. I just asked how can hollow my divs(tiles) to show deeper background.In the picture there is a wallpaper with rain and 2nd wallpaper with pure black. Tiles are hollowed with Css. So this case, please help me :) – MehmetF Sep 09 '14 at 13:24
  • Probably there's a better way, but I think you may want to play with `background-image` and `background position` (specific for each box/link) – Alvaro Montoro Sep 09 '14 at 13:24
  • @MehmetF ok, I think I get your issue, please explain your issue clearly in the question so we can understand you issue. At first, I though you were asking how to make the layout. – web-tiki Sep 09 '14 at 13:26
  • Am I right, that you are asking for how to make transparent blocks that are positioned on a big image? – Andi Sep 09 '14 at 13:29

1 Answers1

2

I think what you're trying to do is create a kind of window through the black into some background image behind. That's not possible in CSS - you can't make part of an element transparent and leave the rest of it opaque.

As a possible workaround, you could set the background on each of the individual windows, and adjust the position using background-position. For example, something like:

.window {
    background-image: url('your-image.png');
    width:100px;
    height:100px;
    position:absolute;
    left:20px;
    top:20px;
    background-position:-20px -20px;
}

You can see the kind of effect this would achieve here: http://jsfiddle.net/ygmn8phw/

cjol
  • 1,485
  • 11
  • 26
  • Thats right. This is correct demo and solution. But u say i cant do this with css and html. So i must do this trick. Right? – MehmetF Sep 09 '14 at 13:54
  • As far as I know, that's right. You need to have a background on every window. Don't forget to mark the solution as accepted if it's worked for you! – cjol Sep 09 '14 at 13:55
  • 1
    @MehmetF you can achive this effect with borders and only one background image : http://jsfiddle.net/webtiki/htq2abhx/1/ – web-tiki Sep 09 '14 at 13:56
  • Thanks dudes. Very likely :) – MehmetF Sep 09 '14 at 13:59