CodeMyUI

CSS3 animation spinners and preloaders

CSS3 animations spinners and preloaders, no JS, no images

A Pen by fox_hover on CodePen.

License.

CodeMyUI

Image Overlay Slider

images from https://unsplash.com/

A Pen by Yugam on CodePen.

License.

CodeMyUI

<div class="loader">
  <div class="loader__bar"></div>
  <div class="loader__bar loader__bar--delay-1"></div>
  <div class="loader__bar loader__bar--delay-2"></div>
  <div class="loader__bar loader__bar--delay-3"></div>
  <div class="loader__bar loader__bar--delay-4"></div>
  <div class="loader__bar loader__bar--delay-5"></div>
  <div>
</div>

CodeMyUI

<div id="messenger"></div>

CodeMyUI

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

CodeMyUI

☑️ CSS-only Todo List Checkbox Animation

Recreation of https://dribbble.com/shots/3959132-Todo-List-Swipe-To-Check

Original built with JS but adapted to be CSS-only since JS wasn't necessary.

A Pen by Shaw on CodePen.

License.

CodeMyUI

<div class="wrapper">
  <div class="content">
    <div class="img"></div>
    <div class="text">
      <div class="line title"></div>
      <div class="line subtitle"></div>
    </div>
  </div>
</div>

CodeMyUI

<label for="DrawerMenuTrigger" class="OpenMenuButton">OPEN MENU</label>


<input type="checkbox" id="DrawerMenuTrigger" hidden>
<aside class="DrawerMenu">
  
  <div class="MenuContainer">
    <nav class="Menu">
      <h2 class="Menu__Title">Awesome CSS Menu</h2>
      <a href="#">Menu Item 01</a>

CodeMyUI

Fullscreen Expanding Div

A Pen by Colin Lohner on CodePen.

License.

CodeMyUI

.button()
  input(type="radio" id="vote_up" name="vote")
  input(type="radio" id="vote_down" name="vote")

  .bg
  .icon.
    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M10.5 21l7.5-7.5 7.5 7.5z"/></svg>
  .count 23
  .count-up 24
  label(for="vote_up")