Demo : https://byeolbit.github.io/translucent
- Browser support
| Firefox 35.0 | Chrome 53.0 | Safari 6 | Edge 38.0 | Opera 40.0 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
※ Not support Internet Explorer. (It does not support CSS filter)
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/translucent.min.js"></script><div class="your-background">
<div class="your-element">
<!-- your card contents here -->
</div>
</div>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
});Apply translucent card them to element.
- type :
HTMLElement - description : HTML element that you want to apply translucent
| 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. |
Change amount of blur for background.
- type :
number - description : Value for blur background. 0 will get clear background.
// Apply 20 blur to background
translucent.blur(20);Destroy translucent from the element.
Translucent.destroy();<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><div class="your-background">
<div class="your-element">
<!-- your card contents here -->
</div>
</div>$('.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
});Apply translucent card them to element.
- type :
string - description : Selector for your background element. It must be id.
| 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. |
Change amount of blur for background.
- type :
number - description : Value for blur background. 0 will get clear background.
// Apply 20 blur to background
$('.your-element').Translucent('blur', 20);Destroy translucent from the element.
$('.your-element').Translucent('destroy');
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent