Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/byeolbit/translucent
Translucent plastic card theme.
https://github.com/byeolbit/translucent
css design html jquery jquery-plugin style theme translucent transparent ui web-design
Last synced: about 2 months ago
JSON representation
Translucent plastic card theme.
- Host: GitHub
- URL: https://github.com/byeolbit/translucent
- Owner: byeolbit
- License: mit
- Archived: true
- Created: 2017-01-23T04:22:02.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-22T02:04:18.000Z (over 6 years ago)
- Last Synced: 2024-09-19T17:09:43.911Z (3 months ago)
- Topics: css, design, html, jquery, jquery-plugin, style, theme, translucent, transparent, ui, web-design
- Language: JavaScript
- Homepage: https://byeolbit.github.io/translucent
- Size: 9.76 MB
- Stars: 88
- Watchers: 12
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Translucent [](https://travis-ci.org/byeolbit/translucent) [](https://codecov.io/gh/byeolbit/translucent)
### Transparent card theme
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
### 1. Insert script into your HTML
```html
```
### 2. Make your background element and card element in HTML
```html
```
### 3. Apply translucent to your card element in script
```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
### Translucent( *element* , [ *options* ] )
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.
### Translucent.blur( *value* )
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);
```
### Translucent.destroy( *void* )
Destroy translucent from the element.
#### Example
```javascript
Translucent.destroy();
```
## How to use translucent (jQuery plugin)
### 1. Insert script into your HTML
```html
```
### 2. Make your background element and card element in HTML
```html
```
### 3. Apply translucent to your card element in script
```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
### .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
--------- | ---- | ------- | -----------
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.
### .Translucent( *'blur'* , *value* )
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);
```
### .Translucent( *'destroy'* )
Destroy translucent from the element.
#### Example
```javascript
$('.your-element').Translucent('destroy');
```