translucent

Translucent

Transparent card theme - jQuery plugin.

Demo : https://byeolbit.github.io/translucent

Translucent is a jQuery plugin for make transparent/translucent design element in webpage.

What you need to use Translucent

• jQuery
• jQuery-UI
• Browser support

####Tested browsers

Firefox 35.0	Chrome 53.0	Safari 6	Edge 38.0	Opera 40.0

• Not support Internet Explorer. (It does not support CSS filter)

How to use translucent

1. Get plugin

• Download zip or tar.gz archive.
• npm : npm install translucent

2. Insert script into your HTML

<script src="jquery.ui.translucent.min.js"></script>

※ Don't forget to insert jQuery and jQuery-UI in your page.

3. Make your background element and card element in HTML

<div class="your-background">
    <div class="your-card">
        <div class="tl-card-bg-container">
            <div class="tl-card-bg"></div>
        </div>
        <div class="tl-card">
            <div class="tl-card-contents">
                <!-- your card contents here -->
            </div>
        <div>
    </div>
</div>

4. Apply translucent to your card element in script

$('.your-card').translucent('.your-background');

or you can customize options.

$('.your-card').translucent('.your-background',{
    filterValue : 5,     // int
    cardColor : 'clear', // preset color or your own color
    draggable : true,    // true or false
    shadow : true        // true or false
});

Update history

byeolbit.github.io