+ 2

How to have glass effect background in html/css?

I want to achieve a block with glass effect background. It should be in css only.

14th Sep 2019, 10:12 AM
Ibrokhim Shokirov
Ibrokhim Shokirov - avatar
9 odpowiedzi
+ 5
So you want to make something a little transparent? For that you can use css rgba background:rgba(0 , 0 , 0 , 0.5);
14th Sep 2019, 10:53 AM
🍇 Alex Tușinean 💜
🍇 Alex Tușinean 💜 - avatar
+ 3
Maybe box-shadow:; ?
14th Sep 2019, 11:06 AM
🍇 Alex Tușinean 💜
🍇 Alex Tușinean 💜 - avatar
+ 2
You can use blur effect
14th Sep 2019, 10:15 AM
N3SHOW
N3SHOW - avatar
+ 2
Yes but it blurs the whole element.
14th Sep 2019, 10:16 AM
Ibrokhim Shokirov
Ibrokhim Shokirov - avatar
+ 2
Use background:rgba(0, 0, 0, 0.5);
14th Sep 2019, 2:45 PM
Vinay Kadhi
Vinay Kadhi - avatar
0
That is good but can I somehow add a little reflection on it? Like it is reflecting the light?
14th Sep 2019, 11:03 AM
Ibrokhim Shokirov
Ibrokhim Shokirov - avatar
14th Sep 2019, 11:30 AM
Ibrokhim Shokirov
Ibrokhim Shokirov - avatar
14th Sep 2019, 3:26 PM
Ibrokhim Shokirov
Ibrokhim Shokirov - avatar
- 2
<html> <head> <title>first page</title> </head> <body> <p>This is a paragraph. </p> <p>This is anoth <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="box" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px solid black; width:200px; height:200px"></div>gvvg <img id="image" src="sample.jpg" draggable="true" ondragstart="drag(event)" width="150" height="50" alt="" /> </body> </html>
15th Sep 2019, 1:22 PM
Chinonso