Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
CodeMyUI / index.html
Created October 23, 2016 12:27
Star rating for email
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
/* Star hover using lang hack in its own style wrapper, otherwise Gmail will strip it out */
* [lang~="x-star-wrapper"]:hover *[lang~="x-star-number"]{
color: #119da2 !important;
border-color: #119da2 !important;
}
@CodeMyUI
CodeMyUI / index.html
Created February 28, 2017 12:26
Star Rating | Pure CSS
<div class="content">
<h1>5 Stars Rate</h1>
<span><i class="fa fa-star"></i></span>
<p>Pure CSS!</p>
</div>
<div class="wrapper">
<input type="checkbox" id="st1" value="1" />
<label for="st1"></label>
<input type="checkbox" id="st2" value="2" />
@CodeMyUI
CodeMyUI / css-rain-effect.markdown
Created October 24, 2016 06:30
CSS Rain Effect

CSS Rain Effect

Looks best with a taller window/layout.

Rain drop elements animate down the screen, stem element inside animates to disappear toward the end of the drop's fall, splat element animates after the stem disappears.

JavaScript used to randomly position drop elements across the screen, slightly randomize their animation duration and delay, and also stagger their top position. Randomizing delay makes sure the drops don't fall in one sheet, randomizing duration keeps them from falling in the same constant synchronization. Staggering top position makes it so the splats don't fall in a single line.

Splatters are unfortunately disabled by default as it is rather intensive and significantly lowers framerate on most machines (in Chrome that is--FireFox and Edge are smoother actually). You can hit the splat toggle to turn it on. The effect is achieved by putting a dotted border-top on an ellipse element, and animating it from scale(0) to scale(1). You can get a better look at it by enabli

@CodeMyUI
CodeMyUI / gsap-scrolltrigger-marquee-page-border.markdown
Created June 9, 2021 12:32
GSAP ScrollTrigger - Marquee Page Border
@CodeMyUI
CodeMyUI / index.html
Created May 30, 2021 06:51
Voyage Slider | GSAP
<div class="app">
<div class="cardList">
<button class="cardList__btn btn btn--left">
<div class="icon">
<svg>
<use xlink:href="#arrow-left"></use>
</svg>
</div>
@CodeMyUI
CodeMyUI / index.html
Last active January 9, 2024 14:38
LIGHT Flickering Animation (Vanilla CSS)
<div>
<span id="L">L</span>
<span id="I">I</span>
<span id="G">G</span>
<span id="H">H</span>
<span id="T">T</span>
</div>
@CodeMyUI
CodeMyUI / index.html
Created June 12, 2018 00:48
Pip-Boy Screen in CSS
<div class="screen">
<p>It was this howling and firing of the guns at Ripley and St. George's Hill that we had heard at Upper Halliford. The Ripley gunners, unseasoned artillery volunteers who ought never to have been placed in such a position, fired one wild, premature, ineffectual volley, and bolted on horse and foot through the deserted village, while the Martian, without using his Heat-Ray, walked serenely over their guns, stepped gingerly among them, passed in front of them, and so came unexpectedly upon the guns in Painshill Park, which he destroyed.</p>
<p style="text-align:right">H. G. Wells - The War of the Worlds, Chapter 15</p>
</div>
@CodeMyUI
CodeMyUI / 3d-ebook-flip-animation.markdown
Created July 1, 2021 02:20
3D Ebook Flip Animation
@CodeMyUI
CodeMyUI / index.html
Created January 8, 2020 00:12
Todost - Todo// forked
<html lang="en" >
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-57635392-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-57635392-5');
</script>