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

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

.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');