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 - 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="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery.translucent.min.js"></script>

3. Make your background element and card element in HTML

<div id="your-background">
    <div class="your-card">
        <div class="tl-card-contents">
            <!-- your card contents here -->
        </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
    shadow : true        // true or false
});

Plugin description

.translucent( selector , [ options ] )

Apply translucent card them to element.

Selector

• type : string
• description : Selector for your background element. It must be id.

Options

Attribute	Type	Default	Description
filterValue	number	5	This is blur value.
cardColor	string	'clear'	Color of card. You can use preset or your own color. Preset : 'clear', 'white', 'grey', 'black'
shadow	boolean	true	This decides shadow effect of element. true applies effect.

.translucent( 'blur' , value )

Change amount of blur for background.

Value

• type : number
• description : Value for blur background. 0 will get clear background.

Example

// Apply 20 blur to background
$('.your-element').translucent('blur', 20);

.translucent( 'destroy' )

Destroy translucent from the element.

Example

$('.your-element').translucent('destroy');

## Update history

byeolbit.github.io