Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Editable Neumorphic Text
<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>
$('#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())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
$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;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment