{"id":13476728,"url":"https://github.com/byeolbit/translucent","last_synced_at":"2025-03-27T04:30:53.884Z","repository":{"id":57379207,"uuid":"79769632","full_name":"byeolbit/translucent","owner":"byeolbit","description":"Translucent plastic card theme.","archived":true,"fork":false,"pushed_at":"2018-08-22T02:04:18.000Z","size":10238,"stargazers_count":88,"open_issues_count":2,"forks_count":11,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-10T21:23:11.559Z","etag":null,"topics":["css","design","html","jquery","jquery-plugin","style","theme","translucent","transparent","ui","web-design"],"latest_commit_sha":null,"homepage":"https://byeolbit.github.io/translucent","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/byeolbit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-23T04:22:02.000Z","updated_at":"2024-09-16T17:31:42.000Z","dependencies_parsed_at":"2022-09-02T17:34:42.014Z","dependency_job_id":null,"html_url":"https://github.com/byeolbit/translucent","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byeolbit%2Ftranslucent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byeolbit%2Ftranslucent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byeolbit%2Ftranslucent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byeolbit%2Ftranslucent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/byeolbit","download_url":"https://codeload.github.com/byeolbit/translucent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245784777,"owners_count":20671614,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","design","html","jquery","jquery-plugin","style","theme","translucent","transparent","ui","web-design"],"created_at":"2024-07-31T16:01:33.896Z","updated_at":"2025-03-27T04:30:51.921Z","avatar_url":"https://github.com/byeolbit.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Translucent [![Build Status](https://travis-ci.org/byeolbit/translucent.svg?branch=master)](https://travis-ci.org/byeolbit/translucent) [![codecov](https://codecov.io/gh/byeolbit/translucent/branch/master/graph/badge.svg)](https://codecov.io/gh/byeolbit/translucent)\n### Transparent card theme\n\u003cimg src=\"https://github.com/byeolbit/byeolbit.github.io/raw/master/title.png?raw=true\" alt=\"Title image\" style=\"max-width:100%;\"\u003e\n\nDemo : https://byeolbit.github.io/translucent\n\n#### **Translucent** is a plugin for make transparent/translucent design element in webpage.\n\n\n\n## What you need to use Translucent\n- Browser support\n\n#### Tested browsers\n\nFirefox 35.0 | Chrome 53.0  | Safari 6 | Edge 38.0 | Opera 40.0\n--------|--------|--------|------|-------\n\u003cimg src=\"https://github.com/alrra/browser-logos/raw/master/src/firefox/firefox_128x128.png\" alt=\"Firefox\"\u003e | \u003cimg src=\"https://github.com/alrra/browser-logos/raw/master/src/chrome/chrome_128x128.png\" alt=\"Chrome\"\u003e | \u003cimg src=\"https://github.com/alrra/browser-logos/raw/master/src/safari/safari_128x128.png\" alt=\"Safari\"\u003e | \u003cimg src=\"https://github.com/alrra/browser-logos/raw/master/src/edge/edge_128x128.png\" alt=\"Edge\"\u003e | \u003cimg src=\"https://github.com/alrra/browser-logos/raw/master/src/opera/opera_128x128.png\" alt=\"Opera\"\u003e\n\n*※ Not support Internet Explorer. (It does not support CSS filter)*\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## How to use translucent\n\n### 1. Insert script into your HTML\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/translucent@1.0.12/dist/translucent.min.js\"\u003e\u003c/script\u003e\n```\n\n### 2. Make your background element and card element in HTML\n\n```html\n\u003cdiv class=\"your-background\"\u003e\n    \u003cdiv class=\"your-element\"\u003e\n        \u003c!-- your card contents here --\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n### 3. Apply translucent to your card element in script\n\n```javascript\nlet yourElement = document.body.querySelector('.your-element');\nlet translucent = new Translucent(yourElement);\n```\nor you can customize options.\n\n\n```javascript\nlet translucent = new Translucent(yourElement, {\n    bgElement : '.your-background', // id or class name\n    filterValue : 5,     // int\n    cardColor : 'clear', // preset color or your own color\n    shadow : true        // true or false\n});\n```\n\n\u003cbr/\u003e\n\n## Plugin description\n\n### Translucent( *element* , [ *options* ] )\nApply translucent card them to element.\n\n#### *element*\n+ **type** : `HTMLElement`\n+ **description** : HTML element that you want to apply translucent\n\n#### *Options*\n\nAttribute | Type | Default | Description\n--------- | ---- | ------- | -----------\nbgElement | `string` | parent of target element | Background element.\nfilterValue | `number` | 10 | This is blur value.\ncardColor | `string` | 'white' | Color of card. You can use preset or your own color. Preset : `'clear'`, `'white'`, `'grey'`, `'black'`\nshadow | `boolean` | true | This decides shadow effect of element. `true` applies effect.\n\n### Translucent.blur( *value* )\nChange amount of blur for background.\n\n#### *Value*\n+ **type** : `number`\n+ **description** : Value for blur background. 0 will get clear background.\n\n#### Example\n```javascript\n// Apply 20 blur to background\ntranslucent.blur(20);\n```\n\n### Translucent.destroy( *void* )\nDestroy translucent from the element.\n\n#### Example\n```javascript\nTranslucent.destroy();\n```\n\n\u003cbr/\u003e\n\n\n## How to use translucent (jQuery plugin)\n\n### 1. Insert script into your HTML\n```html\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/translucent@1.0.12/dist/jquery.translucent.min.js\"\u003e\u003c/script\u003e\n```\n\n### 2. Make your background element and card element in HTML\n\n```html\n\u003cdiv class=\"your-background\"\u003e\n    \u003cdiv class=\"your-element\"\u003e\n        \u003c!-- your card contents here --\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n### 3. Apply translucent to your card element in script\n\n```javascript\n$('.your-element').Translucent();\n```\nor you can customize options.\n\n\n```javascript\n$('.your-element').Translucent({\n    background: '.your-background', // id or class name\n    filterValue : 5,     // int\n    cardColor : 'clear', // preset color or your own color\n    shadow : true        // true or false\n});\n```\n\n\u003cbr/\u003e\n\n## Plugin description\n\n### .Translucent( *selector* , [ *options* ] )\nApply translucent card them to element.\n\n#### *Selector*\n+ **type** : `string`\n+ **description** : Selector for your background element. It must be id.\n\n#### *Options*\n\nAttribute | Type | Default | Description\n--------- | ---- | ------- | -----------\nbgElement | `string` | parent of target element | Background element.\nfilterValue | `number` | 10 | This is blur value.\ncardColor | `string` | 'white' | Color of card. You can use preset or your own color. Preset : `'clear'`, `'white'`, `'grey'`, `'black'`\nshadow | `boolean` | true | This decides shadow effect of element. `true` applies effect.\n\n### .Translucent( *'blur'* , *value* )\nChange amount of blur for background.\n\n#### *Value*\n+ **type** : `number`\n+ **description** : Value for blur background. 0 will get clear background.\n\n#### Example\n```javascript\n// Apply 20 blur to background\n$('.your-element').Translucent('blur', 20);\n```\n\n### .Translucent( *'destroy'* )\nDestroy translucent from the element.\n\n#### Example\n```javascript\n$('.your-element').Translucent('destroy');\n```\n\n\u003cbr/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbyeolbit%2Ftranslucent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbyeolbit%2Ftranslucent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbyeolbit%2Ftranslucent/lists"}