melanyss

<nav class="menu js-menu-items-wrapper">
  <ol class="js-menu-items-list">
    <li class="menu-item js-menu-item is-active" data-morph="M 418.1,159.8 C 460.9,222.9 497,321.5 452.4,383.4 417.2,432.4 371.2,405.6 271.3,420.3 137.2,440 90.45,500.6 42.16,442.8 -9.572,381 86.33,289.1 117.7,215.5 144.3,153.4 145.7,54.21 212.7,36.25 290.3,15.36 373.9,94.6 418.1,159.8 Z"><a href="#0">Home</a></li>
    <li class="menu-item js-menu-item" data-morph="M 402.7,215.5 C 433.9,280.4 488.1,367.2 447.7,426.8 410.1,482.2 316.7,460.2 249.7,460.6 182.8,461.1 88.08,485.5 51.26,429.5 10.29,367.3 73.19,279.4 106.9,213 141.8,144 176.6,33.65 253.9,33.7 332.2,33.75 368.8,144.9 402.7,215.5 Z"><a href="#0">About</a></li>
    <li class="menu-item js-menu-item" data-morph="M 451.5,185.8 C 441.5,266.2 339.6,305 272.3,350.2 207.7,393.6 226.7,444.7 182.6,447.9 132.8,451.4 83.97,399.9 66.37,353.1 34.6,268.4 41.16,141.8 112,85.44 186.1,26.329999999999984 313.8,54.099999999999994 396,101.4 425.2,118.2 455.6,152.4 451.5,185.8 Z">
      <a href="#0

melanyss

Gradient buttons

A Pen by İbrahim ÖZTÜRK on CodePen.

License.

melanyss

<h1 class="text-light">Pure CSS Animated Gradient Background</h1>

<div class="btn-group mt-2 mb-4" role="group" aria-label="actionButtons">
	<a href="https://codepen-api-export-production.s3.us-west-2.amazonaws.com/zip/PEN/pyBNzX/1578778289271/pure-css-gradient-background-animation.zip" class="d-block btn btn-outline-light" download><i class="fas fa-file-download mr-2"></i>Download Source</a>
	<a href="https://manuelpinto.in" target="_blank" class="d-block btn btn-outline-light">Visit my Website<i class="fas fa-external-link-square-alt ml-2"></i></a>
</div>

<h6 class="text-light small font-weight-bold"><i class="fas fa-code"></i> with <i class="fas fa-heart"></i> by Manuel Pinto</h6>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" integrity="sha256-qM7QTJSlvtPSxVRjVWNM2OfTAz/3k5ovHOKmKXuYMO4=" crossorigin="anonymous"></script>

melanyss

<nav class="menu js-menu-items-wrapper">
  <ol class="js-menu-items-list">
    <li class="menu-item js-menu-item is-active" data-morph="M 418.1,159.8 C 460.9,222.9 497,321.5 452.4,383.4 417.2,432.4 371.2,405.6 271.3,420.3 137.2,440 90.45,500.6 42.16,442.8 -9.572,381 86.33,289.1 117.7,215.5 144.3,153.4 145.7,54.21 212.7,36.25 290.3,15.36 373.9,94.6 418.1,159.8 Z"><a href="#0">Home</a></li>
    <li class="menu-item js-menu-item" data-morph="M 402.7,215.5 C 433.9,280.4 488.1,367.2 447.7,426.8 410.1,482.2 316.7,460.2 249.7,460.6 182.8,461.1 88.08,485.5 51.26,429.5 10.29,367.3 73.19,279.4 106.9,213 141.8,144 176.6,33.65 253.9,33.7 332.2,33.75 368.8,144.9 402.7,215.5 Z"><a href="#0">About</a></li>
    <li class="menu-item js-menu-item" data-morph="M 451.5,185.8 C 441.5,266.2 339.6,305 272.3,350.2 207.7,393.6 226.7,444.7 182.6,447.9 132.8,451.4 83.97,399.9 66.37,353.1 34.6,268.4 41.16,141.8 112,85.44 186.1,26.329999999999984 313.8,54.099999999999994 396,101.4 425.2,118.2 455.6,152.4 451.5,185.8 Z">
      <a href="#0

melanyss

Confirm confetti button

A Pen by Aaron Iker on CodePen.

License.

melanyss

CSS line behind title text

CSS Trick for a horizontal type line behind text. Inspired by this question @ CSS-Tricks: http://css-tricks.com/forums/discussion/11278/css-trick-for-a-horizontal-type-line-behind-text

A Pen by Eric Rasch on CodePen.

License.

melanyss

HTML5 before/after photo viewer

There is a growing need to show before/after imagery to compare two moments in time - especially when a natural disaster occurs so that you can better interpret what has happened in your area. This little snippet of code allows you to create as many before/after comparisons as you wish, along with an optional title and description. The code is fully responsive and as such you can specify the contianed image to be responsive by width or height. The design will adapt to be whatever your parent container size is so you could have it full screen or have several fixed width/height pictures on your webpage as shown. Choice is yours.

A Pen by Jason Mayes on CodePen.

License.

melanyss

<h1>Smooth scroll to element</h1>
<a id="linkage" href="http://www.jasonmayes.com" target="_blank">View my website</a>
<p id="constructor">Listening / constructing sentence... Stop talking and wait to finish command. Say new command only when this disappears.</p>
<div id="center">
  <h2 id="top" class="leading"><a id="link" href="#interesting">Click here</a> <a href="#interesting2">or here</a> to scroll down!</h2>
  
<p>Kitty ipsum dolor sit amet, pharetra faucibus enim ut tail flick run, amet adipiscing bibendum sleep on your keyboard sleep on your keyboard. Eat claw non faucibus ac nunc, justo sleep in the sink rip the couch purr nunc enim. Sniff kittens rip the couch puking, <a href="http://www.jasonmayes.com">regular hyperlink no hash</a> me run quis nunc lick judging you attack jump on the table. Leap purr mauris a sleep on your face shed everywhere, knock over the lamp puking vel zzz jump on the table consectetur chuf. Etiam neque feed me feed me nam toss the mousie, faucibus sleep on your keyboard susc

melanyss

<div class="text">
  <p>Nachos are</p>
  <p>
    <span class="word wisteria">tasty.</span>
    <span class="word belize">wonderful.</span>
    <span class="word pomegranate">fancy.</span>
    <span class="word green">beautiful.</span>
    <span class="word midnight">cheap.</span>
  </p>
</div>

melanyss

Animating a gif on hover

A Pen by Dejan Babić on CodePen.

License.