Translucent  

$3

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

$3

``html

`

$3

`html



`

$3

`javascript
let yourElement = document.body.querySelector('.your-element');
let translucent = new Translucent(yourElement);
`
or you can customize options.


`javascript
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

$3

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.

$3

Change amount of blur for background.

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

#### Example
`javascript
// Apply 20 blur to background
translucent.blur(20);
`

$3

Destroy translucent from the element.

#### Example
`javascript
Translucent.destroy();
`







How to use translucent (jQuery plugin)

$3


`html


`

$3

`html



`

$3

`javascript
$('.your-element').Translucent();
`
or you can customize options.


`javascript
$('.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

$3

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.

$3

Change amount of blur for background.

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

#### Example
`javascript
// Apply 20 blur to background
$('.your-element').Translucent('blur', 20);
`

$3

Destroy translucent from the element.

#### Example
`javascript
$('.your-element').Translucent('destroy');
``