mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
86 lines
1.9 KiB
HTML
86 lines
1.9 KiB
HTML
<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;
|
|
}
|
|
.hover-visible {
|
|
display: inline-block;
|
|
opacity: 0;
|
|
}
|
|
.hover:hover .hover-visible {
|
|
opacity: 1;
|
|
}
|
|
</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>
|
|
|
|
<div class="red hover">
|
|
Visible on hover
|
|
|
|
<div class="hover-visible">
|
|
I'm visible!
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|