CodeMyUI

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/bf5ba39767.js" crossorigin="anonymous"></script>

<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet"> 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<div id="svgWrapper">
<svg version="1.1" id="mailboxSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

CodeMyUI

HBD Michael 13allack 😄 - Poster

Happy 42nd Birthday to my footballing idol, Der Little Kaiser, Michael Ballack :D

I'm a little late with this(his birthday is on 26th Sept) due to work and stuff but anyways it was fun coding this pen. This design is inspired from the poster my little brother designed and gifted me for my birthday a few years ago :) I have it framed and hanging on my wall :3

Been wanting to play around with CSS blend modes and so glad I was finally able make something out of it. Also ended up trying text gradient animations :)

https://cssgradient.io IS AWESOME and you should check it out if you haven't already.

CodeMyUI

Clip blinds

A Pen by Subin on CodePen.

License.

DEMO https://codemyui.com/zoomed-cascading-overlay-glimmer-effect-for-images/

CodeMyUI

CSS Gradient Counter List

An example of css counter with a fixed background gradient

A Pen by Mattia Astorino on CodePen.

License.

DEMO https://codemyui.com/cool-to-warm-gradient-color-for-unordered-list-numbers-in-pure-css/

CodeMyUI

Flip Your Lid chrome only sry

A Pen by Adam Kuhn on CodePen.

License.

DEMO https://codemyui.com/fling-into-a-bin-animation-for-email-signup-form/

CodeMyUI

<ul class="c-rainbow">
 <li class="c-rainbow__layer c-rainbow__layer--white">RAINBOW</li>
 <li class="c-rainbow__layer c-rainbow__layer--orange">RAINBOW</li>
 <li class="c-rainbow__layer c-rainbow__layer--red">RAINBOW</li>
 <li class="c-rainbow__layer c-rainbow__layer--violet">RAINBOW</li>
 <li class="c-rainbow__layer c-rainbow__layer--blue">RAINBOW</li>
 <li class="c-rainbow__layer c-rainbow__layer--green">RAINBOW</li>
 <li class="c-rainbow__layer c-rainbow__layer--yellow">RAINBOW</li>
</ul>

CodeMyUI

Banded image wipe transition

Experimenting!

A Pen by Ed Hicks on CodePen.

License.

DEMO https://codemyui.com/horizontal-slit-image-transition-animation/

CodeMyUI

<div class="scrollHalf">
  
  <div class="scrollHalf__grupo" data-scroll>
    <div class="scrollHalf__grupo__imagen">
      <img src="https://source.unsplash.com/random/800x800" />
    </div>
    <div class="scrollHalf__grupo__contenido">
      <h1>Titulo 1</h1>
      
Betelgeuse

CodeMyUI

.wrapper
	.page
		p How are ya feeling?
		.radio-wrapper
			input(type="radio" id="choice-1" name="choices" value="1")
			label(for="choice-1") Awesome
			input(type="radio" id="choice-2" name="choices" value="2")
			label(for="choice-2") Pretty good
			input(type="radio" id="choice-3" name="choices" value="3")
			label(for="choice-3") Shoot me please

CodeMyUI

.toggle-wrapper
	.toggle.normal
		input#normal(type="checkbox")
		label.toggle-item(for="normal")
	.name Normal

.toggle-wrapper
	.toggle.transparent
		input#transparent(type="checkbox")
		label.toggle-item(for="transparent")