+ 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.
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);
+ 3
Maybe box-shadow:; ?
+ 2
You can use blur effect
+ 2
Yes but it blurs the whole element.
+ 2
Use
background:rgba(0, 0, 0, 0.5);
0
That is good but can I somehow add a little reflection on it? Like it is reflecting the light?
0
https://images.app.goo.gl/LuA7qM9VjCQ7kZn69 something like this
0
https://images.app.goo.gl/LuA7qM9VjCQ7kZn69 i need something like this
- 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>