JSFiddle - React, Tailwind, and code Playground

by bnson

HTML

<!DOCTYPE html>

<html>

<head>


    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <title>CSS3 inset text-shadow trick - jsFiddle demo</title>


    <style type='text/css'>
        body {
            /* This has to be same as the text-shadows below */
            background: #def;
        }
        
        h1 {
            font-family: Helvetica, Arial, sans-serif;
            font-weight: bold;
            font-size: 6em;
            line-height: 1em;
        }
        
        .inset-text {
            /* Shadows are visible under slightly transparent text color */
            color: rgba(10, 60, 150, 0.8);
            text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
        }
        /* Don't show shadows when selecting text */
        
        ::-moz-selection {
            background: #5af;
            color: #fff;
            text-shadow: none;
        }
        
        ::selection {
            background: #5af;
            color: #fff;
            text-shadow: none;
        }
    </style>


</head>


<body>

    <h1 class="inset-text">Inset text-shadow trick</h1>

</body>


</html>