pagespeed-pro / css-art.com

A gallery for pure CSS web art.
https://css-art.com
22 stars 11 forks source link

Staryu pure CSS #4

Closed amit8680 closed 2 years ago

amit8680 commented 4 years ago

Untitled View original

optimalisatie commented 4 years ago

Hi @amit8680

Thank you for submitting your artwork!

I noticed that you created a pull-request #5 for a single HTML file that includes all CSS code. The artworks on css-art.com use a directory based package format with a package.json file. The CSS and HTML are separated into individual files and it is possible to add links to your website, social media, avatar, original source URL, codepen etc.

An example artwork package can be found on the following URL

https://github.com/style-tools/css-art.com/tree/master/artwork/aku-aku-css-art

{
    "name": "aku-aku-css-art",
    "version": "1.0.0",
    "title": "Aku Aku CSS art",
    "description": "Crash Bandicoot: Responsive Aku Aku in CSS",
    "author": {
        "name": "João Santos",
        "avatar": "https://s.cdpn.io/profiles/user/16670/512.jpg?1502727078",
        "web": "https://jotavejv.github.io",
        "social": [{
            "title": "Codepen",
            "url": "https://codepen.io/jotavejv/"
        }, {
            "title": "Twitter",
            "url": "https://twitter.com/_jotavejv"
        }, {
            "title": "Google+",
            "url": "https://plus.google.com/u/2/communities/118377057769827266257"
        }]
    },
    "html": "aku-aku-css-art.html",
    "css": ["aku-aku-css-art.css"],
    "js": "",
    "thumbnail": "thumbnail.png",
    "splash": "splash.png",
    "keywords": ["animated", "css painting"],
    "original": "https://codepen.io/jotavejv/pen/VzyaeV",
    "codepen": "https://codepen.io/jotavejv/pen/VzyaeV"
}

It may be most easy to copy an artwork directory locally and edit the files.

git clone https://github.com/style-tools/css-art.com.git

The artworks are located in the directory /artwork/.

Let us know if you have any questions!