A repository of over 1000 quality jQuery plugins

jQuery translucent

translucent is a jQuery UI plugin.

Created by byeolbit

Translucent plastic card theme.

Not what you're looking for? Click here to view more UI jQuery plugins

Translucent Build Status codecov

Transparent card theme

Title image

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.0Chrome 53.0Safari 6Edge 38.0Opera 40.0
FirefoxChromeSafariEdgeOpera

※ 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/translucent@1.0.12/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

AttributeTypeDefaultDescription
bgElementstringparent of target elementBackground element.
filterValuenumber10This is blur value.
cardColorstring'white'Color of card. You can use preset or your own color. Preset : 'clear', 'white', 'grey', 'black'
shadowbooleantrueThis 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
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/translucent@1.0.12/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

AttributeTypeDefaultDescription
bgElementstringparent of target elementBackground element.
filterValuenumber10This is blur value.
cardColorstring'white'Color of card. You can use preset or your own color. Preset : 'clear', 'white', 'grey', 'black'
shadowbooleantrueThis 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');




You might also like these other UI jQuery Plugins

  • jQuery.mousetip

    Extension for cursor tooltips that follow mouse movement

  • jQCloud

    jQuery plugin for drawing neat word clouds that actually look like clouds

  • toolgif

    A very simple Jquery gif tooltip plugin.