minerva/Base/res/html/misc/opacity.html at 1d53ae1d6f7d460e411d0c3e9ba48f0e7b6160b9

ErisCyan / minerva

Find file

Newer

Older

minerva / Base / res / html / misc / opacity.html

minerva on 13 Jul 1 KB Initial commit

Raw Blame History

<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>