RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 12:17:44 +00:00
Code Issues Activity Actions

Base: Add a test page for CSS opacity property

Browse source
This commit is contained in:
Egor Ananyin 2021-07-24 09:42:16 +03:00 • committed by Ali Mohammad Pur
parent f567414f65
commit 6097578c59
2 changed files with 71 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

70
Base/res/html/misc/opacity.html Normal file
View file

@ -0,0 +1,70 @@
<html>
<head>
<style>
.op-100 {
background: green;
opacity: 1.0;
}
.op-70 {
background: green;
opacity: 70%;
}
.op-50 {
background: green;
opacity: 0.5;
}
.op-30 {
background: green;
opacity: 30%;
}
.op-0 {
background: green;
opacity: 0;
}
.red {
background: red;
}
</style>
</head>
<body>
<div class=op-100>
100% opacity
</div>
<div class=op-70>
70% opacity
</div>
<div class=op-50>
50% opacity
</div>
<div class=op-30>
30% opacity
</div>
<div class=op-0>
0% opacity
</div>
<div class="red">
Blending with other colors
<div class=op-100>
100% opacity
</div>
<div class=op-70>
70% opacity
</div>
<div class=op-50>
50% opacity
</div>
<div class=op-30>
30% opacity
</div>
<div class=op-0>
0% opacity
</div>
</div>
<div class=op-70>
70% opacity
<div class=op-50>
50% opacity inside 70% opacity
</div>
</div>
</body>
</html>

1
Base/res/html/misc/welcome.html
View file

@ -47,6 +47,7 @@
<p>Some small test pages:</p> <p>Some small test pages:</p>
<ul> <ul>
<li><a href="calc.html">calc Property</a></li> <li><a href="calc.html">calc Property</a></li>
<li><a href="opacity.html">CSS opacity property</a></li>
<li><a href="justify-content.html">Flexbox justify-content</a></li> <li><a href="justify-content.html">Flexbox justify-content</a></li>
<li><a href="lists.html">Lists</a></li> <li><a href="lists.html">Lists</a></li>
<li><a href="text-decoration.html">Text-decoration</a></li> <li><a href="text-decoration.html">Text-decoration</a></li>