Skateboards in pure CSS

Developer
Mikhail Korotkov
Size
5,209 Kb
Views
14,161
  1. Skateboards in pure CSS Previews
  2. Skateboards in pure CSS HTML Codes
  3. Skateboards in pure CSS CSS Codes
  4. Skateboards in pure CSS JS Codes

How do I make an skateboards in pure css?

I saw a job offer not too long ago: people were searching for "html/css ninja". I don't know what kind of ninjutsu one can make in html but i fancy the thought that i am a css ninja.. What is a skateboards in pure css? How do you make a skateboards in pure css? This script and codes were developed by Mikhail Korotkov on 12 November 2022, Saturday.

Skateboards in pure CSS Previews
IQ Test

Skateboards in pure CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>skateboards in pure CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> copyright \o.o <script src="js/index.js"></script>
</body>
</html>

Skateboards in pure CSS - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
body { background: #6f767a;
}
a { color: #a1a6a8; display: block; font-family: "arial"; font-size: 15px; margin: 0 auto; position: relative; text-align: center; top: 300px; width: 340px;
}
a:hover { text-decoration: none;
}
.ooh-a-dancing-bug { margin: 0 auto; width: 69px; margin-top: 90px; position: relative;
}
.but-shacking-is-all-i-know { position: absolute; height: 250px; width: 200px;
}
.but-shacking-is-all-i-know:hover .blue { webkit-transition: 1s; -moz-transition: 1s; transition: 1s; -webkit-animation: moving-bg 2s ease infinite, falling-right 0.5s linear both; -moz-animation: moving-bg 2s ease infinite, falling-right 0.5s linear both; -ms-animation: moving-bg 2s ease infinite, falling-right 0.5s linear both; -o-animation: moving-bg 2s ease infinite, falling-right 0.5s linear both; animation: moving-bg 2s ease infinite, falling-right 0.5s linear both;
}
.you-shacking-it-all-wrong { background: transparent url("http://vignette3.wikia.nocookie.net/adventuretimewithfinnandjake/images/a/a9/Adventure-time-dance-5046_preview.gif/revision/latest?cb=20110617014146") no-repeat scroll -100px center/233px auto; border-radius: 34px; background-size: 233px; box-shadow: 3px 1px 0 3px #3e4346 inset; height: 240px; position: absolute; width: 68px;
}
.skate::before { background: #ffe5b8 none repeat scroll 0 0; border-radius: 4px; bottom: 48px; box-shadow: 0 -116px 0 0 #ffe5b8, 62px -116px 0 0 #ffe5b8, 62px 0 0 0 #ffe5b8; content: ""; height: 28px; left: -6px; position: absolute; width: 18px;
}
.skate::after { background: #f7d081 none repeat scroll 0 0; border-radius: 4px; bottom: 48px; box-shadow: 0 -116px 0 0 #f7d081, 62px -116px 0 0 #f7d081, 62px 0 0 0 #f7d081; content: ""; height: 16px; left: -6px; position: absolute; width: 18px;
}
.skate { width: 68px; height: 240px; border-radius: 34px; box-shadow: 2px 10px 0 0 rgba(0, 0, 0, 0.15); position: absolute;
}
.hander::before { background: #fff none repeat scroll 0 0; box-shadow: 20px 122px 0 -2px rgba(0, 0, 0, 0.15), -20px 122px 0 -2px rgba(0, 0, 0, 0.15), 3px 118px 0 -2px #c1cdd9, -2px 118px 0 -2px #c1cdd9, 2px 116px 0 -2px #fff, -2px 116px 0 -2px #fff, 0 116px 0 0 #c1cdd9, 0 4px 0 0 rgba(0, 0, 0, 0.15), 0 -4px 0 0 #c1cdd9 inset, 0 2px 0 0 #c1cdd9 inset; content: ""; height: 8px; left: -11px; position: absolute; top: 10px; width: 44px;
}
.hander::after { background: #c1cdd9 none repeat scroll 0 0; border: 2px solid #6f767a; border-radius: 50%; bottom: 10px; box-shadow: 5px 121px 0 -4px rgba(0, 0, 0, 0.15), 5px 97px 0 -4px rgba(0, 0, 0, 0.15), -6px 121px 0 -4px rgba(0, 0, 0, 0.15), -6px 97px 0 -4px rgba(0, 0, 0, 0.15), 0 108px 0 -2px #c1cdd9, 0 108px 0 0 #6f767a, -6px -11px 0 -4px rgba(0, 0, 0, 0.15), 6px -11px 0 -4px rgba(0, 0, 0, 0.15), 6px 11px 0 -4px rgba(0, 0, 0, 0.15), -6px 11px 0 -4px rgba(0, 0, 0, 0.15), 0 4px 0 0 rgba(0, 0, 0, 0.15); content: ""; height: 8px; left: 5px; position: absolute; width: 8px;
}
.hander { background: #b8c3cc none repeat scroll 0 0; border-radius: 4px; box-shadow: 0 110px 0 0 #b8c3cc, 0 112px 0 0 rgba(0, 0, 0, 0.15), 0 2px 0 0 rgba(0, 0, 0, 0.15); height: 34px; margin: 0 auto; position: relative; top: 48px; width: 22px;
}
.sand::before { content: ""; background: #ffb980 none repeat scroll 0 0; box-shadow: 0 -116px 0 0 #ffb980, 62px -116px 0 0 #ffb980, 62px 0 0 0 #ffb980;
}
.sand::after { content: ""; background: #efa053 none repeat scroll 0 0; box-shadow: 0 -116px 0 0 #efa053, 62px -116px 0 0 #efa053, 62px 0 0 0 #efa053;
}
.sand { left: -200px; background: -webkit-linear-gradient(-79deg, #ffe5b8 39%, #ec533c 39%, #ec533c 41%, #ffe5b8 41%, #ffe5b8 43%, #ec533c 43%, #ec533c 45%, #ffe5b8 45%, #ffe5b8 47%, #ec533c 47%, #ec533c 49%, #ffe5b8 49%, #ffe5b8 51%, #ec533c 51%, #ec533c 53%, #ffe5b8 53%, #ffe5b8 55%, #ec533c 55%, #ec533c 57%, #ffe5b8 57%, #ffe5b8 59%, #ec533c 59%, #ec533c 61%, #ffe5b8 61%, transparent 62%), -webkit-linear-gradient(top, #f6d69e 91%, #ffe5b8 91%); background: -moz-linear-gradient(-79deg, #ffe5b8 39%, #ec533c 39%, #ec533c 41%, #ffe5b8 41%, #ffe5b8 43%, #ec533c 43%, #ec533c 45%, #ffe5b8 45%, #ffe5b8 47%, #ec533c 47%, #ec533c 49%, #ffe5b8 49%, #ffe5b8 51%, #ec533c 51%, #ec533c 53%, #ffe5b8 53%, #ffe5b8 55%, #ec533c 55%, #ec533c 57%, #ffe5b8 57%, #ffe5b8 59%, #ec533c 59%, #ec533c 61%, #ffe5b8 61%, transparent 62%), -moz-linear-gradient(top, #f6d69e 91%, #ffe5b8 91%); background: linear-gradient(-79deg, #ffe5b8 39%, #ec533c 39%, #ec533c 41%, #ffe5b8 41%, #ffe5b8 43%, #ec533c 43%, #ec533c 45%, #ffe5b8 45%, #ffe5b8 47%, #ec533c 47%, #ec533c 49%, #ffe5b8 49%, #ffe5b8 51%, #ec533c 51%, #ec533c 53%, #ffe5b8 53%, #ffe5b8 55%, #ec533c 55%, #ec533c 57%, #ffe5b8 57%, #ffe5b8 59%, #ec533c 59%, #ec533c 61%, #ffe5b8 61%, transparent 62%), linear-gradient(top, #f6d69e 91%, #ffe5b8 91%);
}
.green::before { content: ""; background: #feccff none repeat scroll 0 0; box-shadow: 0 -116px 0 0 #feccff, 62px -116px 0 0 #feccff, 62px 0 0 0 #feccff;
}
.green::after { content: ""; background: #f7a9f7 none repeat scroll 0 0; box-shadow: 0 -116px 0 0 #f7a9f7, 62px -116px 0 0 #f7a9f7, 62px 0 0 0 #f7a9f7;
}
.green { left: 200px; background: -webkit-linear-gradient(top, #1ce598 90px, #f7d081 90px, #f7d081 102px, #1ce598 102px, #1ce598 114px, #ffe5b8 114px, #ffe5b8 126px, #1ce598 126px, #1ce598 138px, #ffe5b8 138px, #ffe5b8 150px, #1ce598 150px, #14d187 218px, #1ce598 218px); background: -moz-linear-gradient(top, #1ce598 90px, #f7d081 90px, #f7d081 102px, #1ce598 102px, #1ce598 114px, #ffe5b8 114px, #ffe5b8 126px, #1ce598 126px, #1ce598 138px, #ffe5b8 138px, #ffe5b8 150px, #1ce598 150px, #14d187 218px, #1ce598 218px); background: linear-gradient(top, #1ce598 90px, #f7d081 90px, #f7d081 102px, #1ce598 102px, #1ce598 114px, #ffe5b8 114px, #ffe5b8 126px, #1ce598 126px, #1ce598 138px, #ffe5b8 138px, #ffe5b8 150px, #1ce598 150px, #14d187 218px, #1ce598 218px);
}
.blue { background: linear-gradient(270deg, #ff0000, #f3ff00, #06ff00, #004eff); background-size: 400% 400%; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; -webkit-animation: moving-bg 2s ease infinite; -moz-animation: moving-bg 2s ease infinite; animation: moving-bg 2s ease infinite;
}
@-webkit-keyframes falling-right { 0% { transform: rotate(0deg) translate(0px, 0px); box-shadow: 2px 10px 0 0 #5e6466; } 100% { transform: translate(70px, 20px) rotate(45deg); box-shadow: 10px 6px 0 0 #5e6466; }
}
@-moz-keyframes falling-right { 0% { transform: rotate(0deg) translate(0px, 0px); box-shadow: 2px 10px 0 0 #5e6466; } 100% { transform: translate(70px, 20px) rotate(45deg); box-shadow: 10px 6px 0 0 #5e6466; }
}
@-webkit-keyframes moving-bg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }
}
@-moz-keyframes moving-bg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }
}

Skateboards in pure CSS - Script Codes JS Codes

//original art: https://dribbble.com/shots/2057764-Skateboard-Options
//authors page: https://dribbble.com/ItsKyleAdams
Skateboards in pure CSS - Script Codes
Skateboards in pure CSS - Script Codes
Home Page Home
Developer Mikhail Korotkov
Username melawire
Uploaded November 12, 2022
Rating 3
Size 5,209 Kb
Views 14,161
Do you need developer help for Skateboards in pure CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mikhail Korotkov (melawire) Script Codes
Name
Cant get enough icecream in pure css3
Pokemon. Pikachu on acid css3 animation
Contact form html5 css3 responsive
Wind key, city logo. pure css
Login form page
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!