{"id":22850130,"url":"https://github.com/alialmasi/vhs-in-css","last_synced_at":"2025-10-04T19:12:26.141Z","repository":{"id":181719539,"uuid":"667190475","full_name":"AliAlmasi/VHS-in-CSS","owner":"AliAlmasi","description":"A responsive striped CSS gradient inspired by 80s VHS tapes","archived":false,"fork":false,"pushed_at":"2023-07-17T00:38:46.000Z","size":47,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-03T23:48:34.599Z","etag":null,"topics":["css3","csstricks","responsive","responsive-web-design","vhs"],"latest_commit_sha":null,"homepage":"http://al1almasi.ir/VHS-in-CSS/","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/AliAlmasi.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}},"created_at":"2023-07-16T23:54:29.000Z","updated_at":"2023-08-22T14:43:19.000Z","dependencies_parsed_at":"2023-07-17T01:43:25.928Z","dependency_job_id":null,"html_url":"https://github.com/AliAlmasi/VHS-in-CSS","commit_stats":null,"previous_names":["alialmasi/vhs-in-css"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AliAlmasi/VHS-in-CSS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliAlmasi%2FVHS-in-CSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliAlmasi%2FVHS-in-CSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliAlmasi%2FVHS-in-CSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliAlmasi%2FVHS-in-CSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AliAlmasi","download_url":"https://codeload.github.com/AliAlmasi/VHS-in-CSS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliAlmasi%2FVHS-in-CSS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278360198,"owners_count":25974239,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css3","csstricks","responsive","responsive-web-design","vhs"],"created_at":"2024-12-13T05:06:35.184Z","updated_at":"2025-10-04T19:12:26.065Z","avatar_url":"https://github.com/AliAlmasi.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eVHS-in-CSS\u003c/h1\u003e\n\u003ch2\u003eHow it looks\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"https://al1almasi.ir/VHS-in-CSS\"\u003eLive preview is here!\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003eHow it works\u003c/h2\u003e\n\u003ch3\u003eHard stops\u003c/h3\u003e\n\u003cp\u003e\nThe pattern is created using a CSS linear-gradient (using the direction \"to bottom\") with what are known as \u003ca href=\"https://css-tricks.com/books/greatest-css-tricks/hard-stop-gradients/\"\u003e\"hard stops\"\u003c/a\u003e. A hard stop is created by defining the end of one colour in the same place as the start of the next colour.\n\u003c/p\u003e\n\u003ch3\u003e\"vh\" (Viewport's height) units\u003c/h3\u003e\n\u003cp\u003e\nThe biggest design challenge was making sure the full pattern of 14 colours was visible at any viewport size, and didn't scroll with the content. The key was to use vh unit to determine the size of each colour stop. The vh unit is a relative unit, and describes a percentage of the viewport height. 1vh is 1% of the viewport height, 50vh is 50% of the viewport height and so on. Using vh is what enables the full gradient pattern to respond to the height of the viewport. \u003ca href=\"https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units\"\u003eRead more about different units in CSS on MDN\u003c/a\u003e.\n\u003c/p\u003e\n\u003cp\u003eHere's a two-colour hard stop gradient as an example, in which we're using the vh unit to specify the size of each colour stop.\u003c/p\u003e\n\u003cpre lang=\"css\"\u003e.twoColorStop {\n  min-height: 100vh;\n  background: linear-gradient(\n    to bottom, \n    red 0 50vh,\n    yellow 50vh 100vh\n  );\n}\u003c/pre\u003e\n\u003cp\u003eHere's the result.\n\u003c/p\u003e\n\u003cimg src=\"./yellow_red_hard_stop.avif\"\u003e\n\u003cp\u003e\nNotice that:\n\u003cli\u003ethe first colour (red) starts at 0 and ends at 50vh\u003c/li\u003e\n\u003cli\u003ethe second colour (yellow) starts at 50vh and ends at 100vh\u003c/li\u003e\nWhere red stops, yellow begins, creating a hard stop. There are ways you can write the CSS above in a shorthand form, but I've written it out verbosely to demonstrate the concept more clearly.\n\u003c/p\u003e\n\u003cp\u003e\nThe only differences between this example and the full example is that I'm using 14 colours instead of two colours, and I'm using \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties\"\u003eCSS custom properties\u003c/a\u003e and \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/calc\"\u003eCSS calc()\u003c/a\u003e to avoid writing out 14 lines of magic numbers. Notice though, that where one colour ends, another colour begins at the same vh value.\n\u003c/p\u003e\n\u003cimg src=\"./stop_size_example.avif\"\u003e\n\u003cp\u003eAnd finally, to allow the page content to scroll while the background pattern stays fixed in place in the viewport, it's wrapped in a vertically-scrollable element inside the container providing the background gradient pattern. Set height: 100vh on this element to prevent the content increasing the height of the last colour in the gradient.\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falialmasi%2Fvhs-in-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falialmasi%2Fvhs-in-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falialmasi%2Fvhs-in-css/lists"}