htmlcsswindows-phone-8

Transparent tiles like windows phone 8 on Html/Css


I want to create a UI on a web page like this, but I can't understand how to do that. I tried z-index, but I couldn't create a page like this.

This is a 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.


Solution

  • 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/