├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── assets ├── effects.js ├── logo.svg ├── main.css └── utils.js ├── banner.png ├── components ├── CarbonAd.vue ├── CodeBlock.vue ├── Controls.vue ├── Effect.vue ├── EffectFilter.vue ├── Effects.vue ├── Header.vue ├── Inspect.vue └── Navbar.vue ├── effects ├── button-bubble-bl.vue ├── button-bubble-br.vue ├── button-bubble-tl.vue ├── button-bubble-tr.vue ├── button-bubble.vue ├── button-jelly.vue ├── button-pulse.vue ├── button-shine.vue ├── button-slide-down.vue ├── button-slide-left.vue ├── button-slide-right.vue ├── button-slide-up.vue ├── input-outline.vue ├── input-outline2.vue ├── input-trace.vue ├── input-underline.vue ├── input-underline2.vue ├── loader-bars.vue ├── loader-bars2.vue ├── loader-bounce.vue ├── loader-box.vue ├── loader-coin.vue ├── loader-cradle.vue ├── loader-disk.vue ├── loader-dot.vue ├── loader-ellipsis.vue ├── loader-flip.vue ├── loader-grid.vue ├── loader-multi-ring.vue ├── loader-orbit.vue ├── loader-orbit2.vue ├── loader-revolving-dot.vue ├── loader-ring.vue ├── loader-ring2.vue ├── loader-snake.vue ├── loader-square.vue ├── loader-wave.vue ├── loading-cube.vue ├── other-right-tick.vue ├── other-ripple.vue ├── text-bars.vue ├── text-bars2.vue ├── text-barsr3.vue ├── text-highlight-right.vue ├── text-highlight-up.vue ├── text-overline.vue ├── text-overline2.vue ├── text-pillars.vue ├── text-pillars2.vue ├── text-pillars3.vue ├── text-strikethrough.vue ├── text-underline.vue ├── text-underline2.vue └── text-underline3.vue ├── nuxt.config.js ├── package.json ├── pages └── index.vue ├── plugins ├── clipboard.js └── highlight.js ├── scripts └── deploy.sh ├── static ├── android-chrome-192x192.png ├── android-chrome-256x256.png ├── apple-touch-icon.png ├── browserconfig.xml ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── logo.png ├── mstile-150x150.png ├── safari-pinned-tab.svg └── site.webmanifest └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .nuxt 4 | .netlify 5 | dist 6 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | - Using welcoming and inclusive language 18 | - Being respectful of differing viewpoints and experiences 19 | - Gracefully accepting constructive criticism 20 | - Focusing on what is best for the community 21 | - Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | - The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | - Trolling, insulting/derogatory comments, and personal or political attacks 28 | - Public or private harassment 29 | - Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | - Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies within all project spaces, and it also applies when 49 | an individual is representing the project or its community in public spaces. 50 | Examples of representing a project or community include using an official 51 | project e-mail address, posting via an official social media account, or acting 52 | as an appointed representative at an online or offline event. Representation of 53 | a project may be further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting Jonathan Olaleye at j.olaleye.o@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to CSSFX 2 | 3 | First of all, thank you for taking the time to contribute! 🎉 4 | 5 | Any form of contribution is welcome! This includes new effects, site improvements, and reporting issues. This guide will help you get started. Feel free to propose changes to this document if you think something is missing or needs to be clarified. 6 | 7 | ## Code of Conduct 8 | 9 | By contributing to this project, you are expected to uphold the [Code of Conduct](CODE_OF_CONDUCT.md). Please report any unacceptable behavior to Jonathan Olaleye at j.olaleye.o@gmail.com. 10 | 11 | ## How Can I Contribute? 12 | 13 | ### New Effects 14 | 15 | The most obvious way to contribute is to add new effects to the CSSFX collection. The collection is intended to have variety so feel free to get creative. 16 | 17 | Effects are made by adding a Vue component to the `effects/` directory. There are a few guidelines while creating... 18 | 19 | 1. Do **not** indent the root element in the Vue template. This ensures that the markup is correctly displayed in the inspection modal. 20 | 2. Use as few `.classes` and `#ids` in your template as possible and use `scoped` styles. This increases flexibility for users copying effects. 21 | 3. Use the site's red (`#fc2f70`) & blue (`#3cefff`) theme colors as accents alongside whites, grays, and blacks. 22 | 4. Try to match the size of other effects. 23 | 5. If an effect requires interaction, make it clear. For example add a hover effect to the word "Hover". 24 | 6. Use kebab-case filenames prefixed with the effect type (e.g. `loader-ring`). The filename prefix identifies effects when the user chooses filters. 25 | 26 | > If your editor automatically formats files on save, it may do things like indent the Vue template or replace single quotes with double quotes. These changes can mess with the source code shown in the inspection modal. To avoid this, either temporarily disable formatting or save without formatting (e.g. in VSCode, open the command palette and choose _File: Save without formatting_). 27 | 28 | The `EffectGrid` gathers all the components in `effects/` using the function in `assets/compileEffects` and lays them out with CSS grid. If you figure out some black-magic method of making this process more efficient, be sure to share. 😉 29 | 30 | ### Site Improvements 31 | 32 | The CSSFX site is intentionally simple: a header, the effect grid, and a modal for copying source code. Feel free to try out any changes that would improve the user experience. 33 | 34 | ### Reporting issues 35 | 36 | Before you open an issue, check to see if the problem [has already been reported](https://github.com/jolaleye/cssfx/issues). If it has and the issue **is still open**, add a comment with your experience to the existing issue rather than opening a new one. 37 | 38 | > If an issue describing the problem has already been **closed**, open a new issue and include a link to the closed one. 39 | 40 | When you open an issue, be clear and descriptive so that the problem can be easily identified. Screenshots or recordings are particularly helpful. 41 | 42 | ## How Do I Start? 43 | 44 | > If you've done this kind of thing before, feel free to skip this part :) 45 | 46 | When you're ready to make your contribution, it's time to [create a pull request](https://github.com/jolaleye/cssfx/pulls)! 47 | 48 | 1. [Fork the repository](https://help.github.com/en/articles/fork-a-repo) and clone it locally. Add the original repository as a remote and `git pull` every once in a while so that you stay up to date with the project. 49 | 2. [Create a new branch](https://guides.github.com/introduction/flow/) for your changes. 50 | 3. **Add, commit, and push** your changes to the new branch. 51 | 4. **Test out your changes.** Make sure you didn't break anything. :) 52 | 5. [Open a pull request](https://github.com/jolaleye/cssfx/pulls) to merge your changes into `master`. 53 | - Reference any issues related to your PR (e.g. "Closes #123"). 54 | - Describe your changes in detail and include all of the information in the template. 55 | 6. Sit back, relax, and wait for your PR to be reviewed. You might have to tweak your contribution or elaborate on your changes. That's OK, don't be afraid to justify your reasoning and ask questions. 56 | 57 | Thank you for taking the time to read through this guide and welcome to the community! ✌️ 🎉 58 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Jonathan Olaleye 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

Beautifully simple click-to-copy CSS effects

4 |

5 |

6 | https://cssfx.lovejade.cn/ 7 |

8 | 9 | >This repository forked from [jolaleye/cssfx](https://github.com/jolaleye/cssfx)。 There may be some expansion or modification in the future. 10 | 11 | To run locally, `npm install` then `npm run dev`. Of course, if you want to build and deploy to your own domain, You can do this by modifying `./scripts/deploy` and execute `npm run deploy` command. 12 | 13 | ## Contributing 14 | 15 | Check out the [contributing guide](CONTRIBUTING.md) to learn how you can help out! 16 | 17 | Always be sure to follow the [Code of Conduct](CODE_OF_CONDUCT.md). 18 | 19 | ## License 20 | 21 | The CSSFX site and effects are [MIT licensed](LICENSE.md). 22 | -------------------------------------------------------------------------------- /assets/effects.js: -------------------------------------------------------------------------------- 1 | const requireEffect = require.context('../effects', false, /\.vue$/); 2 | const effectList = requireEffect.keys(); 3 | 4 | const effects = {}; 5 | const components = {}; 6 | 7 | for (const filename of effectList) { 8 | const name = filename.replace('./', '').replace('.vue', ''); 9 | const type = name.substring(0, name.indexOf('-')); 10 | const raw = require(`!!raw-loader!~/effects/${name}`).default; 11 | const component = requireEffect(filename).default; 12 | 13 | const html = /