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">
</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,
cardColor : 'clear',
shadow : true
});
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
$('.your-element').translucent('blur', 20);
.translucent( 'destroy' )
Destroy translucent from the element.
Example
$('.your-element').translucent('destroy');
## Update history
byeolbit.github.io