Package Exports

translucent

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (translucent) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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">
            <!-- your card contents here -->
        </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,     // 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
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

// Apply 20 blur to background
$('.your-element').translucent('blur', 20);

.translucent( 'destroy' )

Destroy translucent from the element.

Example

$('.your-element').translucent('destroy');

## Update history

byeolbit.github.io