Search Box with Fading Text Effect

Written by @kerixa 27 August 2020

Fading is one of the most popular effects in all dynamic graphical designs. If you want to make your website elements, like the search box, look different use this fading effect. When the box is clicked, its contents fades and moves upward. The reverse is true when the search box looses focus.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<link href="https://fonts.googleapis.com/css?family=Knewave&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: white;
  font-family: 'Knewave', cursive;
}

label {
  width: 100%;
  max-width: 300px;
}

input {
  width: 100%;
  display: flex;
  padding: 15px;
  background-color: white;
  border: 2px solid black;
  color: #111;
  font-size: 15px;
  box-shadow: 3px 1px 0px 2px, 0px -1px 0px 2px rgba(0, 0, 0, 0.62);
  height: 58px;
  transform: skew(-3deg, 1deg);
  font-family: 'Knewave', cursive;
  letter-spacing: 2px;
  text-transform: uppercase;
}
input:focus, input:valid {
  outline: none;
}
input:focus ~ ul li:nth-child(1)::before, input:valid ~ ul li:nth-child(1)::before {
  filter: blur(20px);
  transform: translate(0, -35px) rotate(-210deg);
}
input:focus ~ ul li:nth-child(1)::after, input:valid ~ ul li:nth-child(1)::after {
  filter: blur(0);
  transform: scale(1) rotate(0);
}
input:focus ~ ul li:nth-child(2)::before, input:valid ~ ul li:nth-child(2)::before {
  filter: blur(20px);
  transform: translate(0, -35px) rotate(-210deg);
}
input:focus ~ ul li:nth-child(2)::after, input:valid ~ ul li:nth-child(2)::after {
  filter: blur(0);
  transform: scale(1) rotate(0);
}
input:focus ~ ul li:nth-child(3)::before, input:valid ~ ul li:nth-child(3)::before {
  filter: blur(20px);
  transform: translate(0, -35px) rotate(-210deg);
}
input:focus ~ ul li:nth-child(3)::after, input:valid ~ ul li:nth-child(3)::after {
  filter: blur(0);
  transform: scale(1) rotate(0);
}
input:focus ~ ul li:nth-child(4)::before, input:valid ~ ul li:nth-child(4)::before {
  filter: blur(20px);
  transform: translate(0, -35px) rotate(-210deg);
}
input:focus ~ ul li:nth-child(4)::after, input:valid ~ ul li:nth-child(4)::after {
  filter: blur(0);
  transform: scale(1) rotate(0);
}
input:focus ~ ul li:nth-child(5)::before, input:valid ~ ul li:nth-child(5)::before {
  filter: blur(20px);
  transform: translate(0, -35px) rotate(-210deg);
}
input:focus ~ ul li:nth-child(5)::after, input:valid ~ ul li:nth-child(5)::after {
  filter: blur(0);
  transform: scale(1) rotate(0);
}
input:focus ~ ul li:nth-child(6)::before, input:valid ~ ul li:nth-child(6)::before {
  filter: blur(20px);
  transform: translate(0, -35px) rotate(-210deg);
}
input:focus ~ ul li:nth-child(6)::after, input:valid ~ ul li:nth-child(6)::after {
  filter: blur(0);
  transform: scale(1) rotate(0);
}
input:focus ~ ul li:nth-child(1)::after, input:valid ~ ul li:nth-child(1)::after {
  transition-delay: 400ms;
}
input:focus ~ ul li:nth-child(2)::after, input:valid ~ ul li:nth-child(2)::after {
  transition-delay: 600ms;
}
input:focus ~ ul li:nth-child(3)::after, input:valid ~ ul li:nth-child(3)::after {
  transition-delay: 800ms;
}
input:focus ~ ul li:nth-child(4)::after, input:valid ~ ul li:nth-child(4)::after {
  transition-delay: 1000ms;
}
input:focus ~ ul li:nth-child(5)::after, input:valid ~ ul li:nth-child(5)::after {
  transition-delay: 1200ms;
}
input:focus ~ ul li:nth-child(6)::after, input:valid ~ ul li:nth-child(6)::after {
  transition-delay: 1400ms;
}

label {
  position: relative;
}

ul {
  position: absolute;
  top: 38px;
  left: -4px;
  margin: 0;
  list-style: none;
  padding-left: 22px;
  position: absolute;
  display: flex;
  pointer-events: none;
  transition: 200ms;
}
ul li {
  letter-spacing: 3px;
  text-transform: uppercase;
  color: transparent;
  pointer-events: none;
  transition: 500ms ease-in-out;
}
ul li ::selection {
  color: transparent;
}
ul li::after, ul li::before {
  color: black;
  position: absolute;
  transition: 500ms ease-in-out;
}
ul li::before {
  top: -20px;
}
ul li::after {
  top: -63px;
  transform: scale(0) rotate(210deg);
  filter: blur(20px);
}
ul li[s]::before {
  content: attr(s) "s";
  transition-delay: 200ms;
}
ul li[s]::after {
  content: attr(s) "s";
  left: 12px;
  color: #666;
}
ul li[e]::before {
  content: attr(e) "e";
  transition-delay: 400ms;
}
ul li[e]::after {
  content: attr(e) "e";
  left: 24px;
  color: #666;
}
ul li[a]::before {
  content: attr(a) "a";
  transition-delay: 600ms;
}
ul li[a]::after {
  content: attr(a) "a";
  left: 36px;
  color: #666;
}
ul li[r]::before {
  content: attr(r) "r";
  transition-delay: 800ms;
}
ul li[r]::after {
  content: attr(r) "r";
  left: 48px;
  color: #666;
}
ul li[c]::before {
  content: attr(c) "c";
  transition-delay: 1000ms;
}
ul li[c]::after {
  content: attr(c) "c";
  left: 60px;
  color: #666;
}
ul li[h]::before {
  content: attr(h) "h";
  transition-delay: 1200ms;
}
ul li[h]::after {
  content: attr(h) "h";
  left: 72px;
  color: #666;
}
</style>
<label>
<input type="text" required>
<ul>
<li s>s</li>
<li e>e</li>
<li a>a</li>
<li r>r</li>
<li c>c</li>
<li h>h</li>
</ul>
</label><a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free 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!

Comments

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

0 / 300