Skip to content

Instantly share code, notes, and snippets.

Avatar

Yuriy Markov peacefullatom

10 followers · 4 following
View GitHub Profile
@peacefullatom
peacefullatom / gear.css
Created January 8, 2020 12:57
Gear playground
View gear.css
:root {
--smokey: #f5f5f5;
--darky: #262625;
--thickness: 0.1vmin;
--half: 50%;
--border: var(--thickness) solid var(--smokey);
--border-radius: var(--half);
}
body,
@peacefullatom
peacefullatom / keyboard.css
Last active December 26, 2019 13:24
3D keyboard
View keyboard.css
:root {
/* keyboard width */
--width: 1000px;
/* keyboard height */
--height: 420px;
/* border radius */
--radius: 5px;
/* defines how high the button is raised */
--depth: 5px;
/* letter color */
@peacefullatom
peacefullatom / preloader.html
Last active December 4, 2019 15:17
Pseudo 3D preloader
View preloader.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
@peacefullatom
peacefullatom / neon.html
Last active December 2, 2019 18:40
Demo stand for 3D bars (vanilla version)
View neon.html
<!DOCTYPE html>
<html lang="en" style="background: black;">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Neon 3D bars demo</title>
<style>
#root {
display: flex;