Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jerosoler/3dbox
🎨 CSS Houdini 3D Box
https://github.com/jerosoler/3dbox
3d css css-houdini csshoudini houdini paintworklet
Last synced: 28 days ago
JSON representation
🎨 CSS Houdini 3D Box
- Host: GitHub
- URL: https://github.com/jerosoler/3dbox
- Owner: jerosoler
- License: mit
- Created: 2021-02-21T17:23:49.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-02-21T17:28:28.000Z (almost 4 years ago)
- Last Synced: 2024-04-14T13:51:56.240Z (9 months ago)
- Topics: 3d, css, css-houdini, csshoudini, houdini, paintworklet
- Language: HTML
- Homepage: https://jerosoler.github.io/3dbox/
- Size: 16.6 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![GitHub license](https://img.shields.io/github/license/jerosoler/3dbox)](https://github.com/jerosoler/3dbox/blob/main/LICENSE)
[PLAY](https://jerosoler.github.io/3dbox/)
![Demo](https://github.com/jerosoler/3dbox/raw/master/docs/3dbox.png)
## CDN
```html```
## NPM
```bash
npm install threedbox
```## How to use
Download `THREEDBox.js` file.
### Javascript:
```javascript
if ('paintWorklet' in CSS && 'registerProperty' in CSS && 'CSSUnitValue' in window) {
CSS.registerProperty({
name: '--threedbox-angle-vertical',
syntax: '',
initialValue: '10px',
inherits: false
});
CSS.registerProperty({
name: '--threedbox-angle-horitzontal',
syntax: '',
initialValue: '10px',
inherits: false
});
CSS.registerProperty({
name: '--threedbox-padding',
syntax: '',
initialValue: '50px',
inherits: false
});
CSS.registerProperty({
name: '--threedbox-color',
syntax: '',
initialValue: '#ffffff',
inherits: false
});
CSS.registerProperty({
name: '--threedbox-color-back',
syntax: '',
initialValue: '#ffffff',
inherits: false
});
CSS.registerProperty({
name: '--threedbox-color-border',
syntax: '',
initialValue: '#ffffff',
inherits: false
});CSS.paintWorklet.addModule('THREEDBox.js');
} else {
console.log("Not Supported");
alert("Not Supported");
}
```### CSS
```css
div {
padding: 50px;
--threedbox-color: #ff7d64;
--threedbox-color-back: #a32107;
--threedbox-color-border: #ff0000;
--threedbox-angle-vertical: 15px;
--threedbox-angle-horitzontal: -15px;
--threedbox-padding: 50px;
background-image: paint(threedbox);
}
```