https://github.com/fantasyui-com/synthwave
Simple and beautiful synthwave background collection. [Art, CSS, Backgrounds, CSS Gradients]
https://github.com/fantasyui-com/synthwave
Last synced: over 1 year ago
JSON representation
Simple and beautiful synthwave background collection. [Art, CSS, Backgrounds, CSS Gradients]
- Host: GitHub
- URL: https://github.com/fantasyui-com/synthwave
- Owner: fantasyui-com
- License: gpl-3.0
- Created: 2018-06-01T15:21:49.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-19T18:16:16.000Z (about 3 years ago)
- Last Synced: 2025-02-12T07:19:02.112Z (over 1 year ago)
- Language: HTML
- Homepage: https://fantasyui-com.github.io/synthwave/
- Size: 921 KB
- Stars: 18
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# synthwave
Simple and beautiful synthwave background collection.
## Why?
Because there is no time to mess with gradient editors.
## Demo & Example
- [demo preview of all styles](https://rawgit.com/fantasyui-com/synthwave/master/demo.html)
- [usage example with UI components](https://rawgit.com/fantasyui-com/synthwave/master/index.html)
## Installation
### NPM
Install Node.js and run ```npm i synthwave```.
```html
```
### ZIP
download the zip: https://github.com/fantasyui-com/synthwave/archive/master.zip unpack and put the style.css next to your HTML and simply include the file in your HTML document.
```html
```
### RAW GIT
Use raw git for development purposes:
```html
```
### CDN
You can use the raw git CDN for a more permanent 3rd party hosting solution:
```html
```
### COPY & PASTE
grab the code from here https://github.com/fantasyui-com/synthwave/blob/master/style.css via copy and paste and put it into a `````` tag of your web page. Which pattern do you like? is it for example synthwave-m? If so then just put this in your `````` tag:
```CSS
.synthwave-m {
background: linear-gradient(172deg, #C115D7 0%, #B510D6 4%, #540101 5%, #FCA10F 18%, #FFD82D 21%, #FCA10F 24%, #05253D 25%, #0E5BCE 35%, #3C8FCA 43%, #79BFE0 45%, #090D6D 46%, #000002 56%, #3B3FA9 60%, #2DBCFF 61%, #318AD3 73%, #13A7F7 74%, #352313 75%, #F29C5A 91%, #FC411C 92%, #F29C5A 100%);
}
```
## API Usage
```JavaScript
const synthwave = require('synthwave');
// Select x CSS
synthwave.css('x')
// Select a,b,c,d CSS
synthwave.css(/[a-d]/)
// Select raw a,b,c objects
synthwave.raw(/[a-c]/)
// Render raw
let allRaw = synthwave.raw(/[cwmfjordbankglyphsvextquiz]/);
let allCss = synthwave.render(allRaw) // -> CSS
```
## HTML Usage
Use synthwave-```a-z``` class in a html node, for example:
```html
Hello World
```
Add this to your HTML if you want to apply synthwave to HTML body.
```css
html, body { height: 100%;}
body { background-attachment: fixed !important; }
```
## Developer Notes
git/.config remote origin holds to ease gh-pages publication
push = +refs/heads/master:refs/heads/gh-pages
push = +refs/heads/master:refs/heads/master
index.src.html is compiled to index.html via PostHTML
npm run watch
parcel watch index.html.src.js --out-dir . --out-file index.html.js
### Terminal Setup
1. hs -c-1 .
2. node dev-watch.js
3. parcel watch index.html.src.js --out-dir . --out-file index.html.js