added firefox support for topbar shadow

This commit is contained in:
2023-05-23 19:45:59 +01:00
parent fb83e537fd
commit 70083530ae
2 changed files with 16 additions and 8 deletions

View File

@@ -1,5 +1,7 @@
<html> <!DOCTYPE html>
<html lang="en">
<head> <head>
<meta charset="utf-8">
<title>neon443</title> <title>neon443</title>
<link rel="icon" type="image/x-icon" href="./images/main-fav.ico"> <link rel="icon" type="image/x-icon" href="./images/main-fav.ico">
<link rel="apple-touch-icon" href="./images/app-icon.png"> <link rel="apple-touch-icon" href="./images/app-icon.png">
@@ -12,7 +14,7 @@
<div id=topbar> <div id=topbar>
<h1 id="topbarTitle">neon443</h1> <h1 id="topbarTitle">neon443</h1>
</div> </div>
<div style="height: 50px;"></div><br> <div class="contentPush"></div><br>
<p> <p>
<b>My Projects</b><br> <b>My Projects</b><br>
<b>├─</b> <a href="https://neon443.github.io/musics-info/">Musics info</a><br> <b>├─</b> <a href="https://neon443.github.io/musics-info/">Musics info</a><br>
@@ -20,6 +22,7 @@
<b>└─</b> <a href="https://neon443.github.io/webpage-testing/">Webpage Testing</a><br> <b>└─</b> <a href="https://neon443.github.io/webpage-testing/">Webpage Testing</a><br>
<b>&emsp;&ensp;├─</b> <a href="https://neon443.github.io/webpage-testing/anyshare/">!!anyshare</a><br> <b>&emsp;&ensp;├─</b> <a href="https://neon443.github.io/webpage-testing/anyshare/">!!anyshare</a><br>
<b>&emsp;&ensp;└─</b> <a href="https://neon443.github.io/webpage-testing/sidenav/">Sidenav</a><br> <b>&emsp;&ensp;└─</b> <a href="https://neon443.github.io/webpage-testing/sidenav/">Sidenav</a><br>
Read more about my projects below.y
</p><br> </p><br>
<h3><b>Tips:</b></h3> <h3><b>Tips:</b></h3>

View File

@@ -11,14 +11,19 @@ a {
#topbar { #topbar {
position: fixed; position: fixed;
top: 0px; top: 0px;
backdrop-filter: blur(2.5px);
-webkit-backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px);
box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.4); -moz-backdrop-filter: blur(2.5px);
-webkit-box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.4); backdrop-filter: blur(2.5px);
-webkit-box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
width: 100%; width: 100%;
} }
#topbarTitle { #topbarTitle {
}
.contentPush{
height: 60px;
} }
body { body {
background-color: #f2f2f2; background-color: #f2f2f2;
@@ -61,9 +66,9 @@ h3 {
color: #f2f2f2; color: #f2f2f2;
} }
.topbar { .topbar {
box-shadow: 0px 0px 20px 10px rgba(255, 255, 255, 0.4); -webkit-box-shadow: 0px 0px 10px 10px rgba(255,255,255,0.5);
-webkit-box-shadow: 0px 0px 20px 10px rgba(255, 255, 255, 0.4); -moz-box-shadow: 0px 0px 10px 10px rgba(255,255,255,0.5);
box-shadow: 0px 0px 10px 10px rgba(255,255,255,0.5);
} }
#transaction { #transaction {