Skip to content

Instantly share code, notes, and snippets.

CodeMyUI CodeMyUI

Block or report user

Report or block CodeMyUI

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View index.html
<div class="slider">
<input type="range" min="1" max="100" value="50">
</div>
<!-- twitter / dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/8424211-Smoke-Slider" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a>
<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.
@CodeMyUI
CodeMyUI / index.html
Created Dec 16, 2019
Video button animation
View index.html
<div class="wrapper">
<input type="checkbox">
<div class="video">
<video src="https://www.robmillsarchitects.com/files/land/city/RMA_Web_land_city_1.mp4" loop muted autoplay></video>
</div>
<div class="text">
<span data-text="Watch the video"></span>
</div>
</div>
View index.html
<h1>All things are difficult before they are easy.</h1>
<h2>Thomas Fuller</h2>
<h3>CodeMyUI.com</h3>
View index.html
<h1>Lorem Ipsum</h1>
@CodeMyUI
CodeMyUI / index.html
Created Dec 13, 2019
WebGL enhanced javascript drag slider (performance improved - bonus)
View index.html
<!-- div that will hold our WebGL canvas -->
<div id="canvas"></div>
<div id="content">
<h1 id="title">Skylines</h1>
<!-- drag slider -->
<div id="planes">
@CodeMyUI
CodeMyUI / index.html
Created Dec 13, 2019
Slider Range Mars Weight Calculator
View index.html
<div class="container">
<div class="range-slider">
<span id="rs-bullet" class="rs-label">0</span>
<input id="rs-range-line" class="rs-range" type="range" value="0" min="0" max="200">
</div>
<div class="box-minmax">
<span>0</span><span>200</span>
@CodeMyUI
CodeMyUI / 04animation-send-button-transforms-into-birds.markdown
Created Dec 11, 2019
#04animation: send button transforms into birds
View 04animation-send-button-transforms-into-birds.markdown

#04animation: send button transforms into birds

A css animation of a send button transforming into flying birds when clicked.

A Pen by Claudia on CodePen.

License.

@CodeMyUI
CodeMyUI / index.haml
Created Dec 11, 2019
Xmas Cracker CSS3
View index.haml
#cracker.cracker
.cracker-message
.cracker-message__inner
Merry Xmas
%br/
From
%br/
Mike Samways!
.cracker-left
.cracker-left-inner
@CodeMyUI
CodeMyUI / index.html
Created Dec 9, 2019
Interactive Hippo Button
View index.html
<button>
<svg viewBox="0 0 242 109" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="ears">
<g class="ear-left">
<ellipse class="ear-left-outer" transform="matrix(0.9391 -0.3436 0.3436 0.9391 -3.6062 17.8444)" cx="48.5" cy="19.1" rx="11.4" ry="13.8"/>
<ellipse class="ear-left-inner" transform="matrix(0.9391 -0.3436 0.3436 0.9391 -3.8876 17.4659)" cx="47.3" cy="19.7" rx="7.3" ry="11.2"/>
</g>
<g class="ear-right">
<ellipse class="ear-right-outer" transform="matrix(0.3436 -0.9391 0.9391 0.3436 106.5379 189.869)" cx="189.1" cy="18.7" rx="14.4" ry="11.9"/>
View index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Christmas Button</title>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="bg">
<div class="centerer">
<a href="#" class="button">Christmas Button</a>
You can’t perform that action at this time.