Text with Dynamic Jelly Border

Written by @kerixa 26 August 2020

Making elements dynamic in your web page will attract more attention. If you have an important thing to say which needs to be focused, put it in the following jelly border. It can be a link to an important page, a caution or etc.

Code Snippet:

                                                
                                                <!-- this script is provided by www.javascriptfreecode.com coded by: Kerixa Inc. -->
<style>
body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: #282828;
}
div {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  margin: auto;
  background-color: #21d4fd;
  background-image: linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
  animation: morphing 10s infinite;
  overflow: hidden;
}
div:hover {
  animation-play-state: paused;
}
div h1 {
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Verdana, sans-serif;
  font-weight: 400;
  font-size: 35px;
  line-height: 100%;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: auto;
}
@-moz-keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
  }
  25% {
    border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    box-shadow: -10px -5px 50px rgba(0,0,0,0.2);
  }
  75% {
    border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
  }
}
@-webkit-keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
  }
  25% {
    border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    box-shadow: -10px -5px 50px rgba(0,0,0,0.2);
  }
  75% {
    border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
  }
}
@-o-keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
  }
  25% {
    border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    box-shadow: -10px -5px 50px rgba(0,0,0,0.2);
  }
  75% {
    border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
  }
}
@keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
  }
  25% {
    border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    box-shadow: -10px -5px 50px rgba(0,0,0,0.2);
  }
  75% {
    border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
  }
}
</style>
<div><h1 style="text-align:center">Jelly Border</h1></div><a target='_blank' href='www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Shahmeer, coolcoco7, SmitaPatil25, owoboycute, 092010
advertisement 2