Html Code: Search Box with Fading Text Effect

Next Code
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.
<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>
If you don't know how to use this code or need more information Click here!
Html Best Codes

Html Code: Search Box with Fading Text Effect

Links
