Editable Neumorphic Text

editable-neumorphic-text.markdown

Editable Neumorphic Text

A Pen by Adam Kuhn on CodePen.

License.

index.html

<input id='slider1' max='500' min='0' step='1' type='range' value='0'>
<input id='slider2' max='100' min='50' step='1' type='range' value='100'>
<textarea id="text" type="text" maxlength="50"></textarea>
<h1><span class="text" data-text="EDIT ME">EDIT ME</span><span data-text="|">|</span></h1>

script.js

$('#slider1').change(function(){
$('body').get(0).style.setProperty("--color", $('#slider1').val() + ' ,' + $('#slider1').val() + '%');
})

$('#slider2').change(function(){
$('body').get(0).style.setProperty("--l",  $('#slider2').val() + '%');
})

$('#text').on('keyup', function(){
  var fieldText = $('#text').val(); 
  $("h1 span.text").text(fieldText).attr('data-text', fieldText);
})
$('#text').on('focus', function(){
    $('h1 span.text').attr('data-text', $('#text').val())
  $("h1 span.text").text($('#text').val())
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.scss

$noise: url('data:image/png;base64,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');


body{
  --color:0, 0%;
  --l:100%; 
  --color-primary-lightest: hsl(var(--color),var(--l));
  --color-primary-light: hsl(var(--color),calc(var(--l) - 7.5%));
   --color-primary: hsl(var(--color),calc(var(--l) - 10%));
   --color-primary-dark: hsl(var(--color),calc(var(--l) - 15%));
  --color-primary-darkest: hsl(var(--color),calc(var(--l) - 25%)); 
    display:flex;
    height:100vh;
    width:100vw;
    justify-content:center;
    align-items:center;
    background-color: var(--color-primary-dark);
  &:before, &:after{
    filter:blur(5px);
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    background:linear-gradient(-45deg, var(--color-primary-darkest) 5%, transparent 50%);
    mask:$noise;
    top:0;
    left:0;
    opacity:1;
    z-index:1;
  }
  &:after{
    background:linear-gradient(135deg, var(--color-primary-light) 5%, transparent 50%);
  }
  input{
    position:absolute;
    bottom:10vh;
    z-index:999;
    transform:translateX(150px);
    &:before{
      content:'BRIGHTNESS';
      position:absolute;
      width:100%;
      text-align:center;
      top:-35px;
      left:0;
      pointer-events:none;
      font-family:'Oswald';
      color:var(--color-primary-darkest);
    }
    &:first-of-type{
      transform:translateX(-150px);
      &:before{
        content:'HUE';
      }
    }
  }
  input[type="range"] {
    -webkit-appearance: none;
    width: 200px;
    background: transparent;
    margin-bottom: 10px;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
  }

  input[type="range"]:focus {
    outline: none;
  }

  input[type="range"]::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50px;
    cursor: pointer;
    margin-top: -8px;
    background: var(--color-primary-dark);
    box-shadow:-5px -3px 8px var(--color-primary),
    6px 2px 12px var(--color-primary-darkest);
  }
  input[type="range"]:focus::-webkit-slider-thumb:hover {
    background: var(--color-primary-darkest);
  }

  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    background: var(--color-primary-darkest);
    border-radius: 1.3px;
  }

  input[type="range"]:focus::-webkit-slider-runnable-track {
    background: var(--color-primary-darkest);
  }


  textarea{
    position:absolute;
    width:100vw;
    height:50vh;
    top:calc(50% - 25vh);
    opacity:0;
    z-index:999;
    &::selection{
      background:transparent;
    }
    &:focus{
      & ~ h1 span:not(.text){
        opacity:1;
      }
    }
  }
  h1{
    margin:0;
    font-family:'Oswald';
    font-size:8rem;
    color: var(--color-primary-dark);
    text-shadow:-5px -3px 8px var(--color-primary),
    6px 2px 12px var(--color-primary-darkest);
    outline:none;
    text-transform:uppercase;
    max-width:800px;
    width:auto;
    margin:0;
    position:relative;
    line-height:1;
    pointer-events:none;
    word-break:break-word;
    span{
     display:inline;
      &:nth-of-type(2){
        opacity:0;
        transition:opacity 0.2s ease-in-out;
        position:relative;
        font-size:6.5rem;
        display:inline-block;
        margin-left:1rem;
        animation:flash 0.5s ease-in-out infinite alternate;
       transform:translateY(-1.25rem);
        &:before, &:after{
          opacity:0;
        }
        @keyframes flash{
          to{
            text-shadow:0px 0px 8px var(--color-primary),
    0px 0px 12px var(--color-primary-darkest);
            color:var(--color-primary-dark);
          }
        }
      }
      &:before, &:after{
        content:attr(data-text);
        position:absolute;
        display:inline;
        color:inherit;
        z-index:9;
        text-shadow:-5px -3px 3px var(--color-primary-light),
      6px 2px 5px var(--color-primary-darkest);
        mask:$noise;
        filter:blur(7.5px);
        opacity:5;
        top:50%;
        transform:translateY(-50%);
        left:0;
        width:100%;
        height:100%;
      }
      &:after{
       -webkit-text-stroke:3px var(--color-primary-light);
        text-shadow:none;
        mask:none;
        opacity:0.25;
      }
    }
  }
}