toybreaker

<!--
Sections animate in and out on scroll. Scroll up or down and the sections will wrap around after hitting the start or end. Uses GSAP for the animations.
-->

<header>
  <div>Animated</div>
  <div><a href="https://codepen.io/BrianCross/pen/PoWapLP">Originalhere</a></div>
</header>
<section class="first">
  <div class="outer">

toybreaker

Don't Flip, keep going!

simple flip on click with plain vanilla javascript

A Pen by rokma on CodePen.

License.

toybreaker

<div class="wrapper">
  <div class="turtle">
    <div class="leg"></div>
    <div class="body"></div>
    <div class="head"></div>
  </div>
</div>

toybreaker

Mouse Searchlight Circle

A Pen by Maxwell Estes on CodePen.

License.

toybreaker

PRETTY COOL CSS Automatic WCAG contrast font-color depending on element background

This pen is based on a talk by Dag-Inge Aas & Ida Aalen at CSSconf EU 2018. They implemented automatic contrast generation and secondary colors from a user-selectable base color, using javascript and the "color" NPM package. I achieved the same effect with just a couple lines of pure CSS :)

With the theme based on RGB color declarations, and having each base color as a CSS Custom Property, I apply some Luma (perceived brightness) calcs in order to style the text as black or white.

Also generates an automatic secondary color via filter:hue-rotate, and applies a darkened border if the background luma is too high to improve visibility.

toybreaker

<div class="wrapper">
  <div class="turtle">
    <div class="leg"></div>
    <div class="body"></div>
    <div class="head"></div>
  </div>
</div>

toybreaker

<svg 
  viewBox="0 0 1000 1000" 
  width="1000" 
  height="1000" 
  role="img"
>
  <title>
    A geometric pattern composed of nested circles and squiggly lines.
    Inspired by Legends of Zelda: Tears of the Kingdom
  </title>

toybreaker

Demo In-Page filtered Search

A Pen by hr on CodePen.

License.

toybreaker

<div class="test" contenteditable>
  Squiggly Text
  <p class="small">– with – <p/>
  SVG Filters 
  <p class="small">(you can even edit this text)</p>
  <p class="smaller">(only tested on Chrome so far)</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>

toybreaker

Animated SVG Turbulence Filter

inspired by #Codevember 08 - Animated SVG Turbulence Filter A PEN BY Sean Free

A Pen by Gabi on CodePen.

License.