{"id":21492850,"url":"https://github.com/kevin-kip/pure-css-images","last_synced_at":"2025-03-17T11:40:16.253Z","repository":{"id":176340287,"uuid":"145223913","full_name":"Kevin-Kip/pure-css-images","owner":"Kevin-Kip","description":"Creating images using only CSS code","archived":false,"fork":false,"pushed_at":"2018-08-18T16:54:03.000Z","size":39,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-23T21:18:06.119Z","etag":null,"topics":["css","graphics","html5","web"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kevin-Kip.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-18T13:52:52.000Z","updated_at":"2019-10-11T12:24:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"e292778e-1743-4731-adbe-cb37825e5b96","html_url":"https://github.com/Kevin-Kip/pure-css-images","commit_stats":null,"previous_names":["kevin-kip/pure-css-images"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kevin-Kip%2Fpure-css-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kevin-Kip%2Fpure-css-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kevin-Kip%2Fpure-css-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kevin-Kip%2Fpure-css-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kevin-Kip","download_url":"https://codeload.github.com/Kevin-Kip/pure-css-images/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244029353,"owners_count":20386388,"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","graphics","html5","web"],"created_at":"2024-11-23T15:33:45.290Z","updated_at":"2025-03-17T11:40:16.212Z","avatar_url":"https://github.com/Kevin-Kip.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Images created using pure CSS \nThat's right. :smile: Layering a bunch of HTML elements with the right colors and layering techniques results in amazing images.\n\n\nThis code was written as a completion of the course on CSS images.\nOriginal course document on building the koala can be found [here](https://medium.com/coding-artist/a-beginners-guide-to-pure-css-images-ef9a5d069dd2).\n\nUsing the knowledge gained from the Koala exercise, I built Santa Claus trying to achieve [this](https://codemyui.com/laughing-santa-claus-in-pure-css/) \n## You want to use this code?\nFine by me. Follow these steps:\n1. Clone/download the repository\n2. Navigate to the root directory\n3. Right click and `open in terminal`\n4. Run `live-server`\n\n\u003e This is assuming that you have [live-server](https://www.npmjs.com/package/live-server) installed. If not, you can always do a quick `npm install -g live-server`.  \n\nAlternatively, run the code the old fashioned `file:///pathToIndexFile` way.\n\n## Why?\nWell, there are a number of reasons:\n\n1. fun :wink:\n2. to gain a deeper understanding of CSS (especially layering) :muscle:\n3. to pass time \n4. any other reason you want\n\n## Result?\nKoala from the exercise\n\n![Screenshot1](screenshots/Screenshot1.png)\n\nSanta Claus\n\n![Screenshot1](screenshots/Screenshot2.png)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevin-kip%2Fpure-css-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevin-kip%2Fpure-css-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevin-kip%2Fpure-css-images/lists"}