Translucent

Transparent card theme

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

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

What you need to use Translucent

• 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. Insert script into your HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/translucent.min.js"></script>

2. Make your background element and card element in HTML

<div class="your-background">
    <div class="your-element">
        <!-- your card contents here -->
    </div>
</div>

3. Apply translucent to your card element in script

let yourElement = document.body.querySelector('.your-element');
let translucent = new Translucent(yourElement);

or you can customize options.

let translucent = new Translucent(yourElement, {
    bgElement : '.your-background', // id or class name
    filterValue : 5,     // int
    cardColor : 'clear', // preset color or your own color
    shadow : true        // true or false
});

Plugin description

Translucent( element , [ options ] )

Apply translucent card them to element.

element

• type : HTMLElement
• description : HTML element that you want to apply translucent

Options

Attribute	Type	Default	Description
bgElement	string	parent of target element	Background element.
filterValue	number	10	This is blur value.
cardColor	string	'white'	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
translucent.blur(20);

Translucent.destroy( void )

Destroy translucent from the element.

Example

Translucent.destroy();

How to use translucent (jQuery plugin)

1. Insert script into your HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.translucent.min.js"></script>

2. Make your background element and card element in HTML

<div class="your-background">
    <div class="your-element">
        <!-- your card contents here -->
    </div>
</div>

3. Apply translucent to your card element in script

$('.your-element').Translucent();

or you can customize options.

$('.your-element').Translucent({
    background: '.your-background', // id or class name
    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
bgElement	string	parent of target element	Background element.
filterValue	number	10	This is blur value.
cardColor	string	'white'	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');