All geek questions in one place

Is it possible to add a window shadow to the inputs to css forms?

I am trying to add some spectacular effects to my input fields, and one of them that I found was hiding the window, I looked through the w3schools tutorial for shading boxes and tried several things to add it to my input box:

.l_input { box-shadow: 10px; }

This is not like my code. I also tried using it with the hover pseudo-effect, and it again did not work for this, the pseudo code I tried to do:

 .l_input { box-shadow: 5px; } .l_input:hover { box-shadow: 10px; transition: 2s; }

And again, this did not work, if this is the correct syntax for how the code should work, or if I make a small mistake in advance, I thought it might not be supported for inputs, but that sounded strange.

+5
source share
4 answers

 .l_input { box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: 0.3s ease-in-out; } /* hover effect */ .l_input:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.3); } 
 <div class="l_input"> Content <div>
+6
source

You can specify the window shadow as follows:

 .l_input { box-shadow: 5px 5px 5px #000; }

You must specify at least the first two values.

The first two describe a horizontal shadow and a vertical shadow. The third is blur and color.

 box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

Link Link:

Working script

And you can apply the shadow as follows.

 .l_input { box-shadow: 5px 5px 5px #000; } .l_input:hover { box-shadow: 10px 10px 10px #000; transition: 2s; }

Fiddle

+1
source

It should work with below code. If your class is .l_input , then it will work. It depends on your tag.

 .l_input { box-shadow: 5px 5px 5px #000; }

If not, try the code below:

You can see in JSFIDDLE .

 body { background: #ccc } .box h3 { text-align: center; position: relative; top: 80px; } .box { width: 70%; height: 200px; background: #FFF; margin: 40px auto; } /*================================================== * Effect 1 * ===============================================*/ .effect1 { -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; } /*================================================== * Effect 2 * ===============================================*/ .effect2 { position: relative; } .effect2:before, .effect2:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .effect2:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; } /*================================================== * Effect 3 * ===============================================*/ .effect3 { position: relative; } .effect3:before { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } /*================================================== * Effect 4 * ===============================================*/ .effect4 { position: relative; } .effect4:after { z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); } /*================================================== * Effect 5 * ===============================================*/ .effect5 { position: relative; } .effect5:before, .effect5:after { z-index: -1; position: absolute; content: ""; bottom: 25px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transform: rotate(-8deg); } .effect5:after { -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg); right: 10px; left: auto; } /*================================================== * Effect 6 * ===============================================*/ .effect6 { position: relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect6:before, .effect6:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); top: 50%; bottom: 0; left: 10px; right: 10px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } .effect6:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } /*================================================== * Effect 7 * ===============================================*/ .effect7 { position: relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect7:before, .effect7:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); top: 0; bottom: 0; left: 10px; right: 10px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } .effect7:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } /*================================================== * Effect 8 * ===============================================*/ .effect8 { position: relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect8:before, .effect8:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); top: 10px; bottom: 10px; left: 0; right: 0; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } .effect8:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } 
 <div class="box effect1"> <h3>Effect 1</h3> </div> <div class="box effect2"> <h3>Effect 2</h3> </div> <div class="box effect3"> <h3>Effect 3</h3> </div> <div class="box effect4"> <h3>Effect 4</h3> </div> <div class="box effect5"> <h3>Effect 5</h3> </div> <div class="box effect6"> <h3>Effect 6</h3> </div> <div class="box effect7"> <h3>Effect 7</h3> </div> <div class="box effect8"> <h3>Effect 8</h3> </div>
0
source

try it

 .l_input { box-shadow: 3px 3px 2px #666; transition: 0.2s all linear; border:1px solid #999; } .l_input:hover { box-shadow: 0 5px 15px #666; transition: 0.2s all linear; } 
  <input type="text" class="l_input">
0
source

Source: https://habr.com/ru/post/1240496/

More articles:


All Articles