MrBlizzard's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Spacehey please add support for the html tag <textarea> for profiles

Please this https://codepen.io/scottkellum/pen/eaXJJb looks so cool but it has 1 tag that isn't allowed PLEASE


<textarea tabindex="-1"></textarea>

<div class="mask"></div>

<div class="note" contenteditable>

  Hey!<br>grab the pin to move me.

</div>
<style>

body {

  display: grid;

  grid-template-rows: min-content auto 1fr;

  grid-template-columns: min-content auto 1fr;

  background: url('https://images.unsplash.com/photo-1558051815-0f18e64e6280?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ');

  background-size: cover;

  min-height: 100vh;  

}

textarea {

  width: 100px;

  height: 20px;

  opacity: 0;

  cursor: default;

  grid-row: 1;

  grid-column: 1;

}

.mask {

  grid-row: 1;

  grid-column: 1;

  width: 100%;

  height: calc(100% - 20px);

  position: relative;

  &:after {

    content: '';

    position: absolute;

    height: 20px;

    left: 0;

    right: 20px;

    bottom: -20px;

    background: inherit;

  }

}

.note {

  position: relative;

  grid-row: 2;

  grid-column: 2;

  color: rgba(#000,.8);

  background-color: rgb(255,222,30);

  background-image: linear-gradient(

    160deg,

    rgb(255,222,30) 50%,

    rgb(255,250,80)

  );

  width: 200px;

  min-height: 160px;

  margin: 0 -110px;

  padding-top: 20px;

  box-shadow:

    0 -20px 0 rgb(255,222,30),

    -2px 6px 6px rgba(0,0,0,.4)

  ;

  text-align: center;

  font-family: 'marker felt', 'comic sans ms', sans-serif;

  font-size: 24px;

  line-height: 1.3;

  padding: 1em;

  box-sizing: border-box;

  transform: rotate(-1deg);

  transition: all .3s ease;

  &:before {

    content: '';

    display: block;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background-color: rgb(180,8,0);

    background-image:

      radial-gradient(

        at 60% 30%,

        #f99,

        red 20%,

        rgb(180,8,0)

    );

    background-position: 20% 10%;

    cursor: pointer;

    position: absolute;

    top: -20px;

    left: 90px;

    pointer-events: none;

    transform: scale(.8);

    box-shadow: -5px 10px 3px -8.5px #000, -1px 7px 12px -5px #000;

    transition: all .3s ease;

  }

}


textarea:hover ~ .note {

  &:before {

    transform: scale(.9);

    box-shadow: -5px 10px 6px -8.5px #000, -1px 7px 16px -4px #000;

  }

}


textarea:active ~ .note {

  transform: scale(1.05) rotate(-2deg);

  box-shadow:

    0 -20px 0 rgb(255,222,30),

    -5px 14px 14px rgba(0,0,0,.3)

  ;

}

</style>


2 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )